I have a page that is displaying properly in IE 7 but not in Firefox 2.0.7
Can anyone look at the CSS and see what I'm doing wrong. I'm on day 3 and still no breakthrough. ARGGH'
My HTML is calling a navigation menu designed with Open Cube Infinite Menus and Firefox is also not rendering the menu properly.
I've inncluded the CSS, HTML and 2 screenshots (IE and Firefox to see what's going worng.)
Thanks in advance!!
HTML CODE
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome to the Connecticut Society of the American Institute of Building Design</title>
<link href="css/master.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style4 {
font-size: 14px;
color: #666666;
}
.style6 {font-size: 12px}
-->
</style>
</head>
<body>
<div id="container">
<div id="logo_header"><img src="http://www.webmaster-talk.com/images/AIBD_logo_header.jpg" alt="AIBD logo" />
</div>
<div id="top_nav">
<div align="right">
<h1><a href="index.htm" class="top_nav">HOME</a> | <a href="contact.htm" class="top_nav">CONTACT US</a> </h1>
</div>
</div>
<div id="main_content">
<img src="http://www.webmaster-talk.com/images/welcome_group_TEMP.jpg" alt="group of business people" width="450" height="306" />
<table summary="this table is floated left beneath the image" width="38%" border="0" align="left" cellpadding="0" cellspacing="0" class="welcome_left">
<tr>
<td height="111" align="left" valign="top"><h6>WELCOME<br />
<span class="style4">TO AIBDCT.ORG</span></h6> <p> </p></td>
</tr>
</table>
<table summary="this table floats right beneath the image" width="258" border="0" cellspacing="0" cellpadding="0" class="welcome_right">
<tr>
<td width="249"><p>When a new home or addition is in your future, a specialist in residential design is the best choice to guide you through the design/building experience. It makes sense to secure design services from a qualified, experienced source - a member of the American Institute of Building Design.</p></td>
</tr>
</table>
<br />
<br />
</div>
<div id="nav_main">
<!--|**START IMENUS**|imenus0,include--><div id="dreamweaver_design_view_show" style="display:none;width:195px;height:303px;">Inf inite Menus Place Holder (Dreamweaver Design View)</div><div id="dreamweaver_design_view_hide">
<?php include("includes/imenus0.inc"); ?>
</div><!--|**END IMENUS**|-->
</div>
<div id="address"><h1>25 Meadow Rd.<br />
Windsor, CT 06095<br />
860-724-5522<br />
contact@aibdct.org</h1>
</div>
</div>
<!---------------- copyright Information ------------------------->
<div id="footer">
<table width="700" border="0" align="right" cellpadding="0">
<tr>
<td><h1 align="right">COPYRIGHT © 2007. CONNECTICUT SOCIETY OF THE AMERICAN INSTITUTE OF BUILDING DESIGNERS. ALL RIGHTS RESERVED<br />
<a href="terms.htm" class="footer">TERMS & CONDITIONS</a> | <a href="privacy.htm" class="footer">PRIVACY POLICY</a></h1></td>
</tr>
</table>
</div>
</body>
</html>
CSS CODE:
body {
font-family:garamond;
margin-left:auto;
margin-right:auto;
background-color:#336699;
font-size:14px;
color:#000000;
}
a:link {
color:#000000;
text-decoration:none;
}
a:hover {
color:#000000;
text-decoration:underline;
}
a:visited {
color:#666666;
text-decoration:none;
}
h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
}
h2 {
font-family:garamond;
font-size:12px;
color:#FFFFFF;
letter-spacing:1.5px;
}
h3 {
font-family:garamond;
font-size:16px;
color:#FFFFFF;
}
h4 {
font-family:garamond;
font-size:18px;
color:#000000
}
h5 {
font-family:garamond;
font-size:22px;
color:#000000;
}
h6 {
font-family:garamond;
font-size:24px;
color:#000000;
letter-spacing:2px;
}
#container {
margin-top:100px;
margin-left:auto;
margin-right:auto;
border:solid 1px #FFFFFF;
width:800px;
background-image:url(../images/container_bkgd.gif);
}
#logo_header {
width:350px;
position:relative;
top:-37px;
left:50px;
}
#top_nav {
margin-right:15px;
margin-left:615px;
}
a.top_nav {
color:#FFFFFF;
}
a:hover.top_nav {
color:#FFFFFF;
text-decoration:underline;
}
a:active.top_nav {
color:#FFFFFF;
text-decoration:underline;
}
#nav_main {
float:right;
margin-left:152px;
margin-bottom:0px;
}
#address {
float:left;
width:125px;
margin-top:60px;
margin-left:40px;
}
#main_content {
float:right;
margin-right:2px;
margin-bottom:2px;
width:450px;
background-color:#FFFFFF;
}
.welcome_left {
margin-top:15px;
margin-left:10px;
margin-bottom:10px;
padding-left:10px;
border-right-width:3px;
border-right-color:#FFCC66;
border-right-style:solid;
}
.welcome_right {
margin-top:15px;
margin-right:10px;
margin-left:10px;
padding-left:15px;
padding-top:1px;
}
#footer {
margin-top:5px;
margin-left:auto;
margin-right:auto;
width:800px;
}
a.footer {
color:#FFFFFF;
}
a:hover.footer {
color:#FFFFFF;
text-decoration:underline;
}
