CSS: Centering a block-level element in Netscape 7.1

MichiganRon · Oct 30, 2003

I have some code that's actually displaying correctly in IE 6.0 but not in NS 7.1. I need to center a block-level element (

Code:

<div>

tag) on a page. Here is the CSS for that particular div tag:

Code:

#pageContainer {
	position: relative;
	padding: 0px 75px 0px 75px;
	width: 700px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}

This is the parent element of others on the page. It is a child to

Code:

<body>

. There is no CSS formatting associated with the

Code:

<body>

tag.

The "pageContainer" element is properly centered in IE 6.0, but will not center in NS 7.1.

What am I doing wrong? Or, is this a problem with Netscape?

-Ron

-We are all given the same deck of cards, it's how we play the hand we are dealt which makes us who we are.

philote · Oct 31, 2003

I don't think you're doing anything wrong. IE will center divs if they're a child of a container with text-align set to center.

What I read somewhere to do is to position the div in the middle of the page ( using left: 50%). Then give the div a negative left margin equal to half of the div's width. This will move it back over to the center of the page. I think you also need to have position set to absolute instead of relative.

For example:

Code:

#pageContainer {
    padding: 0px 75px 0px 75px;
    width: 700px;
    text-align: center;
    position: absolute;
    margin-left: -350px;
    left: 50%;
}

It should display correct in IE and Netscape.

Kevin
A+, Network+, MCP

MichiganRon · Nov 1, 2003

AHA! Thanks for your input philote, but that didn't seem to work either. The math works out, you'd think it would work, but it didn't.

So, I did a little troubleshooting and placed "

Code:

background-color: yellow;

" in "#pageContainer" to see where it was showing up in the window. Turns out that it WAS centered, it's just that the content within it was not centered. So, what I did was add:

Code:

margin-left: auto;
margin-right: auto;

to the sub-containers. This fixed it! Turns out that IE was passing these attributes to the child containers and Netscape was not.

Thanks again for your help.
-Ron

-We are all given the same deck of cards, it's how we play the hand we are dealt which makes us who we are.

philote · Nov 3, 2003

Hm, that is odd.

Since you're using Netscape, you may be familiar with Mozilla. Mozill has a nice tool you can install with it called the DOM Inspector. It lets you browse through all the objects on your web page, look at their css styles and where they came from, and show on the page where that object is. It's really handy sometimes when troubleshooting problems like this one. Of course, it won't help you see how IE's handling your html.

Kevin
A+, Network+, MCP

cian · Nov 3, 2003

I don't have Netscape with me so can't test, it should work no problem as I have done it using much the same code.
Try changing your margin code to just

margin: 0 auto;

Moz (& netscape) are sensitive browsers, be gentle with them

<!--#sig value=''É'' url=''

http://www.ssi-developer.net''

-->

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS: Centering a block-level element in Netscape 7.1

MichiganRon

MIS

philote

MIS

MichiganRon

MIS

philote

MIS

cian

Technical User

Similar threads

Part and Inventory Search

Sponsor