'How to remove the extra white space that pre-made Dreamweaver JavaScript code creates in IE

I used Dreamweaver's pre-set JavaScript snippets to make some rollovers for a navigation bar @ http://www.skyboxlabs.com.

Its funny - the navigation bar looks great (no additional white space) in all browsers... except for Internet Explorer.

The JavaScript code seems to place extra white space in IE. I tried disabling the JavaScript and the problem goes away, so I know it has something to do with the preset Dreamweaver code.

I used the site below to check it out in different browsers.. very helpful. You can see how the IE9 version renders white space below the TD elements that contain JavaScript.

http://netrenderer.com/index.php

Obvious appreciate any tips on how I might remove that extra white space in IE9 - this might help explain problems with Dreamweaver JavaScript and how it impacts layout.

Below is the code for the 1) Navigation Bar table in HTML, 2) External JavaScript file and 3) CSS

The navigation bar in question is below the main header image and has the four buttons - 'about', 'jobs', 'leadership' and 'location'.

// HTML Document

</head>

<!-- HEADER IMAGE AND NAVIGATION BAR -->
<body onload="MM_preloadImages('images/nav_mouseover_LEADERSHIP.gif','images/nav_mouseover_JOBS.gif','images/nav_mouseover_LOCATION.gif')">
<div id = "bgtop">
<table width="960" border="0" align="center">
        <tr>
            <td><img src="images/header_ABOUT.jpg" width="960" height="240" alt="about" /></td>
        </tr>
        </table>
        </div>
        
         <div id = "greyBackground">  
  <table class = "buttons" width="960" border="0" align="center">          
        <tr>
        <td width = 160 >
        
          </td>
        
          <td width = 80><img src="images/nav_selected_ABOUT.gif" width="80" height="25" alt="about" /></td>
              <td width = 160>
          <a href="leadership.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('leadership','','images/nav_mouseover_LEADERSHIP.gif',1)"><img src="images/nav_static_LEADERSHIP.gif" alt="leadership" name="leadership" width="160" height="25" border="0" id="leadership" /></a></td>
                <td width = 80>
                <a href="jobs.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Jobs','','images/nav_mouseover_JOBS.gif',1)"><img src="images/nav_static_JOBS.gif" alt="Jobs" name="Jobs" width="80" height="25" border="0" id="Jobs" /></a></td>
                <td width = 80>
                <img src="images/nav_static_JOBS_bumper_right.gif" width="160" height="25" /></td>
            
                <td width = 160>
            <a href="location.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('location','','images/nav_mouseover_LOCATION.gif',1)"><img src="images/nav_static_LOCATION.gif" alt="location" name="location" width="160" height="25" border="0" id="location" /></a></td>
            <td>
            <img src="images/nav_static_LOCATION_bumper_right.gif" width="160" height="25" /></td>
        </tr>
    </table>

// JavaScript Document

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];
    }
}

// CSS Document

body {
    margin: 0px;
}

html, table, tr, td
 {
    padding: 0;
    border: 0;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    vertical-align: baseline;
    margin-top: 0px;    
}

footer, header, hgroup, menu, nav, section 
{
    display: block;
}

ol, ul {
    list-style: disc;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    background-color: #fff;
}
#footer
{
    color:#9D0000;
}
#footerTitle
{
    color: #9D0000 ;
    font-weight: bold;
}

.buttons 
{
 padding: 0; border-collapse: collapse; border: 0;
}
.buttons img {
    display: block;
}
.title
{
font-weight:bold;
}

/* BACKGROUNDS */

#bgtop{
    background-image: url(images/gridBackground.gif);
}

#greyBackground{
background-image: url(images/greyBackground.gif);
background-repeat:repeat-y;     
/*  background-color: bfbfbf; */
}
#foot
{
background-image: url(images/footerGradient.gif);   
}

.img{  
display:block;  
}

Solution 1:^[1]

Internet Explorer might be adding some margins automatically because your markup is not valid. Fix the issues listed in the link and see if IE behaves better. If not, then think about explicitly declaring zero margins and padding for table cell elements and the img tags.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	JCL1178

'How to remove the extra white space that pre-made Dreamweaver JavaScript code creates in IE

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]