IE9 vs FF4 CSS interpretations

[Geates]

My goodness! I had a pretty sweet and simple framework for my website and was excite to fill it with content (which is odd, because I HATE filling in framework with content - it's tedious. But, I digress).

Orginially developed using IE9, I wanted to make sure FF displayed things correctly. Well, it looked like a tsunami hit my elements. Elements scattered everywhere with unexplicable property styles (compared to my expectations).

My HTML is solid! It's the CSS that's being differently interpreted. Now, this is nothing new. EVERYONE is aware that there are interpretation discrepencies between browsers, but I didn't think it would be as dramatic as I saw. Again, I digress.

I'm cleaning up the CSS so each browser will interpreted it similarly. The biggest problem I have is that FF seems not to apply child element properties with the parent elements.

Check out the differences between IE and FF.

http://phoxnet.cilverphox.com

http://phoxnet.cilverphox.com/css/phoxnet.css

What do I need to change to ensure child properties effect parent properties.

-Geates

In the voice of the Dos Equis Most Interesting Man in the World: "I don't always test my code. But when I do, I do it in production

 

[Geates]

Uh, it was the float properties - Solved.

Curiousity, though. It appears as though IE includes child properties within the parent element. FF, however, seems to create a new "layer" for each child and NOT apply it's styling to a parent element.

What gives?

-Geates

In the voice of the Dos Equis Most Interesting Man in the World: "I don't always test my code. But when I do, I do it in production

 

[feherke]

Hi

It appears as though IE includes child properties within the parent element. FF, however, seems to create a new "layer" for each child and NOT apply it's styling to a parent element.

Floated elements by definition are removed from the document's flow and placed in separate layers. It is not just FireFox, but all Gecko, WebKit and KHTML browsers. However, Presto renders it similarly to Trident now[sup](*)[/sup].

Note that website designers used to develop the design using a standard compliant browser and handled Trident's proprietary things at the end.

[small](*) - Browsers apply different of styles to the clearly invalid documents, trying to correct its possible errors. If your document would have valid DOCTYPE Opera would render it the same way as Gecko, WebKit and KHTML.[/small]


Feherke.

http://free.rootshell.be/~feherke/

 

[vacunita]

I may have understood this wrong, but If I didn't:

Why would it? That's completely wrong. While children may inherit properties from their parents, there's no logical explanation of why a Parent should inherit properties from their children.

Imagine if you float a parent left, because it needs to sit side by side with something else that's floated, but then you want a child to float right inside its left floated parent, or not float at all. Would you want the parent to suddenly float the other way or not float at all?

Of course not.

Its perfectly logical that parents don't get properties from their children.

However if the children aren't inheriting properties from their parents that's a different problem.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[Geates]

Feherke -

Of course! I knew that conceptually, but failed to apply it in practice - shame one me. Interestingly, though, a float element, by definition, is excluded from the flow of the document, seems IE seems to include it in the parent element (changing the parent width/height). I heard there is a way <link> that (in HTML5) allows a browser to use an alternative rendering engine.

vacunita -

I agree entirely. Meaning, I must have not explained myself clearly. I would assume that the content within an element would change how that element is displayed.

Take the simple example below:

#title {
   border: 1px solid #000;
}

#logo {
   float: right;
   padding: 10px;
}

<div id="title">
   <div id="logo"></div>
</div>

IE would display the title div having a height of 20px as the parent style seems to adjust depending on child styles. Whereas, FF would display the title div having a height of 0px as the parent seems to care-less about child styles. This is what I intended to convey.

-Geates

In the voice of the Dos Equis Most Interesting Man in the World: "I don't always test my code. But when I do, I do it in production

 

[vacunita]

Ah, yes. Float does indeed remove elements from the flow.
However in my experience both IE and FF work the same way, that is they don't make the parent grow to the children's height.

To get around this either set the overflow of the parent to something like hidden or auto, or add a clearing element, to clear the float.
Check it out here:

http://temphotel.webege.com/floating.html

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[Geates]

That site was down.

I understand why floats are separate from the document. The containing element that holds a float has no size (hasLayout = false). It simply "points" to floating content. Thanks for your comments.

http://quirksmode.org/css/clearing.html

-Geates

In the voice of the Dos Equis Most Interesting Man in the World: "I don't always test my code. But when I do, I do it in production

 

[feherke]

Hi

I heard there is a way <link> that (in HTML5) allows a browser to use an alternative rendering engine.

Huh ? I never heard such thing.

When I talked about rendering differences determined by the presence or absence of the DOCTYPE, I meant the same rendering engine's modes : quirks mode, strict mode and in some browsers almost strict mode.

For a better explanation than mine see Peter-Paul Koch's article, CSS - Quirks mode and strict mode.

Then add a valid DOCTYPE to your document ( eventually correct the markup errors too ) and compare its rendering again. Explorer's rendering should become closer to the other browser's. ( Generally. Probably in your case too, but not absolutely sure. )


Feherke.

http://free.rootshell.be/~feherke/

 

[Geates]

Adding the DOCTYPE helped significantly.

The <link> that I was mistakenly referring to was WebKit, I think. With a simple declaration, a web document is interpreted in the same way regardless of browser.

If I recall it more concretely, I'll post it.

-Geates

In the voice of the Dos Equis Most Interesting Man in the World: "I don't always test my code. But when I do, I do it in production