Suzanne — Mon, 05 Apr 2004 03:52:35 +0000

It's only IE6 that has the problems? Check the CSS Wiki or their help list. Usually errors of this sort require adjusting the widths until things work. Chrome may be part of the cause (interface) -- exact widths can be iffy.

FrankJohnson — Sun, 04 Apr 2004 23:09:07 +0000

Thanks Suzanne. I was under the impression that only IE5 added the padding to the width, but it sounds like my impression is wrong. If so, then I'm thinking I need to apply one of the Box Model Hacks. Right?

Frank

Suzanne — Sun, 04 Apr 2004 20:23:53 +0000

Sadly, yes. The padding does that because IE including the padding as part of the width of the box (incorrectly).

http://www.css-discuss.org/ has a nice Wiki with oodles of solutions that will work hopefully for your situation.

I should have mentioned previously (I tend to be terse or verbose, rarely betwixt those states!) that actual headings are block level elements, so they would take widths. Inline elements do not because they are, well, inline.

Semantically using headings is a better choice, but you may also choose to use inline elements set to display as block level elements (and v.v.) to good effect for some situations, as with navigation lists.

Now One CSS Problem

FrankJohnson — Sun, 04 Apr 2004 17:59:38 +0000

Suzanne:

Thanks so much for your quick reply. The second problem (with the gray header backgrounds not taking up the entire width of each box) was fixed by your suggestion. The first problem (centering the content) doesn't seem to be working, though, at least not completely.

Here are what I think are the relevant selectors from my style sheet:

#container {
	width: 760px;
	margin: auto;
	padding: 0px;
	background-image: url(/images/container_background.gif);
	background-color: black;
}

#content {
	padding: 10px;
	margin-top: 0px;
	margin-right: 200px;
	background-color: white;
	text-align : left;
}

body {
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size : 100%;
	font-style : normal;
	font-variant : normal;
	font-weight : normal;
	color : Black;
	text-align : center;
}

The container selector is for the all the content and the content selector is for the left-hand column under the navigation menu and above the footer.

The site centers correctly in Netscape 6.2, but in IE6, it's pushed to the right by about 10 pixels so that a horizontal scroll bar shows up. The same problem exists in IE5.01 and IE5.5.

Any ideas on why it's not showing up correctly in IE?

Thanks again for your help - I really appreciate it.

Frank

Suzanne — Sun, 04 Apr 2004 03:02:43 +0000

/* for everything sensible */
margin: auto;
/* for IE */
text-align: center;

2. That would be because they are just pieces of inline text. Try using actual headings.