CSS differ for IE 7 (7.0.5730.13) and Firefox 2 (2.0.0.14)

Hi everbody. I have a page that should work on multiple browsers but the thing is that despite that I am applying the same style for the page it is renderec different in IE and FF.

My CSS codes are:

For the one that holds the button backgrounds

			#operatorBG .operatorLeft { width:93px; height:77px; margin:0px; padding:0px; margin-left:44px; margin-top:140px; float:left; background-color:Yellow; }
			#operatorBG .operatorMiddle { width:93px; height:77px; margin:0px; padding:0px; margin-left:20px; margin-top:140px; float:left; background-color:Yellow; }
			#operatorBG .operatorRight { width:93px; height:77px; margin:0px; padding:0px; margin-left:18px; margin-top:140px; float:left; background-color:Yellow; }

Code (markup):

For the one that holds th general buttons styles:

.operatorStyle { width:93px; height:77px; background-repeat:no-repeat; margin:0px; padding:0px; background-position:center; background-color:Transparent; border-style:none; cursor:pointer; }

Code (markup):

and finally my page's source is:

                <div class="operatorLeft">
                    <asp:Button ID="btAvea" CssClass="operatorStyle" 
                        style="background-image:url(images/btnAvea.png);" 
                        runat="server"/>
                </div>
                <div class="operatorMiddle">
                    <asp:Button ID="btTurkcell" CssClass="operatorStyle" 
                        style="background-image:url(images/btnTurkcell.png);" 
                        runat="server"/>
                </div>
                <div class="operatorRight">
                    <asp:Button ID="btVodafone" CssClass="operatorStyle" 
                        style="background-image:url(images/btnVodafone.png);" 
                        runat="server"/>

Code (markup):

But the problem is that the page is rendered correctly in FF as:

but in IE it looks like:


Does anybody have a comment on the solution of this issue?

Regards.

 

Your code doesn't make a whole lot of sense, plus it would be nice to see the real HTML (what the source code is after processed through that asp stuff). In general the text should not be able to be shifted around if it's really inside the containers.

background-position:center;
I do know that Internet Explorer, at least up to 6 so I'm not sure about 7, needs not one but two positioning coords. Yes, the specs say that if you don't mention the other it should be "center" as well by default but IE doesn't follow this (like so many other specs). So at the very least, "center center" would be better than nothing.

Were this my child, I'd do something more like this:

<div id="operatorBG">
  <div>
    <asp:Button ID="btAvea"  runat="server"/>
  </div>
  <div class="operatorMiddle">
    <asp:Button ID="btTurkcell" runat="server"/>
  </div>
  <div class="operatorRight">
    <asp:Button ID="btVodafone" runat="server"/>
  </div>
</div>

Code (markup):

.operatorBG div { 
  width: 93px; 
  height: 77px; 
  background: #ff0 url(images/btnAvea.png) center center no-repeat; 
  padding:0px;
  float: left;
  margin: 140px 0 0 44px;
}
.operatorBG div.operatorMiddle {
  background-image: url(images/btnTurkcell.png);
  margin-left: 20px;
}
.operatorBG div.operatorRight {
  background-image: url(images/btnVodafone.png);
  margin-left:18px;
}

Code (markup):

Okay, I lied, I can't tell what exactly these buttons are supposed to do but turn images and/or CSS off and you can't tell what the damn things are supposed to do : ) Never lock text in an image only. If I knew what these buttons really were I would simply make them blocks by floating them and remove the divs entirely. Like, if these are links to other parts of the page, I'd make them links (anchors) set to float: left (which makes them blocks) and either give them a foreground (HTML) image so you can at least have some ALT text (although, unfortunately there are screen readers who don't read alt text, stom) or better yet, real text covered up with a css image (Gilder-Levin image replacement) though that would mean an extra element possibly (depends how you set it up).

Since you have set margins and padding to 0 on every single element here, I'm guessing it's not the margin-padding difference between browsers causing the issue. So, were I debugging this, my first try would be adding the second "center" to the background positions. This may completely solve the current problem. However, the code is not best, and should be made a big leaner (makes it easier to change, debug, etc). And I would likely not use buttons if that's what these are (sorry I can't really read ASP so I don't know what kind of buttons these are making).

 

Thank you very much for your advices. At the very first step, getting rid of the DIVs and applying to styles directly to the buttons solved my problems. It is very clear that the DIVs there are completely abundant but somehow I missed that.

For the other issue that you have mentioned are alo very valuable, I will try to apply them as well and will keep this thread as a reminder.

Thank you very much for your support.