Newbie CSS question?

Jens Lenge · Mar 4, 2005

Hello world,

I am pretty sure this is a typical newbie CSS question, but I couldn't find
a solution yet.

Obviously Firefox 1.x and Internet Explorer 6.x interprete the "width"
attribute differently (don't know how other browsers do it): If you define a
div with an absolute width of 100px and a padding of 10px, then IE will take
the width as 100px total including the padding, while Firefox will make it
100px plus the padding (so 120px in total).

How the hell can I make my div have the exact same width on all browsers? It
seems to work when setting the padding to 0px, but this would require an
extra (inner) div for the text content. Isn't there a more elegant solution?

Jens

mscir · Mar 4, 2005

Jens said:
Hello world,
I am pretty sure this is a typical newbie CSS question, but I couldn't
find a solution yet.
Obviously Firefox 1.x and Internet Explorer 6.x interprete the "width"
attribute differently (don't know how other browsers do it): If you
define a div with an absolute width of 100px and a padding of 10px, then
IE will take the width as 100px total including the padding, while
Firefox will make it 100px plus the padding (so 120px in total).
How the hell can I make my div have the exact same width on all
browsers? It seems to work when setting the padding to 0px, but this
would require an extra (inner) div for the text content. Isn't there a
more elegant solution?
Jens

This renders the same in my Firefox 1.0.1, Netscape 7.2, IE 6. Does it
work in your browsers? If so, post an example of something that doesn't
work in your browsers.

Mike

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Untitled</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
* {
padding:0;
margin:0;
border: 0;
}
body{
width: 100%;
height: 100%;
text-align: center;
}
..wrapper{
width: 300px;
padding: 10px;
border: 1px solid red;
margin: 0 auto;
}
</style>
</head>

<body>
<div class='wrapper'>
This is the wrapper div. This is the wrapper div. This is the wrapper
div. This is the wrapper div. This is the wrapper div. This is the
wrapper div.
</div>
</body>
</html>

Jens Lenge · Mar 4, 2005

mscir said:
This renders the same in my Firefox 1.0.1, Netscape 7.2, IE 6. Does it
work in your browsers? If so, post an example of something that doesn't
work in your browsers.

Your code worked perfectly, so I was able to track it down: It's obviously a
matter of the Doctype!
When you use (as you did)...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">

....then IE renders exactly as Firefox. When you use (as I did)...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

....then IE renders differently (you can easily check that in your example).

I admit I don't really understand the full meaning of the DOCTYPE syntax.
What is the difference between using "loose.dtd", "srict.dtd", or no
trailing URL at all?
Which option should I use these days (and why)?

Could you please give me some hints (or link me to a corresponding
explanation)?

Jens

Barbara de Zoete · Mar 4, 2005

Hello world,

It's just me

Obviously Firefox 1.x and Internet Explorer 6.x interprete the "width"
attribute differently (don't know how other browsers do it):

How the hell can I make my div have the exact same width on all browsers?

After you've correctly marked up your page (no extra divs needed), you style the
thing with css and keep FireFox as your primary browser to test the looks. When
done, open it in IE and prepare for the shock

One thing you should do is give a full doctype declaration[1], so IE is
rendering in standards mode (versus quirks mode)[2]. That will help.
Secondly, get the notion that you can never create a 'pixel perfect design'.
There are simply too many browsers out there for you to be able to serve all of
them with exactly the same layout. And that doesn't really matter, because your
visitor is going to see your site with only one browser anyway. If it works good
and the looks are okay, you've accomplished your goal - transferring your
information accessible and usable.

That said:
Annoying wrongs in the layout of IE can be corrected, without effecting the
layout in recent graphical mainstream browsers, more compliing ones. You can for
example use the child selector to set a different style for the two kinds.

for IE:
div {
width: 100px;
padding:10px; }

for all others:
body>div {
width:80px;
padding:10px; }

[1] A full doctype declaration includes the URL where the DTD is at, like
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

[2] See
<http://www.positioniseverything.net/articles/doctypes.html>
<http://www.alistapart.com/stories/doctype/>
<http://www.mozilla.org/docs/web-developer/quirks/>
<http://hsivonen.iki.fi/doctype/>

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

Toby Inkster · Mar 4, 2005

Jens said:
I admit I don't really understand the full meaning of the DOCTYPE syntax.
What is the difference between using "loose.dtd", "srict.dtd", or no
trailing URL at all?

Google: Quirks Mode.

Carolyn Marenger · Mar 4, 2005

Your code worked perfectly, so I was able to track it down: It's obviously a
matter of the Doctype!
When you use (as you did)...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">

...then IE renders exactly as Firefox. When you use (as I did)...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

...then IE renders differently (you can easily check that in your example).

I admit I don't really understand the full meaning of the DOCTYPE syntax.
What is the difference between using "loose.dtd", "srict.dtd", or no
trailing URL at all?
Which option should I use these days (and why)?

Could you please give me some hints (or link me to a corresponding
explanation)?

Jens

The differences are...

strict.dtd - the one I use, is the strictest interpretation of the 4.01
document type. There are no depreciated tags in the document. It is pure
html 4.01.

loose.dtd refers to documents that are a little looser. The document may
be based on 4.01, but some older tags are in the document. The majority
of the document should be 4.01, but there will also be 4.0, 3.2 and
possibley previous versions of html within the document. The idea is you
are transitioning to pure 4.01, but are not quite there yet.

See the W3C.ORG site for their complete description.

Carolyn

Richard · Mar 4, 2005

Hello world,

I am pretty sure this is a typical newbie CSS question, but I couldn't
find a solution yet.

Obviously Firefox 1.x and Internet Explorer 6.x interprete the "width"
attribute differently (don't know how other browsers do it): If you define
a div with an absolute width of 100px and a padding of 10px, then IE will
take the width as 100px total including the padding, while Firefox will
make it 100px plus the padding (so 120px in total).

How the hell can I make my div have the exact same width on all browsers?
It seems to work when setting the padding to 0px, but this would require
an extra (inner) div for the text content. Isn't there a more elegant
solution?

Jens

Padding adds more space to give the surrounding text a bit more room.
So firefox is correct.
If the division is not wide enough for the padding, it automatically
expands.
You could try using padding-right and padding-left instead of "padding" and
see if that helps.

Jens Lenge · Mar 4, 2005

Richard said:
Padding adds more space to give the surrounding text a bit more room.
So firefox is correct.
If the division is not wide enough for the padding, it automatically
expands.
You could try using padding-right and padding-left instead of "padding"
and
see if that helps.

Thank you. I have found that the incorrect rendering of IE is a matter of
pushing it into "Quirk Mode" via Transitional/Loose DTD.

Jens Lenge · Mar 4, 2005

Barbara de Zoete said:
It's just me

Well, at least a part of the world... ;o)

After you've correctly marked up your page (no extra divs needed), you
style the thing with css and keep FireFox as your primary browser to test
the looks. When done, open it in IE and prepare for the shock

That's exactly how I usually do it... including the shocks.

)

One thing you should do is give a full doctype declaration[1], so IE is
rendering in standards mode (versus quirks mode)[2]. That will help.

Yes, thank you. That's the difference.

Secondly, get the notion that you can never create a 'pixel perfect
design'.

In terms of fonts size and height of elements, yes. But in terms of
fixed-width layouts it should be possible to create an almost identical look
on all standard conforming browsers plus market leader IE. I'm at least
after making it work with the latest versions of Internet Explorer 6,
Firefox/Mozilla, and if possible Safari and Opera (the more the better).

However, I am NOT going to achieve a 'perfect' look on outdated browsers (IE
5.x and before, Netscape). I would like to stick with standard conforming
HTML/CSS and avoid browser-specific hacks whereever possible.

Thanks again,
Jens

Jens Lenge · Mar 4, 2005

Carolyn Marenger said:
[very helpful doctype explanation]

Thank you for the background!
Now I know a little more about what I am trying to do.
(However, seems I will need to come back a few times until I get it
running...)

Greetings from Germany,
Jens

Jens Lenge · Mar 4, 2005

Toby Inkster said:
Google: Quirks Mode.

Yes, that brings some light into the darkness.
Thank you, I didn't know the term "quirks mode" before.

Help with Visual Lightbox: Scripts	2	May 3, 2023
Closing an overlay outside the overlay as well	1	Dec 11, 2022
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Trouble with css	4	Mar 20, 2020
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022
Help with my responsive home page	2	Dec 14, 2022
Help with code	0	Jun 12, 2022
How to keep an a:hover effect with css like "onMouseOut()"?	2	Apr 4, 2013

Newbie CSS question?

Jens Lenge

mscir

Jens Lenge

Barbara de Zoete

Toby Inkster

Carolyn Marenger

Richard

Jens Lenge

Jens Lenge

Jens Lenge

Jens Lenge

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads