Horizontal Navigation in Internet Explorer

HTML & CSS
1

I tossed together this site (www.greatsavannahevents.com) for a co-worker a while back, and just today realized that the buttons in the upper right were showing up wrong in IE (as opposed to Chrome, Firefox, etc., where they are all of equal height).

The HTML looks like this:

<div id="navcontainer"> 
	<ul id="navlist"> 
	<li><a href="http://www.greatsavannahevents.com/contact.php">Contact Us</a></li> 
	<li><a href="http://www.greatsavannahevents.com/meet-your-planner.php">Additional Services</a></li> 
	<li><a href="http://www.greatsavannahevents.com/photos.php">Photos</a></li> 
	<li><a href="http://www.greatsavannahevents.com/services.php">Services</a></li> 
	<li><a href="http://www.greatsavannahevents.com">About Us</a></li> 
	</ul> 
</div>

And the CSS looks something like this…

#navcontainer ul {
	padding-left: 0;
	margin: 0;
	width: 560px;
	float: right;
	font-family: Arial, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	font-size:12px;
	line-height:14px;
	}

#navcontainer ul li { 
	display: inline; 
	}

#navcontainer ul li a {
	width:100px;
	height: 80px;
	padding-top:60px;
	background-color: #b0b0b0;
	color: White;
	text-decoration: none;
	float:right;
	border: 1px solid #ffffff;
	}

#navcontainer ul li a:hover {
	background-color: #000000;
	color: #fff;
	}

Any help you guys could provide to make it look like the image below (a screenshot of Chrome) in IE would be greatly appreciated.

2

Of course.

Use a full DTD. The one you have now:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

throws IE in quirks mode :slight_smile:

You probably need this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
3

Good call. That did the trick.

Thanks!

4

You’re very welcome :slight_smile: On Sitepoint.

5

Yes having doctype does wonderful things :slight_smile:

Have u ever realised that amazon had no doctype?

6

Do they (amazon) realize it’s ****ing up IE in every way possible?! I had to ctrl+alt+del to end IE task for amazon. And the time for loading it’s out my good manners language!

Another bad example of: “If the people need it, they should use it the way we want!”

7

Yes, i hate website that do not follow standards or proper web-coding rules, such as a doctype, and then use the excuse that it does not matter because the site is widely used. Another example of this is Apple & Adobe’s sites-- more so Adobe. I know they currently own flash, but they could trip some things do and make them faster and even more elegant with css3, html5, and js/jquery