Re: [css-d] : three columns, middle one liquid, content first, searching for a little IE6 tweak]

[David Laakso]

Christian Kirchhoff wrote:
> I am trying to utilize this layout for my purposes:
> http://blog.html.it/layoutgala/LayoutGala13.html
>
>
>
> Christian Kirchhoff
>   




FWIW, I use that layout now and then. I put IE/6 in quirksmode by 
putting an xml declaration above the doctype [1].
And set a min/max width on the outermost wrapper, with an IE 
"expression" workaround for IE/6 and down.
The method for doing that is explained here [2]. If you use this method, 
read Georg's documentation carefully-- there are conditions you must 
meet for the "expressions" to work in IE/6.




[1]



[2]



-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Three Columns

[~davidLaakso]

Richard Brown wrote:
>>>
> Richard Brown wrote:
>   

 Could folks check it out for me please?
 
 
 
>> 
> I am hoping this now renders sucessfully in all browsers.
>
> It now validates for xhtml and css.
>
> Many thanks.
>   
It is doing much better in ie/7.0, but still failing in ie/6.0. It 
exhibits horizontal column shift behavior if the text-size is adjusted-- 
#navigation shifts left (with part of it disappearing), and #extra 
shifts left, partially overlapping the centered content container. I 
regret I do not know the cause.
Regards,
~dL

-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Three Columns

[david]

Richard Brown wrote:
> Hi David and David
> 
> On 06/11/06, david <[EMAIL PROTECTED]> wrote:
>> ~davidLaakso wrote:
>> > Richard Brown wrote:
>> >>
>> >>> Richard Brown wrote:
>> >>>
>> >> Duly created a layout that doesn't break down - hopeful.
>> >>
>> >> Could folks check it out for me please?
>> >> 
>> >> 
>>
>> First time I visited the page in FF1.5.0.7 for Linux, the middle column
>> was wide and the contents of the other two columns overlaid it. I went
>> to grab a screen capture to show it and accidentally closed the browser
>> window. When I went back to capture the screen, the page rendered 
>> properly.
> I am hoping this now renders sucessfully in all browsers.

It renders fine now in FF1.5.0.7 for Linux. The left and right columns 
now have their white backgrounds.

When I kicked the font size up once in FF, the search box and button on 
your bar at the top wrapped and the entire top row shifted to the right, 
opening up a big empty space on the left. The search box lined up under 
the Home tab, so the empty space was double the height of the individual 
tabs. Also, the Safety Information, Brochure Requests, and remaining 
items in the left column don't line up properly when they wrap (which 
they do with my default font settings and browser window size).

76% for body text? Way too small, especially for a serif font on a 
computer screen. Kicking it up twice in FF gave me a clear, readable size.

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Three Columns

[Richard Brown]

Hi David and David

On 06/11/06, david <[EMAIL PROTECTED]> wrote:
> ~davidLaakso wrote:
> > Richard Brown wrote:
> >>
> >>> Richard Brown wrote:
> >>>
> >> Duly created a layout that doesn't break down - hopeful.
> >>
> >> Could folks check it out for me please?
> >> 
> >> 
>
> First time I visited the page in FF1.5.0.7 for Linux, the middle column
> was wide and the contents of the other two columns overlaid it. I went
> to grab a screen capture to show it and accidentally closed the browser
> window. When I went back to capture the screen, the page rendered properly.
I am hoping this now renders sucessfully in all browsers.

It now validates for xhtml and css.

Many thanks.
-- 
Rich
http://www.cregy.co.uk
Embracing what God does for you is the best thing you can do for him.
Romans 12 v 1
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Three Columns

[david]

~davidLaakso wrote:
> Richard Brown wrote:
>>   
>>> Richard Brown wrote:
>>> 
>> Duly created a layout that doesn't break down - hopeful.
>>
>> Could folks check it out for me please?
>> 
>> 

First time I visited the page in FF1.5.0.7 for Linux, the middle column 
was wide and the contents of the other two columns overlaid it. I went 
to grab a screen capture to show it and accidentally closed the browser 
window. When I went back to capture the screen, the page rendered properly.

The HTML Tidy extension reports a bunch of warnings, W3C validator 
reports 4 errors:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.efe-gbnets.com%2F

And HTML markup like this?



The pretty green signs would look better if the white parts were 
transparent.

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Three Columns

[~davidLaakso]

Richard Brown wrote:
>
> Duly created a layout that doesn't break down - hopeful.
>
> Could folks check it out for me please?
> 
> 
>
> Many thanks.
>   
I guess you are using a mac and not seeing the issues in ie7 and down. 
Among them, #navigation  is not enclosed in #container. And other issues.
Not sure I remember everything, but start with:
-- delete position relative from the header
-- #container should be the first div to open and last to close-- simply 
delete one of  just before  and all will be well.
-- make div#nifty a class div.nifty (you used the same id more than once 
on the same page)
-- delete the horizontal margin on #content (it's pushing  ie out), and 
assign it to the #content p instead.
--delete the li's that precede  in the list
-- delete the copyright dingbat near your name and replace it with a 
numerical entity for same.
--see if the file will validate now, and if not correct until it does.
-- you've assigned a class to the image in #navigation in order to float 
it, but neglected to include it in the markup, but since top left is 
default you may not need any css for it.
-- you've done the same as above with the right column image-- call it 
#extra img {float: right;}instead of what you've got now, and add clear: 
right (or is left?) to the selector beneath it.
There may be more to do, I just don't remember. But at least this may 
help get it started.
Regards,~dL

-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Three Columns

[~davidLaakso]

Richard Brown wrote:
>   
>> Richard Brown wrote:
>> 
>>
> Duly created a layout that doesn't break down - hopeful.
>
> Could folks check it out for me please?
> 
> 
>
> Many thanks.
>   
Connection error, Rich.
~dL

-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Three Columns

[Richard Brown]

Hi David et al

On 04/11/06, ~davidLaakso <[EMAIL PROTECTED]> wrote:
> Richard Brown wrote:
> > 
> > 
> >
> [trimmed]
> > The question is quite simple! How do I place a gap between the centre
> > column and the two outside ones please? I was thinking of putting
> > another div inside content and padding that. Is that right please?
> >
> The first question, in my mind, is how can one create a three column
> layout that works cross-browser? Best solve that first. These captures
> seem to indicate that what you have is not solving that question.
> 12 captures:  . At
> any rate, would you have better luck with one of the three column pages
> from here : ? Or, perhaps, this one:
>  ? And the "gap" (I
> am not quite sure what you mean by that) can come latter.
Duly created a layout that doesn't break down - hopeful.

Could folks check it out for me please?



Many thanks.
-- 
Rich
http://www.cregy.co.uk
Embracing what God does for you is the best thing you can do for him.
Romans 12 v 1
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Three Columns

[~davidLaakso]

Richard Brown wrote:
> 
> 
>   
[trimmed]
> The question is quite simple! How do I place a gap between the centre 
> column and the two outside ones please? I was thinking of putting 
> another div inside content and padding that. Is that right please?
>   
The first question, in my mind, is how can one create a three column 
layout that works cross-browser? Best solve that first. These captures 
seem to indicate that what you have is not solving that question.
12 captures:  . At 
any rate, would you have better luck with one of the three column pages 
from here : ? Or, perhaps, this one: 
 ? And the "gap" (I 
am not quite sure what you mean by that) can come latter.
Best,
~dL

-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/