Topic: Styles being applied in Firefox but not IE 7
THIS PROBLEM HAS BEEN FIXED! THANKS! 
I have been playing with this for thousands of hours and I'm running out of time. I got the CSS from Wrox ASP.NET 2.0 Design by Jacob Sanford and using Visual Studio 2008. Out of desperation, I stripped the page and the CSS down to simple and straight forward stuff I can use in Dreamweaver CS3 without any of the ASP.NET form tags or hidden inputs or postback stuff.
In Firefox 3.0.5 everything works perfectly. In IE 7, the following divs work perfectly:
1) page
2) header
3) navigation
4) content
5) contentLeft
6) contentRight
The following is NOT getting a style applied in IE 7.
7) footer
8) .header class
The only difference I can see if that they are nested DIVs that are 3 layers deep, rather than just 2 as in the others. Page is the root.
As I said, I've tried everything. For some reason those 2 styles are just NOT being applied in IE 7 but work fine in Firefox.
/* CSS Document */
body {
background-color: #000000;
margin: 0% 0% 0% 0%;
padding: 1% 1% 1% 1%;
height: 98%;
text-align: center;
}
#page
{
width:800px;
margin:auto;
}
#header
{
background-position: center;
background-repeat:no-repeat;
background-image: url(../images/navi/AMBanner.jpg);
width: 800px;
height: 120px;
clear: both;
float: none;
}
#navigation
{
clear:both;
float:none;
position:static;
padding-right: 10px;
padding-left:0%;
font-weight:bold;
font-size:0.8em;
background-color:#000000;
padding-bottom: 0%;
margin:0%;
vertical-align:middle;
width:790px;
padding-top: 0.3em;
background-repeat:no-repeat;
font-family:Arial;
color:Red;
letter-spacing:0.04em;
height:26px;
text-align:right;
}
#content
{
float:left;
margin: 0px auto 0px auto;
width:800px;
background-color:#FFFFFF;
}
#contentLeft
{
clear:left;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
font-size:0.7em;
float:left;
vertical-align:top;
width:230px;
color:Red;
font-family:Arial;
position:static;
text-align:right;
background-color: #DEDEDE;
}
#contentRight
{
clear:right;
padding-left: 10px;
padding-right: 10px;
font-size:0.8em;
float:right;
padding-bottom:10px;
vertical-align:top;
width:530px;
color:Black;
padding-top:10px;
font-family:Arial;
position:static;
text-align:justify;'
overflow: auto;
background-color:#FFFFFF;
}
#footer
{
clear:both;
margin: 0px auto 0px auto;
float:none;
font-weight:bold;
font-size: 0.7em;
vertical-align:middle;
width:800px;
color: White;
background-color:#000000;
background-repeat:no-repeat;
font-family:Arial, Helvetica, sans-serif;
position:static;
height:56px;
text-align:center;
}
.header
{
font-size: 1.3em;
float:left;
width:100%;
color:#477897;
border-bottom: #477897 .13em solid;
font-family: 'Arial Black';
font-variant: small-caps;
}
#footer a:link {
color: #CCCCCC;
text-decoration: none;
}
#footer a:visited {
color: #AAAAAA;
text-decoration: none;
}
#footer a:hover {
color:#FF9900;
text-decoration: none;
}
And here's the HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Untitled Page
</title><link href="CSS/Test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="header"></div>
<div id="navigation">About | Reviews | Contact</div>
<div id="content">
<div id="contentLeft">
Content left<br/>
Content left<br/>
Content left<br/>
Content left<br/>
Content left<br/>
Content left<br/>
Content left<br/>
Content left<br/>
Content left<br/>
Content left<br/>
Content left<br/>
</div>
<div id="contentRight">Content Right
<p class="header">
Welcome to the Site</p>
<p>
</p>
</div>
</div>
<div id="footer">
Cell Phone: xxxx | <a href="mailto: rdbehrens@comcast.ner">E-Mail </a><br />
Site Design: <a href="xxxx" target="_blank">xxxx</a><br />
Copyright @2009<br />
<br />
</div>
</div>
</body>
</html>
Last edited by BookOfThoth (January 17, 2009 6:57 pm)
