Two CSS Problems

FrankJohnson posted this at 00:44 — 4th April 2004.

They have: 3 posts

Joined: Apr 2004

Friends:

I am working on a client's site which is not yet public. But you can see it by going here.

I'm experiencing two problems which I'm guessing are CSS-related (my style sheet is located at http://www.11thhour.tv/styles/main.css):

1. The site does not seem to center exactly in an 800 width resolution. The width of the main part of the site is set to 760px (and the top photo banner is that width so I know the rest of the site is falling correctly within that width). Any ideas on why the centering isn't working?

2. In Netscape 6.2, the grey/silver headers for the "Tomorrow's Guest" "Next Week's Schedule" and "Featured Products" does not take up the whole width of each box (as they do in IE6). Any thoughts on this?

Thanks in advance for any help anyone can give me - I really appreciate it.

Frank Johnson

Suzanne posted this at 03:02 — 4th April 2004.

She has: 5,507 posts

Joined: Feb 2000

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

FrankJohnson posted this at 17:59 — 4th April 2004.

They have: 3 posts

Joined: Apr 2004

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 posted this at 20:23 — 4th April 2004.

She has: 5,507 posts

Joined: Feb 2000

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.

FrankJohnson posted this at 23:09 — 4th April 2004.

They have: 3 posts

Joined: Apr 2004

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 posted this at 03:52 — 5th April 2004.

She has: 5,507 posts

Joined: Feb 2000

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.