468,537 Members | 1,912 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,537 developers. It's quick & easy.

Mozilla rendering incorrect while IE rendering is correct?

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
Jul 21 '05 #1
5 3664
"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

Jul 21 '05 #2
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
Jul 21 '05 #3
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
Jul 21 '05 #4
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.
Jul 21 '05 #5
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 :)
Jul 21 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by David Opstad | last post: by
4 posts views Thread by Don Adams | last post: by
30 posts views Thread by Matt Probert | last post: by
1 post views Thread by David Gardner | last post: by
1 post views Thread by Adam | last post: by
4 posts views Thread by No One | last post: by
1 post views Thread by NancyASAP | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.