PDA

View Full Version : DIV height, padding in NS



japangreg
Jan 30th, 2003, 10:33 PM
Hey, everyone.

I've using a DIV to hold the header for my website. The header has an image used as the background with text offset over it to appear centered. The image is 65px high.

Here's the code:


#header{border: double #868B96; background-image:url(images/header.gif); width:100%; height:65px; text-align:center; color:#1768A1; font-weight:bold; padding-top:22px;

<div id="header">Title goes here</div>


Now in IE, everything's groovy. In NS, the box for the header is about 20-30 px to high. Is the top padding causing this? How can I correct it?

Thanks!
japangreg

jkd
Jan 30th, 2003, 11:47 PM
You'll notice it is 22px too high. With the correct CSS box model, width and height properties apply to the content box of the element. Then padding, border, and margins are added on top of that.

What you are seeing is a serious problem with IE < 6's box model.

Four solutions really (listed in my preference - last 2 are pure evil -> don't use them):

1. Disregard IE < 6 (what I do)

2. Use a CSS parser hack to reassign widths to correct values (such as http://www.tantek.com/CSS/Examples/boxmodelhack.html)

3. Surround each box in a <div>, and apply the width/height to that, and have the padding/border properties applied to the inside box

4. * { -moz-box-sizing: border-box; box-sizing: border-box; }

Probably #2 is the most practical, though #1 is the only one I feel ok doing. I don't believe in hacks (what #2 and #3 are), and #4 is encouraging incorrect usage of CSS by making Mozilla and IE5/Mac use IE/Win's incorrect box model. (And would screw over other compliant browsers such as Opera, and Konqueror/Safari).

Catman
Jan 31st, 2003, 03:19 PM
Another option is to use a strict doctype definition as the first line of the file -- this forces IE 5+ into "strict" CSS mode, which while not perfect, is closer to the correct model.

For example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

jkd
Jan 31st, 2003, 04:45 PM
Originally posted by Catman
Another option is to use a strict doctype definition as the first line of the file -- this forces IE 5+ into "strict" CSS mode, which while not perfect, is closer to the correct model.

For example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Only IE6+. Not IE5. Hence me saying ignoring IE < 6.

brothercake
Jan 31st, 2003, 05:06 PM
Actually Opera 7 does support box-model, but many others don't, so I would also advise against using it *in general*.

My suggestion would be

1 - use an XHTML Strict doctype to get IE6 in standards mode

2 - use IE5-specific style to get it to use the w3c box model:

<!--[if IE 5]>
<style type="text/css">

* { box-sizing:content-box; }

</style>
<![endif]-->

jkd
Jan 31st, 2003, 05:58 PM
Originally posted by brothercake

<!--[if IE 5]>
<style type="text/css">

* { box-sizing:content-box; }

</style>
<![endif]-->

Umm, that won't do anything. Only IE 5 will parse that conditional comment, and it certainly doesn't understand box-sizing. IE5/Mac does, but not IE5/Win.

brothercake
Jan 31st, 2003, 06:10 PM
oh ... I thought win/ie5 understood box-sizing ... so much for that plan :rolleyes:

japangreg
Jan 31st, 2003, 09:26 PM
...?

Sorry, I'm confused. IE isn't having a problem with this: Netscape is.

I'm using IE 6, so I guess the box model is fine (hadn't tested it in earlier browsers yet; just trying to get the top two, most recent to agree)

I'll try the methods posted here. Thanks to all who took the time to help me out!

japangreg

jkd
Jan 31st, 2003, 11:24 PM
Originally posted by japangreg
Sorry, I'm confused. IE isn't having a problem with this: Netscape is.

No no, you are assuming IE to be correct. More often than not you'll find when you start using CSS, that is not the case.

Netscape is doing this correctly, IE is not. That is the point we've been trying to make. And IE6 still uses the broken box model if you don't have an XHTML doctype, so just because IE6 displays it as desired means absolutely nothing.