css background image not showing in IE

**rumblepup** · Jul 28, 2006 16:24

Hello. Long time lurker here finally posting my first post.

I'm having a problem that I've never experience before. All of the sudden, My IE will not display my background images from my css. Everything works find in Firefox, but the only thing bieng rendered from my css are my text rules.

Here's my css. It's a little ugly right now, but I'm still developing. I've never had this happen to me. When I grab an old project, and view an html file in IE, with linked css, NO problem. I'm not even running it from my inetpub>wwwroot folder or from my http://localhost/ directive.

/* Default CSS Stylesheet for a new Web Application project BACKGROUND: url("images/layout/main_bg.jpg")White repeat-x center top;*/

BODY
{
BACKGROUND: url(images/layout/main_bg.jpg)White repeat-x center top;
FONT-FAMILY: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 11px;
MARGIN-LEFT: 0PX;
MARGIN-RIGHT: 0PX;
MARGIN-TOP: 0PX;
MARGIN-BOTTOM: 0PX;
PADDING-LEFT: 0PX;
PADDING-RIGHT: 0PX;
PADDING-TOP: 0PX;
PADDING-BOTTOM: 0PX;
}
a:link {
color: #000000;
}
a:visited {
color: #600000;
}
a:hover {
color: #ffffff;
background-color: #333333;
text-decoration: none;
}
a:active {
color: #222556;
}

H1, H2, H3, H4, H5, TH, THEAD, TFOOT
{
COLOR: #003366;
}
H1 {
font-family: Trebuchet MS, Verdana, Arial, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}

H2 {
font-family: Trebuchet MS, Verdana, Arial, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}

.tdHeader {
background: url(images/layout/gomovo_header.jpg)no-repeat left top;
height: 260px;
PADDING-LEFT: 10PX;
PADDING-TOP: 10PX;
}

.tdHeaderNav {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;

}

.tdFooter {
background: url(images/layout/footer_bg.gif)repeat-x center top;
height: 50px;
FONT-FAMILY: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px;
COLOR: #FFFFFF;
PADDING-TOP: 10PX;
PADDING-LEFT: 10PX;
}

.footerText {
FONT-FAMILY: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
FONT-SIZE: 10px;
MARGIN-TOP: 0PX;
MARGIN-BOTTOM: 0PX;
}

***********
MY HTML
***********
<HTML>
<HEAD>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>mysite</title>
<meta name="description" content="TODO: TEXT">
<meta name="keywords" content="keywords">
<meta name="robots" content="index, follow">
<meta revised="date">
<meta author="mysite">
<link rel="stylesheet" type="text/css" href="Styles.css">
</HEAD>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table1">
<tr>
<td valign="top" class="tdHeader"> </td>
</tr>
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="800" id="table2">
<tr>
<td width="180"> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" class="tdFooter"> </td>
</tr>
</table>
</body>
</HTML>

Again,

This works FINE in Firefox, where I usually have the worst problems, because I'm not the best css'r out there, but now I've got it perfect in Firefox, and IE, which usually is the easiest thing to code for, doesn't render the background images.

Any help?

**rumblepup** · Jul 28, 2006 17:33

WOW. Works like a charm. But wait, how come FireFox was more forgiving than IE? I thought it was the other way around.

a space. JEEZ a space.

Been knocking my head on this for three days.

User Tag List

Thread: css background image not showing in IE

Thread Tools

Display

css background image not showing in IE

Bookmarks

Bookmarks

Posting Permissions