Melinda Odom wrote:
> Hi,
>
> I cannot get this vertical line to show in mozilla nor netscape.
> http://www.designhosting.biz/designhosting/ssl/index.html
>
> It does show in ie7.
IE7 still has the 'Layout' bug, and uses the 'width: 900px' as trigger
for expansion to contain floats.
> If I remove this style: * html #container { overflow: visible; }
>
> and add "table: display;" to the #container style the vertical line
> shows up in all 3 browsers but the left column in the white area for
> links is pushed down below the main text area in netscape and
> mozilla but not ie7. I have no idea what is happening in previous
> versions of ie.
That's 'display: table;' (I guess), and it indicates that the good
browsers need to be told to 'expand to contain floats'. IE7 doesn't
understand 'display: table' and Gecko (Netscape, Mozilla, Firefox) has
its own interpretation of 'table'.
Thus, another 'expand to contain floats' trigger is needed - one that
most browsers agree on.
You can use 'overflow: hidden' as an 'expand to contain floats' trigger,
as all the latest browsers agree on how to handle that. IE6 (and older)
doesn't, so the 'overflow: visible' hack is still needed.
Solution:
Delete...
#container {
height: 100%;
}
...since it may limit the height.
Add...
#container {
padding-bottom: 6px;
overflow: hidden;
}
...to make the container expand to contain floats, with a padding on the
bottom because I thought it looked nice :-)
Keep the...
* html #container {
overflow: visible;
padding-bottom: 0;
}
...with the additional 'padding-bottom: 0;' since IE6 adds a bit of
space there anyway.
Try the above, and see if it's close enough for comfort.
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
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/
