CSS works in IE7 but not in Firefox

[Costanza]

OK I need some help here, My css works on every page in both Firefox and IE until today,I and a new page and the css works in IE7 and not in Firefox but only on this one specific page. It is puzzling me, Any help would be most appreciated. The page is http://example.com/Western%20Absolutism.html

[edited by: SuzyUK at 7:58 am (utc) on Feb. 12, 2007]
[edit reason] examplified URL (see TOS#13) [/edit]

[rgoodwin13]

I am having the same problem. Open ooops in
Firefox and IE. Last week both browsers displayed the logo and image as a background gif. This week, only IE displays the background gif.

Any answers for 'how to' display in both browsers is appreciated.

[edited by: SuzyUK at 7:56 am (utc) on Feb. 12, 2007]
[edit reason] Please no site specifics for review [/edit]

[Robin_reala]

Welcome to WebmasterWorld Costanza!

I’m afraid we don’t do site reviews here as per TOS #13 [webmasterworld.com] but if you can narrow your problem down to some specific CSS and/or HTML we’ll be more than happy to help.

[rgoodwin13]

Sorry. The issue is to get the background to display in Firefox as it does in IE6.

My index page style is:

<style type="text/css" title="currentStyle" media="screen">

@import url(cssindex1.txt);

</style>

</head>

The style sheet cssundex1.txt reads:

<style>

frame {
width:700px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
}
#banner {
position: absolute;
top: 5px;
left: 75px;
width: 778px;
height: 110px;
}
#contenttop {
position: absolute;
width: 800px;
height: 1300px;
top:125px;
padding:5px;
float:left;
font-family: Trebuchet, Tahoma, Verdana, arial;
font-size: 15px;
margin: 2px;
background-image: url('cellnoblue1.jpg');
background-repeat: no-repeat;
background-position: left top;
}

#box {
position: absolute;
top: 20px;
left: 475px;
width: 325px;
height:45px;
font-family: Trebuchet, Tahoma, Verdana, arial;
font-size: 15px;
}
#menu {
position: absolute;
top: 55px;
left: 14px;
height: 30px;
width: 475px;
padding: 3px;
font-family: Trebuchet MS, Tahoma, Verdana, arial;
font-size: 12px;
background-image: no-background;
}
#productstable {
position: absolute;
top: 236px;
width:283px;
height:924px;
padding:0px;
float:left;
margin: 2px;
text-align: top;
left: 515px;
}
#bottom {
position: absolute;
top: 1055px;
left: 30px;
height: 188px;
padding: 3px;
width: 484px;
}
#text_content {
position: absolute;
top: 267px;
left: 141px;
width: 360px;
height: 600px;
padding: 2px;
margin: 2px;
text-align: top;
}
#info_content {
position: absolute;
top: 250px;
left: 10px;
width: 810px;
padding: 2px;
margin: 2px;
}
body {
font-family: Trebuchet MS, Tahoma, Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
}
a:link {
font-family: Trebuchet MS, Tahoma, Verdana, Arial;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #003366;
}
a:active {
font-family: Trebuchet MS, Tahoma, Verdana, Arial;
font-weight: bold;
font-size: 14px;
color: #666666;
}
a:visited {
font-family: Trebuchet MS, Tahoma, Verdana, Arial;
font-weight: bold;
font-size: 14px;
text-decoration: none;
color: #666666;
}
a:hover {
font-family: Trebuchet MS, Tahoma, Verdana, Arial;
font-weight: bold;
font-size: 14px;
text-decoration: underline;
color: #FFFF00;
background-color: #003366;
}

td {
font-family: Trebuchet MS, Tahoma, Verdana, Arial;
font-size: 11px;
}

th {
font-family: Trebuchet MS, Tahoma, Verdana, Arial;
font-size: 11px;
}

.footer {
font-family: Trebuchet MS, Tahoma, Verdana, Arial;
font-size: 9px;
color: #000000;
}
</style>

I have tried changing cssindex1.txt to cssindex1.css with identical results. Something if Firefox seems to want to block backgrounds.

[SuzyUK]

Costanza, Welcome to WebmasterWorld!

as Robin says URL's are not allowed for review, however I've examplified your one just incase the URL is a cause. I ran a quick local test using with a <base href.. page worked fine CSS was read. Also on checking the CSS of your page via FF Web Dev Toolbar - the CSS was there.

anyway your first step should be to validate the HTML markup [validator.w3.org]

rgoodwin13 that would go for you too and also you should validate your CSS [jigsaw.w3.org], there shouldn't be any <style> elements in your stylesheet, on checking your page, the logo etc. was there so perhaps you got it fixed already?

Suzy

[rgoodwin13]

After several hours of reading other posts regarding IE and Firefox handling of CSS, I find the problem is that my host provider sends a CSS file as text/plain instead of text/css. Thus, I cannot validate the CSS file; it returns I/O Error: Unknown mime type : text/plain

IE ignores improper mime types and just goes ahead and executes my CSS. Firefox is strict and will not execute an incorrect mime type.

I spoke with Earthlink for some considerable time and basically came away with the conclusion they do not support CSS files with the proper mime type.

95% of my traffic uses IE, and see my site as I want it to look; but for the wrong reason.

I think I have yet another reason to change my host provider.