473,385 Members | 1,487 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

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

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 <p> 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;">
<p style='width:500px; background-color:white; display:inline;
border:solid; border-width:10px;'>This is the "Home Page
Header".</p>
<p style='width:500px; background-color:yellow; display:inline;
border:solid; color:red; border-width:10px;
padding:0px;'>This is some simple content.</p>
</body>
</html>

Jul 21 '05 #1
7 4056
"Tony LaPaso" <tl*****@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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 21 '05 #2
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.
Jul 21 '05 #3
Steve,

Thanks for the reply. That clarifies it quite a bit except for one
thing.
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

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
Jul 21 '05 #4
Wow, I thought the xml prolog puts it into strict mode (prevents
quircks mode).

Thanks.
--
Tony LaPaso

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in
message news:rY*****************@twister.nyroc.rr.com...
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.

Jul 21 '05 #5
"Tony LaPaso" <tl*****@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
Jul 21 '05 #6
"Martin Bialasinski" <ag********@uni-koeln.de> wrote in message
news:pa****************************@uni-koeln.de...
"Tony LaPaso" <tl*****@comcast.net> wrote:
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."


Thank's exactly what I was looking for. Thanks very much.

--
Tony LaPaso
Jul 21 '05 #7
"Tony LaPaso" <tl*****@comcast.net> wrote:
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.


Aren't the "line boxes" you refer to the same as the visual
manifestation of borders?


No. The "line box" is the box that contains one line of text.

If you had:
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut felis
turpis, eleifend sit amet, fermentum non, venenatis commodo, pede.
Aliquam quis justo id sapien ultricies commodo. Donec libero urna,
pulvinar sed, auctor vitae,
<b>
lacinia sed, elit. Cras condimentum venenatis mi. Vestibulum pede.
Aliquam erat volutpat. Mauris nec ipsum quis arcu tincidunt auctor.
</b>
Maecenas turpis lectus, consequat vel, rutrum sed, pretium nec, justo.
Integer imperdiet urna quis metus. Donec sit amet mauris sit amet mi
iaculis congue. Fusce elementum ultricies lorem. Curabitur mollis
turpis at mauris consequat convallis.
</p>

Then this would become a single block box (for the <p> element) and a
single inline box (for the <b> element) and a varable, depending on
font size and window width, number of line boxes - one for each line
of text as displayed by the browser.

Steve

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

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 21 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

20
by: Matthew Thorley | last post by:
My friend sent me an email asking this: > I'm attemtping to decide which scripting language I should master and > was wondering if it's possible to do > these unixy awkish commands in python:...
3
by: Boris | last post by:
Please open http://www.highscore.de/opera/floatleft.html in Opera 7.54 and Firefox 1.0 Preview. Who is right? In my humble opinion Opera 7.54 is right: According to CSS 2.1 a "floating box must...
12
by: Brad | last post by:
Does anyone have any other solutions to the Firefox rendering problems with ASP.NET? I've tried the <browsercaps> web.config trick. It didn't work. Am I overlooking something else? Thanks!
5
by: Thomas Bügel | last post by:
Hi! Out of the book from Dan Cederholms (Bulletproof Webdesign - german ed.) I tested chapter 4 (creativ floating). For no CDR is included I wrote the code from the text in the book (images and...
36
by: phil-news-nospam | last post by:
Here is a simpler (no drop shadows) example of the padding bug I see: http://phil.ipal.org/usenet/ciwas/2006-05-08/buttons-1.html So far I find nothing in the CSS2 document that says I should...
7
by: Papelotte | last post by:
Hi all, I'm new to this forum and I am hoping that there is someone here who can help me. I have an ASP page that has javascript that works perfectly in IE, but not in Firefox. Can anybody tell...
7
by: db | last post by:
Hi@all Just got a comparison problem with javascript. I want to compare : document.getElementById(currentID).getAttribute("style") with a string, e.g: "background-color: lightgreen;" They...
30
by: galiorenye | last post by:
Hi, Given this code: A** ppA = new A*; A *pA = NULL; for(int i = 0; i < 10; ++i) { pA = ppA; //do something with pA
2
by: firstexact | last post by:
Hi guys, First post, hope you can help, I have done two sites www.trisant.co.uk and my own www.firstexact.co.uk. The 2 x 2 grid I originally envisaged goes haywire in Firefox as I get a 4 high by...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.