neash83
02 Dec 2010, 05: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 />
</div>
<div id="clearfooter"></div> <!-- to clear footer -->
</div><!-- end outer div -->
<div id="footer">
<div class="style1">
<br/>Salem Tube © 2010 <br/>
</div>
<p class="style2"><span style="padding-left:20px">Page Author: Sean Neasham
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
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 />
</div>
<div id="clearfooter"></div> <!-- to clear footer -->
</div><!-- end outer div -->
<div id="footer">
<div class="style1">
<br/>Salem Tube © 2010 <br/>
</div>
<p class="style2"><span style="padding-left:20px">Page Author: Sean Neasham
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