1 reply [Last post]
cssauthor
Offline
newbie
Last seen: 9 years 35 weeks ago
Timezone: GMT-8
Joined: 2010-02-07
Posts: 1
Points: 2

Sad(

http://clients.eyenovation.com/calspeed/

Trying to figure out why the navigation has an unsightly gap on IE browsers. Can anyone lend a hand to someone in need? Thanks in advance.

josephbm91
josephbm91's picture
Offline
Regular
Texas
Last seen: 9 years 30 weeks ago
Texas
Timezone: GMT-5
Joined: 2010-02-07
Posts: 17
Points: 17

Doctype?

Hey!

You have almost NO shot at getting your page to render correctly in multiple browsers because you did not specify a DOCTYPE. (Learn Why DOCTYPES are Important)

In short, browsers will interpret your html and css in their own way unless you specify a doctype (and even then there are sometimes discrepancies.)

So all I did was replace your tag with an XHTML Transitional Doctype declaration, and everything looks fine.

<!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=UTF-8"> 
<title>CalSpeed Karting</title> 
<link rel="stylesheet" type="text/css" href="css/dropdown.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="css/nav.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="css/tables.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="css/text.css" media="screen" /> 
 
<script type="text/javascript"> 
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script> 
<script type="text/javascript" src="chromejs/chrome.js"></script> 
</head> 
<body> 
<!-- Main Box for Logo and Current Date --> 
<table width="880" border="0" align="center" cellpadding="0" cellspacing="0" class="logoanddate" summary="Logo Bar and Date"> 
  <tr> 
    <td align="left" valign="top"><table width="880" border="0" cellspacing="0" cellpadding="0"> 
      <tr> 
        <td width="400" height="70" align="left" valign="top"><img src="images/calspeed_karting_logo.jpg" width="400" height="70" alt="CalSpeed Karting Logo"></td> 
        <td align="right" valign="bottom" class="dateandtime">Today Is <script language="JavaScript" type="text/javascript"> 
  <!--
    var now = new Date();
    var days = new Array(
      'Sunday','Monday','Tuesday',
      'Wednesday','Thursday','Friday','Saturday');
    var months = new Array(
      'January','February','March','April','May',
      'June','July','August','September','October',
      'November','December');
    var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
    function fourdigits(number) {
      return (number < 1000) ? number + 1900 : number;}
    today = months[now.getMonth()] + " " +
       date + ", " +
       (fourdigits(now.getYear()));
     document.write(today);
  //-->
                  </script></td> 
      </tr> 
    </table></td> 
  </tr> 
</table> 
<!-- Main Navigation Menu -->                                                   
<table width="880" border="0" align="center" cellpadding="0" cellspacing="0" id="menu"> 
       <tr> 
          <td align="left" valign="top"><div class="chromestyle" id="chromemenu"> 
<ul> 
<li><a href="schools_overview.html" rel="dropmenu1">Karting Programs</a></li> 
<li><a href="programs_overview.html" rel="dropmenu2">Racing Programs</a></li> 
<li><a href="groupevents_overview.html" rel="dropmenu3">Group Events</a></li>	
<li><a href="owner_services.html" rel="dropmenu4">Owner Services</a></li>	
<li><a href="contact_us.html"> Contact Us</a></li>	
</ul> 
</div> 
 
<!-- Karting Programs -->                                                   
<div id="dropmenu1" class="dropmenudiv" style="width: 175px;"> 
<a href="schools_overview.html">Overview</a> 
<a href="intro.html">Intro to HP Karting</a> 
<a href="advanced_driving_tech.html">Advanced Driving Techniques</a> 
<a href="advanced_racing_tech.html">Advanced Racing Techniques</a> 
<a href="advanced_lapping.html">Advanced Lapping</a> 
</div> 
 
<!-- Racing Programs -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 140px;"> 
<a href="programs_overview.html">Overview</a> 
<a href="kart_rentals.html">Kart Rentals</a> 
<a href="sprint_racing.html">Sprint Racing</a> 
<a href="endurance_events.html">Endurance Events</a> 
<a href="pro_am.html">Pro Am Series</a> 
<a href="machismo500.html">Machismo 500</a> 
</div> 
 
<!-- Group Events -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 145px;"> 
<a href="groupevents_overview.html">Overview</a> 
<a href="private_parties.html">Private Parties</a> 
<a href="corporate_outings.html">Corporate Outings</a> 
<a href="custom_programs.html">Custom Programs</a> 
<a href="special_projects.html">Special Projects</a> 
</div> 
 
<!-- Owner Services -->                                                   
<div id="dropmenu4" class="dropmenudiv" style="width: 150px;"> 
<a href="ownerservices_overview.html">Overview</a> 
<a href="open_practice.html">Open Practice</a> 
<a href="pro_shop.html">Pro Shop</a> 
<a href="kart_storage.html">Kart Storage</a> 
<a href="clinics_seminars.html">Clinics and Seminars</a> 
 
</div> 
 
<script type="text/javascript">cssdropdown.startchrome("chromemenu")</script> 
 
</td> 
  </tr> 
</table> 
<table width="880" border="0" align="center" cellpadding="0" cellspacing="0" class="mainpicture"> 
  <tr> 
    <td>&nbsp;</td> 
  </tr> 
</table> 
</body> 
</html>