Question

I have the following html and css

<div id="header">
    <div id="headerTopLeft">
       <div id="areaSelect" style="display: none;">
          <img id="imgHome" alt="Home" src="/Content/images/home.png" jQuery1308161709610="52" /> 
          <span>&nbsp;</span> 
        </div>
     </div>
</div>

 <style>
#header
 {
     height: 75px;
 }
 #headerTopLeft
 {
     height: 75px;
     padding-top: 9px;
 }
 #headerTopLeft
 {
     width: 17%;
     margin-left: 1%;
     float: left;
 }
 #areaSelect
 {
     height: 40px;
     line-height: 27px;
     margin-left: 10px;
     display: none;
 }
 #areaSelect IMG
 {
     line-height: 27px;
     cursor: hand;
 }
 #areaSelect > SPAN
 {
     width: 165px;
     height: 27px;
     line-height: 27px;
     padding-right: 3px;
     float: right;
     display: inline-block;
 }
  #areaSelect SPAN.repair
 {
     background-image: url("images/mod_title_r.png");
     background-attachment: scroll;
     background-repeat: no-repeat;
     background-position-x: 0%;
     background-position-y: 0%;
     background-color: transparent;
  }
  #headerTopLeft
 {
     margin-left: 0px;
 }
  #areaSelect IMG
 {
     line-height: 27px;
  }

 </style>

I want the span and the image to line up vertically. This works in Chrome, Safari, FireFox and IE8 and IE9. IE7 However it does not work. The span is pushed down below the image. It is still floated right. I read in another question the solution is to change the line height of the span to match the image etc… It did not work. Please share any tips or tricks on how to fix this bug. I truly appreciate any feedback.

It’s currently rendering like this in IE 7.

 ********************************
 *  *******                     *
 *  * btn *                     *
 *  *******                     *
 *              *****************
 *              *     span      *
 ********************************

I forgot to mention there is javascript/jQuery code that set the class on the span. This is what displays the appropriate image.

Cheers,
~ck in San Diego

Answer 1

I’m on a mac and can’t test it from here, but did you try floating the img to the left?