Menu problems in IE7

I am currently creating a website for a friend. The site is located at: http://www.alsdevelopments.co.uk/bhb/

This site worked well with Firefox. I then looked at it in IE7 and the menus were moved to the top of the navigation part of the CSS I used. I have since tried to fudge this to work by inserting some padding above and below and this has made things go very strange in firefox.

The other problem I have is with the colours I have inserted in the main body of the site. They seem to bleed into the other areas in firefox but in IE they are correct.

I am now very confused.......can anyone help me?

Many thanks in advance.

Andy

Can you post a link that works please!!

I've looked at the site in FF and IE7 and they look identical....

Same here, IE7 and Firefox are showing it the same for me.

Hi guys,

When you load them up in IE due to the padding the menus look centered in the nav bar.

However, if you look in FF they are dropped down severely this is cos of the padding.

However, if I remove the padding to make the menus look ok in FF they are at the top in IE. This is what I need the help sorting out as I am totally baffled.

Tanx in advance....

This is a FF problem. First off, take your left float off the menu div and put it on the <li> items. (Actually this might fix it, but I don't need to make a deep analysis of this problem.) The easiest solution is to make a class . . . here

Code: Select all

.clear {clear: both;}

After you have finished the contents of a nested float like your menu, put

Code: Select all

<div class="clear"></div>

There are other ways to do it. <br class="clear /> can work nicely sometimes. Just realize that FF will drop any spacing at the end of nested divs, so it needs to end with something tangible or something unfloated.