Stylesheets - Simple Example -- IE 6 or Firefox, Who's Right?

Author

Simple Example -- IE 6 or Firefox, Who's Right?

Tony LaPaso

2005-05-14, 7:47 am

Hi All,

I have a simple style sheet example below and I'm seeing different
results in IE 6 vs. Firefox 1.0.3. I'm not sure which browser is
rendering it correctly but I'm tending to think it's IE. In the code
below you will see two styled elements within the <body> element.

There are two aspects of the rendering I wanted to ask about.

First, notice that Firefox simply ignores the "width:500px" rule
whereas IE honors it. Why is that? Is IE correct or is Firefox? If you
change the "display:inline" to "display:block" Firefox *will* honor the
width.

Now, if you changed "display:inline" to "display:block", please change
it back to "display:inline" before reading the next question.

The second point I wanted to ask about is the way Firefox chops off the
upper border. Why is that?

Thanks very much, I appreciate any helpful replies.

--
Tony LaPaso

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Test Page</title>
<meta http-equiv="content-type" content='text/html; charset="utf-8"'
/>
</head>

<body style="background-color:green; margin:0; padding:0;">
This is the "Home Page
Header".
This is some simple content.
</body>
</html>

Beauregard T. Shagnasty

2005-05-14, 7:47 am

Tony LaPaso wrote:

> <?xml version="1.0" encoding="utf-8"?>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "DTD/xhtml1-strict.dtd">

...and with the XML prolog above the doctype, IE6 is tossed into quirks
mode.

--
-bts
-This space intentionally left blank.

Steve Pugh

2005-05-14, 7:47 am

"Tony LaPaso" <tlapaso@comcast.net> wrote:

>I have a simple style sheet example below

As you put it below your sig separator it won't be included in any
replies.

> and I'm seeing different
>results in IE 6 vs. Firefox 1.0.3. I'm not sure which browser is
>rendering it correctly but I'm tending to think it's IE.

Why? IE is almost always wrong when it differs from FF.

>First, notice that Firefox simply ignores the "width:500px" rule
>whereas IE honors it. Why is that?

width doesn't apply to inline elements.

>Is IE correct or is Firefox?

Firefox.

>If you change the "display:inline" to "display:block" Firefox *will*
>honor the width.

Exactly.

>Now, if you changed "display:inline" to "display:block", please change
>it back to "display:inline" before reading the next question.
>
>The second point I wanted to ask about is the way Firefox chops off the
>upper border. Why is that?

Borders on inline elements are applied after the line boxes are drawn.
So the first line box is placed at the top of the window as normal and
then the borders are added. So the borders are drawn off the top of
the window.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

Tony LaPaso

2005-05-14, 7:47 am

Steve,

Thanks for the reply. That clarifies it quite a bit except for one
thing.

>
> Borders on inline elements are applied after the line boxes are
> drawn.
> So the first line box is placed at the top of the window as normal
> and
> then the borders are added. So the borders are drawn off the top of
> the window.
>
> Steve

Aren't the "line boxes" you refer to the same as the visual
manifestation of borders? In other words, for all intents and purposes,
the "line boxes" *are* the borders (assuming we do not have
"border:none"). I don't see why a border should be "draw off the top of
the window" like this.

Basically, the "line box" *IS* the border, right? If that's right then
why should the top border be drawn outside the viewport. What am I
missing here? Does Meyer's O'Reilly book refer to this?

Thanks again

--
Tony LaPaso

Martin Bialasinski

2005-05-17, 7:32 pm

"Tony LaPaso" <tlapaso@comcast.net> wrote:

> First, notice that Firefox simply ignores the "width:500px" rule
> whereas IE honors it. Why is that?

Because your document is rendered in quirks mode due to the xml
prolog. In quirks mode, IE applies width to inline elements, a
violation of the css specification.

> Is IE correct or is Firefox?

Firefox.

> I'm not sure which browser is rendering it
> correctly but I'm tending to think it's IE.

When IE renders something differently from Mozilla and Opera or Safari, it
is quite a safe bet IE is wrong.

> If you change the "display:inline" to "display:block" Firefox *will*
> honor the width.

Because width applies to block elements.

> The second point I wanted to ask about is the way Firefox chops off the
> upper border. Why is that?

From the CSS specification:

"Although margins, borders, and padding of non-replaced elements do
not enter into inline box height calculation (and thus the line box
calculation), they are still rendered around inline boxes."

Bye,
Martin