Question

I have a menu bar in which each button is an image floated to the right. It looks perfect in Safari, FF, and Chrome but in IE7 the buttons are grouped fine, but they appear about 50 pixels lower than the other browsers (out of the menu bar). Any tips on how to fix this? Thank you!

http://jsfiddle.net/mE2b8/

My CSS:

 #menu {
      width: 100%;
      height: 58px;
      background-color: #00653a;
    }

#menu_mid {
  width: 823px;
  height: 58px;
  margin: 0px auto;
  background-color: #00653a;
}

.menu_links {
  float: right;
  display: inline;
}

HTML:

  <div id="menu">
      <div id="menu_mid">
        <img src="assets/img/menu_rrt.gif" alt="RRT"/>
        <img src="assets/img/menu_contact.gif" alt="Contact" class="menu_links"/>
        <img src="assets/img/menu_news.gif" alt="Contact" class="menu_links"/>
        <img src="assets/img/menu_about.gif" alt="Contact" class="menu_links"/>
        <img src="assets/img/menu_home.gif" alt="Contact" class="menu_links"/>
      </div>
    </div>

Answer 1

The problem seems to be that the logo (or graphic with alt=”RRT”) does not have a width defined. I added an ID to the img element and then floated it left. Seems to be what you’re looking for: http://jsfiddle.net/mE2b8/3/