Horizontal Menu Displaying Vertical In IE

I had a fun website design issue with HTML and CSS today. Well it really wasn't the HTML at all, it was the CSS. I recently changed the menu on my Florida SEO site, to a horizontal drop-down menu using CSS. Well I though everything was fine & dandy until Fritz noticed a problem.

You see I only checked my site using Firefox 3.5, I made a rookie mistake of not checking it in Internet Explorer (IE) which is very important to do. Sometimes us people in the tech world forget that around 80% of normal people still use Explorer and not Firefox! That's why Fritz is the design expert and I stick with SEO mostly.

In Internet Explorer 7, my horizontal drop-down menu that looked so good in Firefox, was vertical! In Explorer 8 it was horizontal but the longer titled list items links were running into an extra line and creating an extra box which made it look bad. After doing a couple of small revisions to the CSS stylesheet the problems were fixed and the menu once again looked good, except this time it looks good in the past and recent versions of both Firefox and Explorer!

Because older version of IE and Firefox only accept display:inline-block only on elements with a natural display:inline, this was causing the issues. All I had to do to edit the stylesheet was the following:

ul.nav,
 .nav ul{
left:0;
top:23;}

added to
 ul.nav>li{
float:left;
margin-right:4px;}

Of course, your code will vary depending on several factors..and this is not the whole code on the stylesheet items, just what I had to add to them. CSS and stylesheets are great for website design, but there is a little learning curve. However, once you learn it and apply it to your website, it is great. However i think I'll stick to my seo duties and let Fritz handle the design more!

Scott
Pensacola Website Design