HTML - Newbie CSS question?

03-04-2005, 03:28 AM

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

Jens Lenge

03-04-2005, 03:46 AM

Jens Lenge wrote:

> 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>

03-04-2005, 04:51 AM

"mscir" <> wrote:

> 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

03-04-2005, 07:54 AM

On Fri, 4 Mar 2005 04:28:56 +0100, Jens Lenge <> wrote:

> 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 |
`-------------------------------------------------- --<--@ ------------'

03-04-2005, 10:58 AM

Jens Lenge wrote:

> 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.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

03-04-2005, 01:04 PM

On Fri, 04 Mar 2005 05:51:06 +0100, Jens Lenge wrote:

> "mscir" <> wrote:
>
>> 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

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

03-04-2005, 02:48 PM

On Fri, 4 Mar 2005 04:28:56 +0100 Jens Lenge wrote:

> 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.

03-04-2005, 05:35 PM

"Richard" <Anonymous@127.001> wrote:

> 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.

03-04-2005, 05:44 PM

"Barbara de Zoete" <> wrote:

>> Hello world,
> 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

03-04-2005, 05:46 PM

"Carolyn Marenger" <> wrote:

> [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

03-04-2005, 03:46 AM	#2
mscir Posts: n/a	Re: Newbie CSS question? Jens Lenge wrote: > 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>

03-04-2005, 04:51 AM	#3
Jens Lenge Posts: n/a	Re: Newbie CSS question? "mscir" <> wrote: > 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

03-04-2005, 07:54 AM	#4
Barbara de Zoete Posts: n/a	Re: Newbie CSS question? On Fri, 4 Mar 2005 04:28:56 +0100, Jens Lenge <> wrote: > 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 \| `-------------------------------------------------- --<--@ ------------'

03-04-2005, 10:58 AM	#5
Toby Inkster Posts: n/a	Re: Newbie CSS question? Jens Lenge wrote: > 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. -- Toby A Inkster BSc (Hons) ARCS Contact Me ~ http://tobyinkster.co.uk/contact

03-04-2005, 01:04 PM	#6
Carolyn Marenger Posts: n/a	Re: Newbie CSS question? On Fri, 04 Mar 2005 05:51:06 +0100, Jens Lenge wrote: > "mscir" <> wrote: > >> 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 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

03-04-2005, 03:28 AM	#1
	Newbie CSS question? 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 Jens Lenge

03-04-2005, 02:48 PM	#7
Richard Posts: n/a	Re: Newbie CSS question? On Fri, 4 Mar 2005 04:28:56 +0100 Jens Lenge wrote: > 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.

03-04-2005, 05:35 PM	#8
Jens Lenge Posts: n/a	Re: Newbie CSS question? "Richard" <Anonymous@127.001> wrote: > 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.

03-04-2005, 05:44 PM	#9
Jens Lenge Posts: n/a	Re: Newbie CSS question? "Barbara de Zoete" <> wrote: >> Hello world, > 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

03-04-2005, 05:46 PM	#10
Jens Lenge Posts: n/a	Re: Newbie CSS question? "Carolyn Marenger" <> wrote: > [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

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search