Click to See Complete Forum and Search --> : IE 7 Rendering Issues


visualizer03
04-28-2009, 12:11 PM
This link: http://tiny.cc/INvWm

The above page renders correctly in the majority of browsers, however, two lists do not work correctly in IE7. The CSS and HTML validate. However, in IE7 the main menu (horizontal bar) does not show the active state. It is not underlined. Also, the Breakfast, Lunch, Drinks menu is shown as a vertical list rather than a horizontal list.

Can someone please point me in the right direction for how my CSS needs to be adapted so that the website renders correctly in IE7?
Thank you.

holyhttp
05-01-2009, 01:51 AM
I notice the link corresponding to the current page has an id "current".
There is no need to have li (#active) and a (#current) at the same time.

<ul>
<li><a href="index.html">Home</a></li>
<li ><a href="menu.html" id="current">Menu</a></li>
<li><a href="about.html">About</a></li>
<li><a href="directions.html">Directions</a></li>
<!--<li><a href="#">Shop</a></li> -->
</ul>


Just have:
#menubar ul li a#current{
text-decoration:underline;
}

Also make sure
#meals li{
float:left;
}

To avoid having list items aligned vertically:
- float them
- specify a default width so a given item would not occupied the entire with forcing subsequent elements to align beneath it.