IE 7 vs Firefox & extra space between divs

Kurt · #1 (**permalink**) Sep 20th, 2007, 00:39

Both IE7 and Firefox are showing some extra space between some divs (but not the same ones!) and doing some odd rendering.

This is the basic layout (I added a red border around the divs so you can see them).

In IE 7 (but not Firefox), there’s a small gap between the #header and #navigation divs:

I can get rid of this by declaring a -4px margin-top to the #navigation, as in:

Code: Select all

#navigation {              
background-image: url(images/global/index_03.gif);
background-repeat: no-repeat;
height: 25px;
width: 800px;
margin-top: -4px;
{

Is that the best way to fix this?

Also, Firefox renders lots of problems:

Any idea what I should look for? I tried declaring all image and div borders 0px but that had no effect.

Thanks for any help.

The HTML:

HTML: Select all

<body>
<div id="wrapper">
 
    <div id="header">
            <img src="http://www.webforumz.com/images/global/index_01.gif" alt="OMC logo" width="487" height="138" /><img src="http://www.webforumz.com/images/global/index_02.jpg" alt="OMC logo2" width="313" height="138" />     
    </div>
 
    <div id="navigation">                    
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="images.html">Images</a></li>
            <li><a href="multimedia.html">Multimedia</a></li>
            <li><a href="thearts.html">The Arts</a></li>    
            <li><a href="forum.html">Forum</a></li>
            <li><a href="viewermail.html">Viewer Mail</a></li>
            <li class="last"><a href="contact.html">Contact</a></li>
            </ul>       
    </div>  
 
    <div id="content">
        <img src="http://www.webforumz.com/images/global/tabletop.gif">
        <p>This is the main content area.</p>
        <p>This is the main content area.</p>
        <p>This is the main content area.</p>
        <p>This is the main content area.</p>
        <p>This is the main content area.</p>
        <p>This is the main content area.</p>
        <p>This is the main content area.</p>
        <p>This is the main content area.</p>         
    </div>
 
    <div id="footer">
            <p>This is the footer area.</p>
    </div>  
 
</div>
<br /><div style="z-index:3" class="smallfont" align="center"><!-- google_ad_section_start(weight=ignore) -->LinkBacks Enabled by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.0.1<!-- google_ad_section_end --></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-64063-1";
urchinTracker();
</script>
<br /><div style="z-index:3" class="smallfont" align="center"><!-- google_ad_section_start(weight=ignore) -->LinkBacks Enabled by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.0.1<!-- google_ad_section_end --></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-64063-1";
urchinTracker();
</script>
</body>

The CSS:

Code: Select all

 
body {
    background-color: #000000;
    text-align: center;                                     
}
 
p  {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    color: #FFFFFF;          
    padding-left: 73px; /* left aligns text within content area */
}
 
 
#wrapper {
    background-color:#000000; /* not needed due to color in body? */       
    margin-left: auto; 
    margin-right: auto; 
    width: 800px; 
    text-align: left;                           
}
 
#header {
    margin-bottom: 0px; 
}
 
#navigation {                      
    background-image: url(images/global/index_03.gif);
    background-repeat: no-repeat;
    height: 25px;
    width: 800px;
    margin-top: -4px; 
          /* In IE, gets rid of small space between header & */ 
          /* navigation div; Firefox still shows gaps *
}
 
#navigation ul {
   list-style: none;
   margin-top: 2px; 
         /* centers nav list vertically within background image; */
         /* still too high up in Firefox */
   margin-right: 48px; /* moves nav list in from the right-hand edge */
   padding: 0;
   float: right;  
}
 
#navigation ul li {
   margin-right: 0;
   padding: 0;
   display: inline;
}
 
#navigation ul li a { 
   text-transform: uppercase;
   padding: 0 10px;
   border-right: 1px solid #fff; 
   color: #fff;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   text-decoration: none;
   font-weight: bold;
}
 
#navigation ul li.last a {
   border-right: none;  
}
 
#content {
   background-image: url(images/global/tablemiddle.gif);
   background-repeat: repeat;
   width: 800px;  
   /* border: 0px; doesn't fix gaps in Firefox */
}
 
#footer {
  background-image: url(images/global/tablebottom.gif);
  background-repeat: no-repeat;
  width: 800px;
  height: 80px;
  /* border: 0px; doesn't fix gaps in Firefox */ 
}

[/font][/font]

Blake121 · #2 (**permalink**) Sep 20th, 2007, 10:24

Can we have a link to your site? That would help a lot.

Also you might want to look out for validation. It might just be invalid HTML that's messing it up.

Kurt · #3 (**permalink**) Sep 20th, 2007, 17:30

Quote:

Originally Posted by Blake121

Can we have a link to your site? That would help a lot.

I'm working with it on my own computer; I haven't uploaded it anywhere yet - that's a whole other process I'm going to have to learn, especially because some pages will require PHP and MySQL. If I send you the .HTML and .CSS files would that be just as effective?

Marc · #4 (**permalink**) Sep 20th, 2007, 17:51

Yes, even if you post it up on the forum.

Kurt · #5 (**permalink**) Sep 20th, 2007, 21:26

Quote:

Originally Posted by Marc

Yes, even if you post it up on the forum.

HTML and CSS attached! Thank you for any guidance.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
IE keeping space of emty divs	aviavia	Web Page Design	5	Sep 17th, 2007 17:57
IE6 adding unecessary space between divs	tox0tes	Web Page Design	2	Jun 29th, 2007 19:42
Getting the extra space off of my frames	Ralis	Web Page Design	11	May 19th, 2007 03:07
Extra line spacing in Firefox vs IE	bgoo	Web Page Design	6	Apr 16th, 2007 00:17
space between divs IE6 v IE7/FF	konnor5092	Web Page Design	1	Mar 8th, 2007 01:05

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
IE 7 vs Firefox & extra space between divs