Ok so my page looks fine in Internet Explore but in Firefox it looks horrible. I want my page to work fine in both browsers. I have tried validators and everything, I can't figure out what is wrong. Your help would be greatly appreciated guys.
Ok so heres the pages html.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Computer Maintance</title>
<link href="cm1.css" rel="stylesheet" type="text/css" />
<link href="nav/mainnav.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="nav/mainnav.css" />
<script type="text/javascript" src="nav/javascript/dropdown.js">
</script>
</head>
<body>
<noscript>To display this page correctly, javascript must be enabled in your browser.</noscript>
<img src="cmbanner.jpg" class="topbanner" alt="Banner" />
<div class="chromestyle" id="chromemenu" style="padding-bottom: 10px;">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Computer/Hardware</a></li>
<li><a href="#" rel="dropmenu2">Internet</a></li>
<li><a href="#" rel="dropmenu3">Software</a></li>
<li><a href="#" rel="dropmenu4">Sources</a></li>
<li><a href="#" rel="dropmenu5">About</a></li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Increase Computer Speed</a>
<a href="http://www.cssdrive.com">Replacing Ram</a>
<a href="http://www.javascriptkit.com">Replacing Harddrive</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>
<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">Browsers</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>
<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a>
</div>
<!--4rd drop down menu -->
<div id="dropmenu4" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Images</a>
<a href="http://www.yahoo.com">Information</a>
<a href="http://www.msn.com">Content</a>
</div>
<!--5rd drop down menu -->
<div id="dropmenu5" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Test</a>
<a href="http://www.yahoo.com">Test</a>
<a href="http://www.msn.com">Test</a>
</div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
<table border="0" cellspacing="0" class="wlctbl" align="center" width="700" >
<tr>
<td width="100%" bgcolor="#999999" class="wlc" style="background:url('images/bghead.gif');">Welcome to Synthetic Drive!</td>
<td bgcolor="#999999" class="topbutton" style="float: right; background:url('images/bghead.gif'); border-left: 1px solid #000; border-bottom: 1px solid
#000;"><a href="#top">^</a></td>
</tr>
<tr>
<td>Welcome to Synthetic Drive! Synthetic drive is a website that teaches computer maintence broken down into four different categories:
<ul>
<li>Hardware</li>
<li>Computer</li>
<li>Internet</li>
<li>Software</li>
</ul>
Not only does Synthetic Drive teach those categories it also has interactivity to keep your brain pumping!
</td>
</tr>
</table>
<br />
<table border="0" cellspacing="0" cellpadding="0" class="wlctbl" align="center" width="700" >
<tr>
<td width="100%" bgcolor="#999999" class="wlc" style="background:url('images/bghead.gif');">Member Preferences</td>
<td bgcolor="#999999" class="topbutton" style="float: right; background:url('images/bghead.gif'); border-left: 1px solid #000; border-bottom: 1px solid
#000;"><a href="#top">^</a></td>
</tr>
</table>
<br />
</body>
</html>
Here is the pages css for the navigation.
Code:
.chromestyle{
font-weight: bold;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url('chromebg.gif') center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}
.chromestyle ul li a:hover{
background: url('chromebg-over.gif') center center repeat-x; /*THEME CHANGE HERE*/
color: #000;
}
.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url('downimage.gif'); /*uncomment this line to use an image instead*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position: absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: #FFF;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: #000;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
and here is the css for just the page
Code:
body {
margin : auto;
background-color : #f4f1f1;
font-family : Times New Roman, Verdana, Arial, Sans-Serif;
border-bottom : 1px solid #000000;
}
.topbanner {
display : block;
float : left;
}
.wlctbl {
border-right : 1px solid #000;
border-left : 1px solid #000;
border-top : 1px solid #000;
border-bottom : 1px solid #000;
}
.wlc {
font-size : 16px;
font-weight : bold;
border-bottom : 1px solid #000;
color : #000;
}
.topbutton a {
color : #000;
text-decoration : none;
}
.topbutton a:visited {
color : #000;
text-decoration : none;
}
.topbutton a:hover {
color : #000;
text-decoration : none;
}
.topbutton a:active {
color : #000;
text-decoration : none;
}
Please help me get this fixed. Thanks!
iEntry 10th Anniversary
Announcements
Contact
