I have a header I designed in Macromedia Fireworks and is just a part of a template I am trying to put together for my business website. I have managed to center the header, but only when viewing it in IE. Using Firefox or other browsers (I also looked in Opera and Netscape), the header seems to be aligned left.

Can you look at the page, the source and the css and see if I have done something wrong or can suggest what I can do to correct the situation?

Here's the test document (the index that is also up has even bigger problems in Firefox, etc.) --> http://www.jmfloorcovering.com/test_...rs_header.html

Any advice would be appreciated.

Grump

I've look your site code. Maybe this can help you.

I think it's because of <center> tag. Firefox doesn't recognized this tag because it's not a w3c standard.

Change <center> tag into <div align='center'> (line 45) and </center> tag into </div>.

The centre tag has been depreciated. To get your content to center with <div> tags use CSS. For example:

body {
background-color: #464858;
margin: auto;
padding: 0px;
}

#header {
background-color: #EFEFEF;
margin: auto;
margin-top: 0px;
padding: 0px;
}

I had forgotten I tried a last ditch effort with the <center> tag. I replaced it with the divs, but that had no effect at all.

Grump

Put margin: auto into your bodt tag and into your #id

I think I understand the css margin element -- body {margin: auto;}. Right?

This is my current css body code:

body 
{
	background-color: #fff;
	background-image: url(images/nav/banner4.gif); 
      	background-repeat: repeat-x;
	text-align: center;
	color: #000099;
	font: 10pt tahoma, verdana, arial, helvetica, sans-serif;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
}

Will changing that effect the centering of my header? It already has the centering element in it.

What is the #id thing. Please give an example for us n00bs.

Thanks,

Grump

Firstly, get rid of the margin-top, margin-bottom, and so on. You can roll them all into one by putting margin: (it covers the four sides in alphabetical order if you are using more than one value). By having margin: auto; you get the browser to equally space the left and right spaces from the margins. Giving you a centered div. #id is used with your div tags. <div id="#header"></dv>, this tells the div to get all of its formatting from your CSS.

Thank you, that helped a lot. Looks great now.

Grump

Thanks a million Laurente! I could kiss you! Was several weeks I was looking for that simple answer (found many complicated thingy!!)!!
You rule!

Actually you should use -> http://www.webmaster-talk.com/css-fo...r-website.html

because the align attribute is also deprecated.