Website menu displays funny in all IE before IE 8

Question

Hi all, I am new to CSS and have coded my first site with CSS. I will admit to not fully understanding CSS yet but would like to learn. I have heard about special XHTML & CSS coding being needed for older IE browsers but really don't know what CSS code is causing the trouble.

The website is here. The problem is with the top and bottom navigation menus on all pages except Blog and Moodle (I haven't updated those yet). Can someone help me with what needs to be isolated for IE?

Thanks so much!

Answer 1

You need to do three things.

1. use a strict doctype at the top of your page. at the moment you have transitional. a strict doctype ensures that IE conforms to CSS standards the best it can.

2. Add the following bit of CSS for your top navigation list items

   #topnavcontainer ul li { display:inline; }

3. Add the following bit of CSS for your bottom navigation list items

   #bottomnavcontainer ul li { display:inline; }

Answer 2

Another solution (that should work regardless of doctype);

#topnavcontainer li {
    display:inline-block;
    zoom: 1;
    *display: inline;
}

The short explanation is that inline-block allow you to style the list-items as if they were block level elements (ie, give them width, height, etc) while still laying them out inline. An advantage over float: left is that you can apply text-align to #topnavcontainer to align your navigation left/center/right. You can also set vertical alignment although that seems to be a bit finicky at times.

The other two lines, zoom and *display are a trick to make this work in older versions of IE. It's a long explanation but if you want to know more about it, search Google for "hasLayout" and "css star hack".