?
Solved

Cannot get menu to be centered using CSS

Posted on 2012-08-27
7
Medium Priority
?
471 Views
Last Modified: 2012-08-29
Hello all experts.

If you look at the two images below, one from IE and the other from FireFox, you will find that the top menu is moved to the right in IE.  While in FF is appears as it should, centered.

I have provided both the HTML as well as the CSS files below.

Will someone please take a look at it and tell me what is it that I am doing wrong...??

I think the problem is in the div called "nav".

Thanx much,

d.

HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
 
<HTML>
<HEAD>
	<TITLE>title</TITLE>
	<link rel="stylesheet" href='css/main.css' type="text/css" />
</HEAD>
 
<BODY>
 
<div id="wrapper">
<div id="container">
 
<!-- MENU STARTS -->
<div id="mainmenu">
<ul id="nav">
    <li><a href="/">Home</a></li>
    <li><a href="benefits.php">Benefits</a></li>
    <li><a href="training.php">Training</a></li>
    <li><a href="downloads.php">Downloads</a></li>
    <li><a href="contact.php">Contact Us</a></li>
</ul>
</div>
<!-- MENU ENDS -->
 
<div id="logo">
 
	<img src="images/logo.png" />
 
	<div id="header_words">With American Tech Inc.'s patented and copyrighted product, lottery 
retailers can get scratch-off sales totals in seconds for about $2/day, 
equipment included.
	</div>
 
</div>
<div id="centerdiv">
 
<br /><br />
 
	<span class="downloads"><a href="CP210x_VCP_Win_XP_S2K3_Vista_7.exe">Windows Driver</a></span>
 
	<span class="downloads"><a href="cxpress.exe">Communication Software</a></span>
	
</div>
 
    </div> <!-- container div -->
</div> <!-- wrapper div -->
 
</BODY>
</HTML>
 

Open in new window


CSS:
body {
background-color: #000;
text-align:center; /*For IE6 Shenanigans*/ 
color: #FB7907;
font-size:18px;
}

img {border:0;}

#wrapper {
width:960px;
text-align:center;
float:center;
margin:0 auto;
}

#container {
width:100%;
text-align:left;
padding-top:10px;
}

#mainmenu {
border: 0;
text-align:center;
}

#nav
{
    padding:10px 0px;
}
#nav li 
{
    display:inline;
}
#nav li a 
{   
   font-family:Arial;
   font-size:18px;
   text-decoration: none;
   float:center;
   padding:18px;
   background-color: #333333;
   color:#ffffff;
   border:1px;
   border-color:#9B1C26;
   border-style:solid;
}
#nav li a:hover 
{
   background-color:#9B1C26;
   text-decoration: none;   
   padding-bottom:18px;
   border:1px;
   border-bottom-color:#000000;
   border-bottom-style:solid;
   /* margin:-1px; */
}

#logo {
  	padding:5px; 0;
	text-align:center;
}

#header_words {
	width:650px;
	color:#CE814D;
	font-face:arial;
	font-size:24px;
	padding-rop;20px;
	text-align:center;
	float:center;
	margin:0 auto;	
}

#centerdiv  {
	text-align:center;
	padding-top:5px;	
	font-family:arial;
	font-size:22px;
	font-weight:bold;
	color:#FFFC68;	
	float:center;
	margin:0 auto;	
}

#benefits {
	width:500px;
	text-align:left;
	float:center;
	margin:0 auto;
}
#formdiv {
	width:650px;
	text-align:left;
	float:center;
	margin:0 auto;
	font-size:14px;
}

.downloads {
	border:2px solid yellow;
	padding:20px;
	width:200px;
}

.downloads a {
	text-decoration:none;
	color:blue;
}

.downloads a:hover {
	text-decoration:underline;
	color:blue;
}

Open in new window


Internet ExplorerFireFox
0
Comment
Question by:driven_13
7 Comments
 
LVL 18

Expert Comment

by:Rartemass
ID: 38339639
For a start there is no float:center option so the wrapper float won't work.
http://www.w3schools.com/cssref/pr_class_float.asp

This article should see you through centering with CSS:
http://pmob.co.uk/pob/centred-float.htm
0
 

Author Comment

by:driven_13
ID: 38339850
Actually my wrapper does work. I just removed the float:center property.

Can anyone else tweak/edit my CSS to make the menu centered...???

Thanx,

--d.
0
 
LVL 45

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 38340367
Looked at your site in Firefox and IE (7, 8 and 9) and the menu looks centred. Can't see a problem. One thing you will definitely want to change though is your DOCTYPE - you have yours set to HTML 3.2!! This was something from the 90s. Have a look here a choose a suitable, up-to-date one:

http://www.w3schools.com/tags/tag_doctype.asp

That may fix your problems.

As @Rartemass has already mentioned, remove all reference to float:center - it doesn't exist and may break other CSS.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 17

Expert Comment

by:nanharbison
ID: 38340520
0
 

Author Comment

by:driven_13
ID: 38343734
ChrisStanyon, that was it.

It was the DOCTYPE.

Any idea which is the best one to use...???

Thanx for your help.
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38344614
Looking at your code, a safe bet would be to use the Strict XHTML 1 DocType.

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

Author Comment

by:driven_13
ID: 38345707
Thanx fro your help.

--d.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question