PDA

View Full Version : CSS Div not showing in FF, but does in IE



neash83
02 Dec 2010, 04:47 AM
Hello,

I have the below HTML code and CSS, the problem I'm having is with the div id = "nav". It is supposed to appear just under the header, a thin strip. In IE 8 it appears fine, however when I preview it in FF 3.6, the whole webpage renders fine except the nav bar, it just doesnt show up.


<!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>
<script type="text/javascript" src="rollver_btn.js">
</script>


<title>Home- Intranet</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="Header_Footer.css" />
<style type="text/css">
.style1 {
text-align: center;
}
.style2 {
text-align: left;
font-size: x-small;
}
</style>
</head>

<body>
<div id="outer"> <div id="left" style="left: 0px; top: 0px">

<a href="www.google.com" id="quality_btn" onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;"><img name="image2" alt="Quality" src="quality_btn.png" style="border-style: none"/></a>
<a href="www.google.com" id="operations_btn" onmouseover="image3.src=loadImage3.src;" onmouseout="image3.src=staticImage3.src;"><img name="image3" alt="Operations" src="operations_btn.png" style="border-style: none"/></a>
<a href="www.google.com" id="sales_btn" onmouseover="image4.src=loadImage4.src;" onmouseout="image4.src=staticImage4.src;"><img name="image4" alt="Sales" src="sales_btn.png" style="border-style: none"/></a>
<a href="www.google.com" id="finance_btn" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;"><img name="image1" alt="Finance" src="finance_btn.png" style="border-style: none"/></a>
</div>

<div id="centrecontent">
<div id="nav"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div id="clearfooter"></div> <!-- to clear footer -->
</div><!-- end outer div -->

<div id="footer">
<div class="style1">
<br/>Salem Tube &copy; 2010 <br/>
</div>
<p class="style2"><span style="padding-left:20px">Page Author: Sean Neasham&nbsp;&nbsp;&nbsp;&nbsp;
Last Update: 16-November-2010</span></p>
</div>

<div id="header">
<a href="www.google.com" id="home" onmouseover="image5.src=loadImage5.src;" onmouseout="image5.src=staticImage5.src;"><img name="image5" alt="Home" src="home_btn.png" style="border-style: none"/></a>
<a href="www.google.com" id="salem"> <img name="image6" alt="Salem Logo" src="salem_logo.png" style="border-style: none"/></a>

</div>




</body>
</html>



body {height:100%}
html {height:100%}
body {
padding:0;
margin:0;
background: url('left.jpg'); /*sets the left column colour*/
border-color:lime;
color: #000000;


}
#outer{
height:100%;
min-height:100%;
margin-left:200px;
background:white; /*sets the central page colour*/
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
color: #000000;



}

html>body

#outer{height:auto;}
/*for mozilla as IE treats height as min-height anyway*/
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
background-image: url('header.jpg'); /*sets the header colour*/
border-top:1px solid #000;
border-bottom:1px solid #000;
overflow:hidden;
color: #000000;

}

#nav{
left:0;
width:100%;
height:30px;
color: black;
border-color:black;
background-image:url('nav.jpg');
border:medium;
border-bottom-color:black;
border-bottom:10px;
position: relative;

}

#salem {
float: right; margin: 15px 15px 50px 50px;

width:160px;
height:45px;
background-repeat: no-repeat;

}

#home {
float: left; margin: 10px 25px 0px 75px;
width:50px;
height:50px;
background-repeat: no-repeat;

}

#quality_btn {
position: absolute;
width:180px;
height:35px;
margin-left:5px;
margin-top:10px;
}

#operations_btn {
position: absolute;
width:180px;
height:35px;
margin-left:5px;
margin-top:50px;
}

#sales_btn {
position: absolute;
width:180px;
height:35px;
margin-left:5px;
margin-top:90px;
}

#finance_btn {
position: absolute;
width:180px;
height:35px;
margin-left:5px;
margin-top:130px;
}


#left {
position:relative;/*ie needs this to show float */
width:200px;
float:left;
margin-left:-199px;/*must be 1px less than width otherwise won't push footer down */
padding-top:72px;/*needed to make room for header*/
}
#left p {
padding-left:3px;padding-right:2px}

.body {
font-family: Calibri;
color: black;
font-size:medium;
text-indent:10px;

}
#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background: url('footer.jpg');
background-color: #0A143A; /*sets the footer colour*/
color: #FFFFFF;
text-align:center;
position:relative;
font-family:Calibri;
font-size:x-small;

}
* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */

}
#clearheader{
height:72px;
z-index:-1;
}/*needed to make room for header*/

#clearfooter{
clear:both;
height:40px;
}/*needed to make room for footer*/

p {
margin-top:0
}
div {
margin-top:0
}/*clear top margin for mozilla*/

* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */

.floatright { float: right; margin: 15px 15px 65px 50px; }
.floatleft { float: left; margin: 15px 15px 15px 157px; }

Thanks
Sean