Sent by Christian Montoya on 24 October 2005 20:08
On 10/21/05, Mike Soultanian [EMAIL-REMOVED]> wrote:
> What is the difference between declaring width at 100% or auto? I guess
> what I'm more interested in is why you'd want to use one or another with
> certain browsers.
>
> I was studying the css at yahoo mail's site (still amazes me) and
> noticed that they're using a selector hack to override the width for
> certain browsers:
>
> div.sidebar div{width:100%;}
> html>body .sidebar div{width:auto;}
>
> What is the difference between the 100% and the auto? I'm guessing
> there is some kinda quirk at play here and I'd really like to know what
> it is.
Here's the difference: 100% means fully 100% of the window. Auto means
( 100% of the window - borders - margin - left and right positioning
). If the borders are both 10%, auto will compute to 80%. It is more
robust for standards compliant browsers, since you are basically
telling it to fill whatever is left.
But IE 5 and IE 6 in quirks mode don't add border and padding to the
total width of a box. Rather they are included in the set width. I'm
not even sure that IE supports width:auto, but if it does, here's why
you still wouldn't use it for IE 5 and 6-quirks:
if I have a box of 300px width and 50px border,
standards browsers would compute the total width it occupies as 300 +
50 + 50 = 500px.
IE 5 and quirks would compute the total width as 300px. the actually
space between the borders would be 200px.
So here's how 100% for IE and auto for everyone else works:
IE has a problem with auto width, so you give it 100% and have IE6 run
quirks mode... no matter how much border or padding something has, it
won't go past 100%.
The other browsers will go past 100%, so you tell them to fill what's
left after borders padding etc. are calculated.
>
> I also noticed that they do this:
>
> .modulecontainer div{border-style:solid;border-width:1px;margin:-2px
> -8px;height:1em;}
>
> html>body .modulecontainer div{height:auto;}
>
> notice that they override in the height. However, in this case it's 1em
> vs auto. Why are they doing this?
>
That's really funky. IE probably doesn't like height:auto; at all.
--
C Montoya
rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.com
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
