View Full Version : Horizontal Nav Bar Staggering in IE

05-21-2009, 07:30 PM
I used a horizontal navigation made up of 4 images linking to the other pages in the site; all four images are side-by-side comprising a horizontal navigation. The site was functioning/rendering correctly in Firefox and IE8, but the buttons are staggering in IE 7 (and likely in previous versions).

I've scoured the net for a few fixes to no avail. I would appreciate any wisdom.

Here is the HTML:

<a href="contact.html"><img src="Images/contact.jpg" width="200" height="40" alt="Contact Button"/></a></li>
<a href="affiliations.html"><img src="Images/affiliations2.jpg" width="200" height="40" alt="Affiliations button" /></a>
<a href="aboutkaren.html"><img src="Images/aboutKaren.jpg" width="200" height="40" alt="About Karen Button" /></a>
<li><a href="index.html"><img src="Images/homebutton.jpg" width="200" height="40" alt="Home button" /></a></li>


And here is the related CSS:

div#navbar {
position: relative;
margin: 0 auto;
height: 40px;
z-index: 100;
border: 1pt solid;
border-color: rgb(153, 102, 51);
background-color: rgb(254, 250, 235);

ol {
list-style-type: none;
width: 100%;
overflow: hidden;

Any help would be greatly appreciated. Thanks so much.

05-21-2009, 08:09 PM
I think there must be a bit more to your css as that isn't going to give you a horizontal menu. Also, it might be better to use an unordered list <ul> rather than an ordered list <ol> - as your list isn't ordered.

Re your staggering problem, give it a try by adding:

#navbar ol li {display:inline}

If this doesn't fix the problem, please post your entire code.