Mozilla rendering incorrect while IE rendering is correct?

[Mathias Schreiber [wmdb]]

Hello list,

I am quite new to the whole concept of CSS2 driven websites and am now
stuck a bit.

Take a look:
http://www.pudaluda.com/fileadmin/te...rrierefrei.htm

This page renders correct (means: like I think it should) in IE6 -
Mozilla Firefox 0.9.3 does not display the background color nor the
background-image of the div #komplett if I set float:left (or any kind
of float) within #content.

Maybe someone could point me to a resource that points out my problem.
Thank you all very much in advance

Mathias

[Steve Pugh]

"Mathias Schreiber [wmdb]" <cs******@wmdb. de> wrote:

Take a look:
http://www.pudaluda.com/fileadmin/te...rrierefrei.htm

This page renders correct (means: like I think it should) in IE6 -
Mozilla Firefox 0.9.3 does not display the background color nor the
background-image of the div #komplett if I set float:left (or any kind
of float) within #content.

Floated elements are taken out of the document flow, which means that
they do not contribute to the height of their parent element. To make
the parent expand to match the height of any floated children include
an element with clear: left (or whatever floats you need to clear)
after the last floated child and before the end of the parent.

Steve

[Michael Rozdoba]

Mathias Schreiber [wmdb] wrote:

Hello list,

I am quite new to the whole concept of CSS2 driven websites and am now
stuck a bit.

Take a look:
http://www.pudaluda.com/fileadmin/te...rrierefrei.htm
Pretty :)
This page renders correct (means: like I think it should) in IE6 -
Mozilla Firefox 0.9.3 does not display the background color nor the
background-image of the div #komplett if I set float:left (or any kind
of float) within #content.

At a quick glance, I think IE's wrong, as usual. Floats are in a sense
taken out of the flow; one consequence is that parent elements don't
expand to contain them. You float both the contained divs, hence the
container is left with nothing to contain & becomes rather short.

One solution, I think, would be to float the first div of links left &
set a left margin on the content div to accomodate the space the links
occupy.

To allow for the perhaps unlikely case where links are taller than
content, you might also want to add a div inside #komplett & after
content, with clear: left; to force it below the links (& thus expand
the parent div to contain them).

At that point you then need to contend with many possible bugs you might
encounter in IE. Peekaboo is one:
http://www.positioniseverything.net/.../peekaboo.html

This might also be useful if you've needed to set a height on an element
& are using floats: IE 3px bug,
http://www.positioniseverything.net/...reepxtest.html

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Mathias Schreiber [wmdb]]

Michael Rozdoba wrote:

Mathias Schreiber [wmdb] wrote:
Pretty :)
girls :)
At a quick glance, I think IE's wrong, as usual. Floats are in a sense
taken out of the flow; one consequence is that parent elements don't
expand to contain them. You float both the contained divs, hence the
container is left with nothing to contain & becomes rather short.
Explained like this it makes sense.
Like Steve suggested I put in a div called #clearer with a non-breaking
space in, set if to clear:both; et voila - works fine.
One solution, I think, would be to float the first div of links left &
set a left margin on the content div to accomodate the space the links
occupy.

To allow for the perhaps unlikely case where links are taller than
content, you might also want to add a div inside #komplett & after
content, with clear: left; to force it below the links (& thus expand
the parent div to contain them).
The DIV ID links is basically german.
This area can't be longer than the content because this is only a HTML
template for a CMS, this area isn't editable :)
At that point you then need to contend with many possible bugs you might
encounter in IE. Peekaboo is one:
http://www.positioniseverything.net/.../peekaboo.html
nice, thanks
This might also be useful if you've needed to set a height on an element
& are using floats: IE 3px bug,
http://www.positioniseverything.net/...reepxtest.html

thanks again :)

peace
mathias

[Neal]

Mathias Schreiber [wmdb] <cs******@wmdb. de> wrote:

This page renders correct (means: like I think it should) in IE6

You've gotten very good responses, so I'll simply state this rule of
thumb: whenever IE does something different than Mozilla or Opera
regarding CSS, there's a very high probability - close to certainty -
that IE is the one that's wrong.

[Mathias Schreiber [wmdb]]

Neal wrote:

You've gotten very good responses, so I'll simply state this rule of
thumb: whenever IE does something different than Mozilla or Opera
regarding CSS, there's a very high probability - close to certainty -
that IE is the one that's wrong.

Rule accepted :)
This time the weird thing was that I didn't know about floats enough so
that by my error IE displayed how I wanted it to look whilst others didn't.
Interesting:
Amaya displays crap :)