Why do my images not load in IE but do in xx browser?

Question

The images for my css header class load correctly in Chrome and FF, but not in IE8 or 7. Anyone know as to what I may be missing?

Here is the css class code:

.TBox {
    color:#333333;
    font-size:11px;
    background: url("../../Images/box_bottom_right.gif") no-repeat bottom right;
    margin: 0;
    padding:0;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}

.TBox .header {
    margin: 0;
    padding: 0;
    background:url("../../Images/box_top_right.gif") no-repeat top right;  
    text-align: center;
}

.TBox .header h2 {
    color:#ffffff;
    background:url("../../Images/box_top_left.gif") no-repeat top left;
    font-size:14px;
    padding-top: 7px;
    height:20px;
    margin: 0;
}

.TBox .text {
    background:url("../../Images/box_bottom_left.gif") no-repeat bottom left;
    padding:10px 10px 15px 10px;    
    margin:0;
    height:auto;
    text-align:justify;
    color:#003399;
    line-height:15px;
}

And here is a portion of how I am using it, plus the stuff at the top of the file:

<div class="TBox" style="width: 90%; height: 100%; position:relative; right:-20px;">
                        <div class="header"> <h2>Terms:</h2> </div>
                        <asp:TextBox ID="txtTerms" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
                    </div>

Answer 1

I use it like this and it works in all browsers i tested

background: #fff url('../../images/bkgd_tile.gif') repeat-y 50% top;

Answer 2

Nothing wrong with the CSS itself, so you have a different problem. Maybe it's the images themselves? Can you view them directly in IE?

Maybe it's the relative paths not pointing in the right place. That's not specifically an IE difference, but if IE ended up at a slightly different URL due to routing, the ../.. stuff may end up pointing at the wrong level of folder. Rooted URLs are more reliable when you're using routing in ASP.NET (or elsewhere).

Answer 3

How did you create the images? If you used Photoshop, make sure you use the Save to Web... menu selection, NOT Save As...

If all else fails, use an absolute url. If that doesn't work, try the same browser on another computer.