div - IE and white space

problem of white space appearing between two div tags in IE

[safin]

Hello everyone,
I am trying for last 4 hours my best to fix this to no avail. I have got two div blocks acting as containers positioned as

Block1
Block2

Over each other. It renders fine on all browsers other than IE6 (Heck even IE5.5 works properly (i tested via browsershots on that))
Basically on IE6, some pixel space shows between the two blocks as
Block1
-------
Block2

where --- is the white space.
(See Image Here as it appears on IE6:

My HTML CODE (The space appears in area marked <!-- /logo -->)

<!-- logo -->
<div class="wrapwhole">
 <a name="top"></a>
 <div class="header_right">
 <div style="float:left;display:block;">
 <a href="$vboptions[forumhome].php$session[sessionurl_q]"><img style="display:block" src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" width="246px" height="136px" /></a>
 </div>
 <div style="height: 31px; padding-right: 10px;"> 
 <div class="linkstop_bookmark">
 <a class="linkstop_bookmark" href="javascript:bookmarksite('FunEnclave - Unlimited Fun!', 'http://www.example.com/')">
 <span style="display:none">Bookmark FunEnclave
 </span></a> 
 </div> 
 <div class="linkstop_links">
 <div id="usercptools">
 <a href="#usercptools" accesskey="3" class="linkstop_links">
 <span style="display:none">$vbphrase[quick_links]
 </span></a> <script type="text/javascript"> vbmenu_register("usercptools", true); </script>
 </div>
 </div> 
 </div> 
 <div style="height: 75px;">
 &nbsp; <!-- AD CODE Space --> 
 </div>
 <div style="height: 30px; padding-right: 10px; padding-top:5px; display:block">
 <!-- Google CSE Search Box Begins -->
 <form action="http://www.example.com/fesearch.php" id="searchbox_018387143958508041594:ziprupc8f1u">
 <div style="float: right;"> 
 <input type="hidden" name="cx" value="018387143958508041594:ziprupc8f1u" /> 
 <input type="hidden" name="cof" value="FORID:11" /> 
 <input class="submit" type="text" name="q" size="20" style="font-size: 11px;" /> 
 <input class="submit" type="image" src="images/fe/misc/gsearch_button.gif" value="Go" alt="Go" />
 </div>
 </form>
 <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_018387143958508041594%3Aziprupc8f1u&#9001;=en"></script>
 <div style="float: right; line-height: 20px;">
 <img src="$stylevar[imgdir_misc]/gsearch.gif" border="0" alt="Search" />&nbsp;
 </div>
 <!-- Google CSE Search Box Ends -->
 </div>
 </div>
 <!-- /logo -->
 <div class="nv2"><div class="nv1">
 <div class="linkrow_left"></div>
 <div class="linkrow_home"><a href="$vboptions[homeurl]$session[sessionurl_q]"></a></div>
 <div class="linkrow_div"></div>
 <div class="linkrow_forums">
 <a href="forums.php$session[sessionurl_q]"></a>
 </div>
 <div class="linkrow_div"></div>
 <div class="linkrow_gallery">
 <a href="gallery/$session[sessionurl_q]"></a>
 </div>
 <div class="linkrow_div"></div>
 <div class="linkrow_arcade">
 <a href="arcade.php$session[sessionurl_q]"></a>
 </div>
 <div class="linkrow_div"></div>
 <div class="linkrow_sms">
 <a href="smsjokes.php$session[sessionurl_q]"></a>
 </div>
 <div class="linkrow_div"></div>
 <div class="linkrow_moviedb">
 <a href="forumdisplay.php?$session[sessionurl]?f=6"></a>
 </div>
 <div class="linkrow_div"></div>
 <div class="linkrow_fantasy">
 <a href="casino.php$session[sessionurl_q]"></a>
 </div>
 <div class="linkrow_div"></div>
 <div class="linkrow_hqpics">
 <a href="forumdisplay.php?$session[sessionurl]f=65"></a>
 </div>
 <div class="linkrow_div"></div>
 <div class="linkrow_videos">
 <a href="fetube.php$session[sessionurl]"></a>
 </div>
 <div class="linkrow_right"></div>
 <!--<img src="$stylevar[imgdir_misc]/linkrow_r.gif" border="0" alt="" align="left" />-->
 </div></div>
 
 ......
 More HTML
 .......
 </div> 

The relevant css

.nv2 {
height: 34px;
background: url(http://www.example.com/images/fe/misc/header_b_r_b.gif);
}
.nv1 {
height: 34px;
background: url(http://www.example.com/images/fe/misc/header_b_r1.gif) no-repeat top right ;
}
.header_right { background: url(http://www.example.com/images/fe/misc/header_r1.gif) no-repeat top right; margin:0px 0px 0px 0px; padding:0px; height:136px; }
.linkstop_bookmark { display: block; float: right; margin: 0px; padding: 0px; width: 90px; height: 31px; background: url(http://www.example.com/images/fe/misc/bookmarks.gif) no-repeat;
}
.linkstop_bookmark a:hover { background-position: 0px -31px; }
.linkstop_links { display: block; float: right; margin: 0px; padding: 0px; width: 90px; height: 31px; background: url(http://www.example.com/images/fe/misc/linkstop_links.gif) no-repeat;
}
.linkstop_links a:hover { background-position: 0px -31px; }
.linkrow_left { 
display: block; 
float: left; 
margin: 0px; 
padding: 0px; 
width: 6px; 
height: 34px; 
background: url(http://www.example.com/images/fe/misc/linkrow_l.gif) no-repeat;
}
.linkrow_home a:link, .linkrow_home a:visited { display: block; float: left; margin: 0px; padding: 0px; width: 104px; height: 34px; background: url(http://www.example.com/images/fe/misc/home.gif) no-repeat;
}
.linkrow_home a:hover { background-position: 0px -34px; }
.linkrow_forums a:link, .linkrow_forums a:visited { display: block; float: left; margin: 0px; padding: 0px; width: 104px; height: 34px; background: url(http://www.example.com/images/fe/misc/forums.gif) no-repeat;
}
.linkrow_forums a:hover { background-position: 0px -34px; }
.linkrow_gallery a:link, .linkrow_gallery a:visited { display: block; float: left; margin: 0px; padding: 0px; width: 104px; height: 34px; background: url(http://www.example.com/images/fe/misc/gallery.gif) no-repeat;
}
.linkrow_gallery a:hover { background-position: 0px -34px; }
.linkrow_arcade a:link, .linkrow_arcade a:visited { display: block; float: left; margin: 0px; padding: 0px; width: 104px; height: 34px; background: url(http://www.example.com/images/fe/misc/arcade.gif) no-repeat;
}
.linkrow_arcade a:hover { background-position: 0px -34px; }
.linkrow_sms a:link, .linkrow_sms a:visited { display: block; float: left; margin: 0px; padding: 0px; width: 104px; height: 34px; background: url(http://www.example.com/images/fe/misc/sms-jokes.gif) no-repeat;
}
.linkrow_sms a:hover { background-position: 0px -34px; }
.linkrow_moviedb a:link, .linkrow_moviedb a:visited {display: block; float: left; margin: 0px; padding: 0px; width: 104px; height: 34px; background: url(http://www.example.com/images/fe/misc/funstuff.gif) no-repeat;
}
.linkrow_moviedb a:hover { background-position: 0px -34px; }
.linkrow_fantasy a:link, .linkrow_fantasy a:visited {display: block; float: left; margin: 0px; padding: 0px; width: 104px; height: 34px; background: url(http://www.example.com/images/fe/misc/CASINO.gif) no-repeat;
}
.linkrow_fantasy a:hover { background-position: 0px -34px; }
.linkrow_hqpics a:link, .linkrow_hqpics a:visited {display: block; float: left; margin: 0px; padding: 0px; width: 104px; height: 34px; background: url(http://www.example.com/images/fe/misc/hqpics.gif) no-repeat;
}
.linkrow_hqpics a:hover { background-position: 0px -34px; }
.linkrow_videos a:link, .linkrow_videos a:visited {display: block; float: left; margin: 0px; padding: 0px; width: 104px; height: 34px; background: url(http://www.example.com/images/fe/misc/videos.gif) no-repeat;
}
.linkrow_videos a:hover { background-position: 0px -34px; }
.linkrow_div {
display: block; 
float: left; 
width: 3px; 
height: 34px; 
background: url(http://www.example.com/images/fe/misc/linkrow_div.gif)
}
 
.linkrow_right {
display: block; 
float: left; 
width: 8px; 
height: 34px; 
background: url(http://www.example.com/images/fe/misc/linkrow_r.gif);
} 

Any help on this? I tried to specify all the correct heights and mark images as display:block but that still didn't help

[edited by: jatar_k at 2:14 pm (utc) on Aug. 11, 2008]
[edit reason] no urls thanks [/edit]

[safin]

I did some testing and have isolated the issue down to this line of code (Added to add spacing between search bar and the top nav buttons, and also so that i can add a ad or a scroller there later)

<div style="height: 75px;">
&nbsp; <!-- AD CODE Space -->
</div>

As soon as i remove that, the white space goes but the search bar also moves up

I can add padding there to move it downwards (padding-top maybe) but i want the middle area for ad or scroll. Anyway to keep that and still get rid of the white space?

[edited by: jatar_k at 2:14 pm (utc) on Aug. 11, 2008]
[edit reason] urls [/edit]

[csuguy]

So.. many... divs!?! CSS should be for style not structure :/

I'd like to see the actual webpage - that would give me a better idea of what's going on in that mess. Anyways, what you could do is use padding or absolute positioning or whatever to move everything down to leave space for the ad. Then make that ad div have an absolute position and position it right over that space with 100% width and 75px height.

Seriously though... what's with all the divs and classes?