views:

677

answers:

3

I have the following html which is display correctly in IE8. Below is the html and the css for grey_btn_75. Any idea why this would be happening?

<div style="float: left; width: 70px; margin-right: 25px; padding-top: 60px;
            margin-left: 25px">

<asp:Button ID="btnAddAll" runat="server" Text="Add All" 
            OnClick="btnAddAll_Click"
            CssClass="grey_btn_75" />

<div class="spacer"></div>

<asp:Button ID="btnAdd" runat="server" Text="Add"
            OnClick="btnAdd_Click" 
            CssClass="grey_btn_75" />

<div class="spacer"></div>

<asp:Button ID="btnRemove" runat="server" Text="Remove" 
            OnClick="btnRemove_Click"
            CssClass="grey_btn_75" />

<div class="spacer"></div>

<asp:Button ID="btnRemoveAll" runat="server" Text="Remove All" 
            CssClass="grey_btn_75"
            OnClick="btnRemoveAll_Click" /><br />

</div>

CSS:

.grey_btn_75
{
background: url(../images/grey-75px.png);
background-repeat: no-repeat;
border-style: none;
font-family: Arial,Helvetica,Sans-Serif;
font-size: 12px;
font-weight: bold;
width: 75px;
height: 23px;
color: #000000;
cursor: pointer;
}

Things I have tried so far:

I removed the CssClass and the buttons still did not show up. I modifed the CssClass and the buttons still did not show up. I put other controls such as an asp:Label and and asp:ImageButton and they showed up fine. I tried putting a new button and it did not show up.

+1  A: 

Your div width is 70px, your button is 75px. You need to clean that up.

Martin
Can I have both a left a right margin?
Xaisoft
Oh, sorry, you are right. Margins will have nothing to do with it (I mistook them for being on the button).
Martin
Actually it looks like the margins did have something to do with it. In IE7, it appears the margins were hiding the buttons behind the listbox. As soon as I removed one, part of the buttons decided to show up.
Xaisoft
+1  A: 

The problem is with the styles. Try commenting them out to see which one (or the combination) is responsible for the buttons to disappear. Don't forget about the inline style of the top DIV as well.

This is a nice guide for button styles:

http://particletree.com/features/rediscovering-the-button-element/

People recommend

width:auto; overflow:visible;

specifically for IE

DmitryK
If you have an IE version of a style sheet you may want to add overflow:visible; there
DmitryK
A: 

I think it is the color value you have set in your CSS. I got the same problem previously and what I did was change the color value to something else.

Angelo
I did this and it still did not work. I even removed the whole CSS class and it did not work.
Xaisoft