Stylesheets - CSS Oddity

Author

CSS Oddity

Neal

2004-08-21, 4:33 am

For whatever reason, I can't see this one.

See http://users.rcn.com/neal413/layouttest.html for a layout that should
be square and even in Opera and Firefox. See
http://users.rcn.com/neal413/layouttest2.html for one that is the same in
IE6.

The difference? In the former, floated div has margin: 0 1em 0 0.5em; in
the second example, it's changed to margin: 0 1em 0 0.5em; . I'm screwing
something up, I gotta be. There's a way to make this render more uniformly.

Clearly something stupid is wrong. I am either blind or something. Help?

Spartanicus

2004-08-21, 4:33 am

Neal <neal413@yahoo.com> wrote:

>For whatever reason, I can't see this one.
>
>See http://users.rcn.com/neal413/layouttest.html for a layout that should
>be square and even in Opera and Firefox. See
>http://users.rcn.com/neal413/layouttest2.html for one that is the same in
>IE6.
>
>The difference? In the former, floated div has margin: 0 1em 0 0.5em; in
>the second example, it's changed to margin: 0 1em 0 0.5em;

Changed? It's different in the code, but you've written identical
shorthand values above.

It renders differently according to the different margins, so what is
the problem?

--
Spartanicus

Neal

2004-08-21, 4:34 am

On Fri, 20 Aug 2004 08:58:40 +0100, Spartanicus <me@privacy.net> wrote:

> Neal <neal413@yahoo.com> wrote:
>
>
> Changed? It's different in the code, but you've written identical
> shorthand values above.
>
> It renders differently according to the different margins, so what is
> the problem?

Late at night, and I should expect this... let me explain it more
accurately.

http://users.rcn.com/neal413/layouttest.html should render as nicely
aligned boxes in Opera and Firefox. In IE the floated element is 0.5em to
the right. By changing that element's left margin from 1em to 0.5em, the
IE rendering is corrected. http://users.rcn.com/neal413/layouttest2.html

It's simple enough to use a hack to give IE the value it seems to need,
but I'm at a loss to explain exactly why this is happening in the first
place. I've played with all the margins and paddings I can think of. I'm
wondering if there's something obvious I screwed up or am just overlooking
that would make this problem arise.

Spartanicus

2004-08-21, 4:34 am

Neal <neal413@yahoo.com> wrote:

>Late at night, and I should expect this... let me explain it more
>accurately.
>
>http://users.rcn.com/neal413/layouttest.html

You could/should have reduced this to the relevant bit only:

body{margin:0;padding:0}
#nav{float:left;margin:0 1em}

<div id="nav">Foobar</div>

Anyway, it's an IE float/margin bug.

--
Spartanicus

Neal

2004-08-21, 4:34 am

On Fri, 20 Aug 2004 18:30:36 +0100, Spartanicus <me@privacy.net> wrote:

> Neal <neal413@yahoo.com> wrote:
>
>
> You could/should have reduced this to the relevant bit only:
>
> body{margin:0;padding:0}
> #nav{float:left;margin:0 1em}
>
> <div id="nav">Foobar</div>
>
> Anyway, it's an IE float/margin bug.
>

Figured it was. Sorry about the complexity, it was late when i was working
on that.

Any better fixes (like a containing block or something) than hacking the
margin?

Spartanicus

2004-08-21, 4:34 am

Neal <neal413@yahoo.com> wrote:

>Any better fixes (like a containing block or something) than hacking the
>margin?

#nav {
border: 1px solid white;
> display:inline;
float: left;
width: 8.5em;
margin: 0 1em;
padding: 0.5em;
}

Seems bizarre, but the float:left on the next line overrides the
display:inline (the width will stick), and IE now falls into line.

--
Spartanicus

kchayka

2004-08-21, 4:34 am

Neal wrote:
>
> See http://users.rcn.com/neal413/layouttest.html for a layout that should
> be square and even in Opera and Firefox. See
> http://users.rcn.com/neal413/layouttest2.html for one that is the same in
> IE6.
>
> There's a way to make this render more uniformly.

Trying to figure out why IE does what it does can take a whole lot of
time and head-banging. Sometimes it's just easier to find an alternative
route. Suggestion...

Drop margin:1em on all the individual boxes. Instead try
#wrapper { padding:1em }
#header { margin-bottom:1em }
#footer { margin-top:1em }

or something similar.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Neal

2004-08-21, 4:34 am

On Fri, 20 Aug 2004 20:05:06 +0100, Spartanicus <me@privacy.net> wrote:

> Neal <neal413@yahoo.com> wrote:
>
>
> #nav {
> border: 1px solid white;
> float: left;
> width: 8.5em;
> margin: 0 1em;
> padding: 0.5em;
> }
>
> Seems bizarre, but the float:left on the next line overrides the
> display:inline (the width will stick), and IE now falls into line.
>

Thanks, I'm filing that away for the future!

Neal

2004-08-23, 4:15 am

Spartanicus

2004-08-23, 4:15 am

Spartanicus

2004-08-23, 4:15 am

Neal

2004-08-23, 4:15 am