space between header and spry nav bar in E7

Question

faucher24 0 Newbie Poster

18 Years Ago

I'm working on making a new website for my company... In Firefox And Safari everything looks the way I want... but in Internet Explorer 7 there is a small space between the header and the Spry navbar? I can't seem to get rid of it...
Can anyone help!...

Thanks,

Attach 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=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<link href="../css/test.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #009966;
}
a:hover {
    text-decoration: none;
    color: #009966;
}
a:active {
    text-decoration: none;
    color: #009966;
}td img {display: block;}
-->
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<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];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('../images/homepage/header_r2_c2_f2.jpg')">
<table width="775" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><table border="0" cellpadding="0" cellspacing="0" width="775">
      <!-- fwtable fwsrc="header.png" fwpage="Page 1" fwbase="header.jpg" fwstyle="Dreamweaver" fwdocid = "434040310" fwnested="0" -->
      <tr>
        <td><img src="../images/homepage/spacer.gif" width="18" height="1" border="0" alt="" /></td>
        <td><img src="../images/homepage/spacer.gif" width="251" height="1" border="0" alt="" /></td>
        <td><img src="../images/homepage/spacer.gif" width="506" height="1" border="0" alt="" /></td>
        <td><img src="../images/homepage/spacer.gif" width="1" height="1" border="0" alt="" /></td>
      </tr>
      <tr>
        <td colspan="3"><img name="header_r1_c1" src="../images/homepage/header_r1_c1.jpg" width="775" height="18" border="0" id="header_r1_c1" alt="" /></td>
        <td><img src="../images/homepage/spacer.gif" width="1" height="18" border="0" alt="" /></td>
      </tr>
      <tr>
        <td rowspan="2"><img name="header_r2_c1" src="../images/homepage/header_r2_c1.jpg" width="18" height="92" border="0" id="header_r2_c1" alt="" /></td>
        <td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('header_r2_c2','','../images/homepage/header_r2_c2_f2.jpg',1);"><img name="header_r2_c2" src="../images/homepage/header_r2_c2.jpg" width="251" height="76" border="0" id="header_r2_c2" alt="" /></a></td>
        <td rowspan="2"><img name="header_r2_c3" src="../images/homepage/header_r2_c3.jpg" width="506" height="92" border="0" id="header_r2_c3" alt="" /></td>
        <td><img src="../images/homepage/spacer.gif" width="1" height="76" border="0" alt="" /></td>
      </tr>
      <tr>
        <td><img name="header_r3_c2" src="../images/homepage/header_r3_c2.jpg" width="251" height="16" border="0" id="header_r3_c2" alt="" /></td>
        <td><img src="../images/homepage/spacer.gif" width="1" height="16" border="0" alt="" /></td>
      </tr>
    </table>
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="../pages/page1.html">Item 1</a>
            <ul>
              <li><a href="#">Item 1.1</a></li>
              <li><a href="#">Item 1.2</a></li>
              <li><a href="#">Item 1.3</a></li>
            </ul>
        </li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
            <ul>
              <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
                  <ul>
                    <li><a href="#">Item 3.1.1</a></li>
                    <li><a href="#">Item 3.1.2</a></li>
                  </ul>
              </li>
              <li><a href="#">Item 3.2</a></li>
              <li><a href="#">Item 3.3</a></li>
            </ul>
        </li>
        <li><a href="#">Item 4</a></li>
      </ul>
    </td>
  </tr>
  <tr>
    <td height="286" valign="top"><!-- TemplateBeginEditable name="EditRegion1" -->
      <table width="775" border="0" cellpadding="20" cellspacing="0" bgcolor="#FFFFFF">
        <tr>
          <td height="302" valign="top">&nbsp;</td>
        </tr>
      </table>
    <!-- TemplateEndEditable --></td>
  </tr>
  <tr>
    <td height="24" valign="bottom" class="copyright"><a href="#">Echolab Copyright © 2008</a></td>
  </tr>
</table>


<map name="Map" id="Map"><area shape="rect" coords="13,13,275,98" href="#" target="_parent" />
</map><script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

html-css user-interface web-design

Edited 13 Years Ago by TrustyTony because: fixed formatting

3 Contributors
2 Replies
93 Views
3 Days Discussion Span
Latest Post 18 Years Ago Latest Post by MidiMagic

Dani AI

Generated 10 Months Ago

reported a thin vertical gap between the table header and a Spry horizontal menu that shows only in IE7; noted it looked fine in IE6 and observed the demo link is no longer reachable, so the advice below is general but targeted to the common IE7 causes.

Common culprits are the browser's default (user‑agent) top margin on lists, the Spry stylesheet not being applied, or IE7's layout behavior. A quick visual diagnostic is to give the header container and the menu temporary contrasting backgrounds to see which element produces the gap, then inspect computed styles for any nonzero margin-top or unexpected line-height. Resetting the menu margins and forcing layout in IE7 often cures this without hacking the layout.

A minimal override that normally fixes the issue (place after the Spry CSS) is:

/* reset Spry menu defaults so the UL sits flush under the header */
#MenuBar1, #MenuBar1 ul { margin: 0; padding: 0; }

/* trigger layout in IE7 */
#MenuBar1 { zoom: 1; }

/* IE7-only tweak if needed */
<!--[if IE 7]>
<style>
  #MenuBar1 { margin-top: 0 !important; }
</style>
<![endif]-->

Avoid relying on negative top offsets as a permanent fix. Confirm the Spry stylesheet path is correct and that the page is rendering in standards mode (valid DOCTYPE). More on browser default styles and margins is documented at MDN: User agent stylesheets and the cascade and CSS margin.

All 2 Replies

HI2Japan 23 Junior Poster

18 Years Ago

Sorry, no help from me, but it works fine in IE6

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

MidiMagic 579 Nearly a Senior Poster · Answer 1 · 2008-01-26T10:38:30+00:00

MidiMagic 579 Nearly a Senior Poster

18 Years Ago

The link is broken.

space between header and spry nav bar in E7

Dani AI

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers