CSS Forum

**rmc14** · 03:53 AM

Got a small problem that I cant seem to get to the bottom of,
The website in question is a work in progress, and this little issue is stopping me progressing with the site.

Below the flash banner and above the menu bars is a 1px line in firefox, and slightly bigger in IE. But I cant for the life of me find any padding or spacing in the code that would effect it.

In DW it displays fine, but in a browser it doesnt

Help much appreciated.
Thanks.

This is now sorted, removed the links Thanks for the help

**wappoint** · 04-16-2009, 07:23 AM

Hmm, any reason why you are using divs and tables?

**rmc14** · 04-16-2009, 07:30 AM

No real reason, used to using the old fashioned tables to organise things

I could use div's for everything i guess, but not that clued on on css formatting etc!

Is it because the buttons are in a table?

**wappoint** · 08:33 AM

Stick either to tables or divs. Dont mix both.

Cut the table out and add it after the div. That should remove the white space. If you have troubles, pm me your email and ill send you the updated html

Edit. For some odd reason i cant post the code. It gets cut off half way.

**wappoint** · 08:43 AM

The html code is

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
 
 
 
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
 
 
 
 
  <title>FSH Maintenance LTD</title>
  <meta name="description" content="FSH Maintenance LTD are leading specialists in the areas of fire, flood and structural repairs" />
 
 
 
  <meta name="keywords" content="builders, property maintenance, fire damage, flood damage, joiners, plasterers, local builder, perils" />
 
 
 
  <meta name="author" content="FSH Maintenance LTD" />
 
 
 
  <meta name="copyright" content="copyright &copy; 2009 - FSH Maintenance Ltd" />
 
 
 
  <link href="assets/css/screen.css" rel="stylesheet" type="text/css" />
  <script src="script/AC_RunActiveContent.js" type="text/javascript"></script>
  <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" media="all" href="mlddmenu.css" />
 
    <script type="text/javascript" src="mlddmenu.js"></script>
  <script>// Copyright 2006-2007 javascript-array.com
 
var timeout    = 500;
var closetimer    = 0;
var ddmenuitem    = 0;
 
// open hidden layer
function mopen(id)
{    
    // cancel close timer
    mcancelclosetime();
 
    // close old layer
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 
    // get new layer and show it
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';
 
}
// close showed layer
function mclose()
{
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
 
// go close timer
function mclosetime()
{
    closetimer = window.setTimeout(mclose, timeout);
}
 
// cancel close timer
function mcancelclosetime()
{
    if(closetimer)
    {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}
 
// close layer when click-out
document.onclick = mclose; 
  </script>
</head>
 
 
<body style='margin-top:0px; '>
<div id="container"><!-- START OF CONTAINER 01 -->
<div id="mastheadflash">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','770','height','116','src','assets/fla/masthead','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','assets/fla/masthead' ); //end AC code
</script>
<noscript></noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="770" height="120" id="FlashID" title="FSH Banner">
  <param name="movie" value="assets/fla/bannerFSH.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="swfversion" value="9.0.45.0" />
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  <param name="expressinstall" value="Scripts/expressInstall.swf" />
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="assets/fla/bannerFSH.swf" width="770" height="120">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="9.0.45.0" />
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<table width="760" border="0" align="center" cellspacing='0' cellpadding='0' valign="top" >
 <th scope="col"><!-- HTML Menu Code -->
<ul class="mlddm" params="0,0,0,fade,80,h,1">
   <li><a href="index.html">Home</a>
   <li><a href="#">About FSH</a>
       <ul>
           <li><a href="history.html">History</a></li>
           <li><a href="accreditations.html">Accreditations</a></li>
           <li><a href="company.html">Our Values</a></li>
       </ul>
   </li>
   <li><a href="#">Company</a>
       <ul>
           <li><a href="management.html" class="hsub">Management</a>
               <ul>
                   <li><a href="smanagement.html">Senior Management</a></li>
                   <li><a href="bmanagement.html">Building Managers</a></li>
                   <li><a href="qc.html">Quality Control</a></li>
                 </ul>
               </li>
           <li><a href="coverage.html">Our Coverage</a></li>
           <li><a href="news.html">Lastest Events</a></li>
       </ul>
   </li>
   <li><a href="#">Services</a>
   <ul>
           <li><a href="insurance.html">Insurance Works</a></li>
           <li><a href="private.html">Private Works</a></li>
           </ul></li>
       <li><a href="#">Teams</a>
       <ul>
           <li><a href="#" class="hsub">Team Locations</a>
               <ul>
                   <li><a href="westyorkshire.html" class="hsub">West Yorkshire</a>
                       <ul>
                           <li><a href="teama.html">Team A</a></li>
                           <li><a href="teamb.html">Team B</a></li>
                           <li><a href="teamc.html">Team C</a></li>
                           <li><a href="teamd.html">Team D</a></li>
                       </ul>
                   </li>
 
                   <li><a href="eastyorkshire.html" class="hsub">East Yorkshire</a>
                       <ul>
 
                           <li><a href="teame.html">Team E</a></li>
                     </ul>
                   </li>
                   <li><a href="southyorkshire.html" class="hsub">South Yorkshire & Lincoln</a>
                       <ul>
 
                           <li><a href="teamf.html">Team F</a></li>
                     </ul>
                   </li>
                   <li><a href="tynewear.html" class="hsub">Tyne & Wear</a>
                       <ul>
 
                           <li><a href="teamg.html">Team G</a></li>
                     </ul>
                   </li>
                 </ul>
           </li>
           <li><a href="#" class="hsub">General</a>
               <ul>
                   <li><a href="surveyors.html">Surveyors</a></li>
                   <li><a href="officestaff.html">Office Staff</a></li>
               </ul>
 
           </li>
           <li><a href="#" class="hsub">Accounts</a>
               <ul>
                   <li><a href="accounts.html">Accounts Team</a></li>
                   <li><a href="creditcontrol.html">Credit Control</a></li>
                 </ul>
 
           </li>
       </ul>
   </li>
 
   <li><a href="#">Careers</a>
   <ul>
           <li><a href="vacancies.html">Current Vacancies</a></li>
           <li><a href="apprenticeships.html">Apprenticeships</a></li>
           </ul></li>
   <li><a href="#">Questions</a></li>
   <ul>
           <li><a href="faq.html">Frequently Asked Questions</a></li></ul>
   <li><a href="#">Contact Us</a>
   <ul>
   <li><a href="details.html">Details</a></li>
   <li><a href="complaints.html">Complaints</a></li>
   </ul></li>
 
   <li></li>
</ul>
<!-- /HTML Menu Code --></th>
 </tr>
</table>
</div>
ADD TABLE HERE
<!--  -->
<div id="rightcontent"></div>
<p>
  <!-- END OFF CALL2ACTION -->
  <!-- END OF MAIN CONTENT --><!-- START OF PICS LINKS -->
</p>
<table width="492" border="0" align="left">
  <tr>
 
  </tr>
 
</table>
<table width="770" border="0" cellspacing="0" cellpadding="0">
<tr></tr>
<tr>
  <td width="96">&nbsp;</td>
  <td width="571"><table cellspacing="0" cellpadding="0">
    <tr>
      <td></td>
      <td><h1>Welcome to FSH Maintenance Ltd</h1></td>
    </tr>
  </table></td>
  <td width="103">&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td><span style="text-align: justify; margin-left: 0pt; margin-right: 0pt; font-size: 12px; font-family: Verdana, Geneva, sans-serif;"><span style="color: rgb(47,80,185);">Specialising in the repair, rebuilding and refurbishment of domestic and commercial properties suffering from the effects of Fire and Flood, amongst other damage.</span><br />
    <br />
    Our customer focused personnel understand the distress and inconvenience that such dramatic events can cause.<br />
    <br />
    It is our aim to restore damaged premises as efficiently and unobtrusively as possible, whilst maintaining high quality and standards.<br />
    <br />
    <b>We offer a complete building service, directly employing teams of skilled and experience tradesmen including:<br />
      <br />
      -&nbsp; </b>Bricklayers<br />
    -&nbsp; Joiners<br />
    -&nbsp; Plumbers<br />
    -&nbsp; Plasterers<br />
    -&nbsp; Decorators<br />
    -&nbsp; Electricians<br />
    <br />
    We offer a high quality, one-stop service.  Whilst our clients are the Insurance Companies and Loss Adjusters, it remains our responsibility to ensure that the policyholders are completely satisfied.<br />
    <br />
    With our highly trained customer service team on hand from start until completion, we aim to ensure that the highest quality is maintained through both our customer service and workmanship.</span></td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td><table width="500" border="0" align="center">
    <tr>
      <th scope="col"><img src="assets/new_images/niceic-logo.gif" width="100" height="46" alt="niceic" /></th>
      <th scope="col"><img src="assets/new_images/foundation_logo.gif" width="53" height="80" alt="federation" /></th>
      <th scope="col"><img src="assets/new_images/bdma.gif" alt="bdma" width="150" height="46" /></th>
      <th scope="col"><img src="assets/new_images/chas_logo.gif" width="81" height="43" alt="Chas" /></th>
      <th scope="col"><img src="assets/new_images/investors_logo.gif" width="70" height="56" alt="Investors" /></th>
      </tr>
    </table></td>
  <td>&nbsp;</td>
</tr>
</table>
<p>
  <!-- END OF PIC LINKS -->
  <!-- START OF FOOTER -->
</p>
<div id="siteInfo">
  <div class="siteinfo"><a href="index.html"><a href="#"></a>Home&nbsp;
 
    | &nbsp;Articles&nbsp;
    | &nbsp;&nbsp;Let Us
      Quote You&nbsp;
    | &nbsp;Links&nbsp;
    | &nbsp;Accessibility&nbsp;
    | &nbsp;Privacy&nbsp;
    | &nbsp;Sitemap <br />
 
 
  &copy; &nbsp;FSH Maintenance LTD</div>
 
 
</div>
 
 
<!-- END OF FOOTER --><!-- END OF CONTAINER 01 -->
</div>
 
 
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-4881264-1";
urchinTracker();
</script>
 
<script type="text/javascript">
<!--
//<![CDATA[
document.write('<scr'+'ipt type="text/javascript" src="/twatch/jslogger.php?ref='+( document["referrer"]==null?'':escape(document.referrer))+'&pg='+escape(window.location)+'"></scr'+'ipt>');
//]]>
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

**rmc14** · 04-16-2009, 08:35 AM

Il drop you a pm

**LadynRed** · 04-16-2009, 03:12 PM

Quote:

Stick either to tables or divs. Dont mix both.

Nonsense, nothing wrong with it, IF the tables are for DATA.

However, you're using tables for layout, which isn't necessary and should be avoided.

As usual, IE is the culprit. If you feed IE ONLY a -3px top margin on the navigation table, it will pull up and get rid of the space. You will need conditional comments and a separate CSS file containing ONLY those rules needed to make IE behave.

**jdchmiel** · 05-21-2009, 02:57 AM

Im not so sure just adding the negative margin to IE is a good idea.
In IE8 if you hit F12 you get the "firebug knockoff" that allows you to try and debug some css.. If you switch document mode from IE7 to IE8 back and forth you will notice the annoying space appear / disapear. Of course it works fine in FF3
I have run into a similar issue that was a major pain with images having whitespace under them in tables... especially as this seemed to crop up the most in html emails where client viewers (evil hotmail etc) removed all margin css code entirely. the only surefire fix was to rely on deprecated code like vspace="0", and align absbottom etc. I think I had to use that in conjunction with a display:block on the image in the cell, but it has been over a year and I cannot remember for sure the exact combo that managed to get around the missing margin contraint.

Anyways, long story short, I think it is only IE6 and IE7 that needs your fix code.. so make your conditional version specific as well.

**LadynRed** · 05-21-2009, 09:47 AM

Quote:

Im not so sure just adding the negative margin to IE is a good idea.

As long as you use the RIGHT conditional comment to target ONLY IE6 and below, then IE 7 and 8 will not be affected.