CSS Oddity

[Neal]

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]

Neal <ne*****@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]

On Fri, 20 Aug 2004 08:58:40 +0100, Spartanicus <[e-mail]> wrote:

Neal <ne*****@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?

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]

Neal <ne*****@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]

On Fri, 20 Aug 2004 18:30:36 +0100, Spartanicus <[e-mail]> wrote:

Neal <ne*****@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.

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]

Neal <ne*****@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]

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]

On Fri, 20 Aug 2004 20:05:06 +0100, Spartanicus <[e-mail]> wrote:

Neal <ne*****@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.

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