I am having a problem with the CSS Box Model.
I am trying to place the navigation within the box with the div with the yellow background. The code works fine in IE, but not in Firefox. The navigation falls outside of the box with the yellow background.
You can see the example at www.blackcanyonsystems.com/temp.
Here is the code:
index.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" lang="en" xml:lang="en">
<head>
<title>Test</title>
<link rel="StyleSheet" href="main.css" type="text/css" media="screen"/>
</head>
<body>
<div id="wrapper">
<div id="masthead">
<p>Masthead<br /><br /><br /><br /></p>
<div>
<p>Banner<br /><br /><br /><br /></p>
</div>
<div id="images">
<p>Images<br /><br /><br /></p>
</div>
<div id="nav2" >
<ul>
<li><a href="marine/marine.html">MARINE ORGANISM<br /> CONTROL</a></li>
<li><a href="potable/potable.html">POTABLE WATER<br /> CHLORINATION</a></li>
<li><a href="waste/waste.html">WASTE WATER<br /> DISINFECTION</a></li>
<li><a href="odor/odor.html"> ODOR<br />CONTROL</a></li>
</ul>
</div>
</div>
</body>
</html>
main.css:
/* NEW CSS SHEET */
* {
border: 0;
margin: 0;
padding: 0;
}
body {
background:url('images/blue_rows.gif') repeat-x;
}
div#wrapper {
width: 1010px;
}
div#masthead {
width: 1010px;
background-color: #FFFF00;
}
div#images {
width: 1010px;
}
div#nav1 ul {
font-family: Arial;
font-size: 13px;
display: inline;
list-style-type: none;
}
div#nav1 li {
font-family: Arial;
background-color: #FF0066;
font-size: 13px;
display: inline;
list-style-type: none;
}
div#nav1 a:link {
float : left;
font-family: Arial;
line-height : 14px;
font-weight : bold;
color: white;
margin : 0px 15px 10px 60px;
text-decoration : none;
}
div#nav1 a:visited {
float : left;
line-height : 14px;
font-weight : bold;
color: white;
margin : 0px 15px 10px 60px;
text-decoration : none;
}
div#nav1 a:hover {
float : left;
font-family: Arial;
line-height : 14px;
font-weight : bold;
border-bottom: 1px solid blue;
margin : 0px 15px 0px 60px;
}
div#content{
font-family: Verdana;
font-size: 11px;
width: 852px;
margin: 0;
padding: 50px 20px 0 20px;
float: none;
}
div#nav2 ul {
font-family: Arial;
background-color: #0000FF;
font-size: 13px;
display: inline;
list-style-type: none;
}
div#nav2 li {
font-family: Arial;
background-color: #0000FF;
background-color: #FF0066;
font-size: 13px;
display: inline;
list-style-type: none;
}
div#nav2 a:link {
float : left;
background-color: #0000FF;
font-family: Arial;
line-height : 14px;
font-weight : bold;
color: white;
margin : 5px 70px 10px 50px;
text-decoration : none;
}
div#nav2 a:visited {
float : left;
line-height : 14px;
font-weight : bold;
color: white;
margin : 5px 70px 10px 50px;
text-decoration : none;
}
div#nav2 a:hover {
float : left;
font-family: Arial;
line-height : 14px;
font-weight : bold;
border-bottom: 1px solid blue;
margin : 5px 70px 0px 50px;
}
I realize this is not the best code, but for the example I tried to show just the code that demonstrates the problem.
Does anyone know where my mistake is, or know of a fix that will make the code work for both IE and Firefox?
Sincerely,
Lawrence
Originally Posted by Kravvitz
Bookmarks