div gap

[punkass]

Hi all,

I have 2 divs that have a gap between them:

<div style="text-align: left; margin-bottom: 5px;">

<div style="height: 28px; background: url('mos/tab_top_right.gif') no-repeat top right;">
<!--Indent--> <div style="float:left;"><a href="menu_control"><img src="tab_training_on.gif" alt="tabs" /></a></div>
<!--Indent--> <div style="float:left;"><a href="menu_control"><img src="tab_training_control_off.gif" border="0" alt="tabs" /></a></div>
<!--Indent--> <div style="float:left;"><a href="menu_advertising"><img src="tab_training_adver_off.gif" border="0" alt="tabs" /></a></div>
</div>

<!-- GAP HERE -->

<div style="clear: left;text-align: center; background-image: url('mos/tab_bottom_tile.gif');">
<!--Indent--> <div style="float:left;"><img src="tab_left.gif" border="0" alt="tabs" /></div>
<!--Indent--><div style="float:left; width:23%"><a href="get_started_training"><img src="tab_getstarted_off.gif" border="0" alt="1" /></a></div>
<!--Indent--><div style="float:left;"><img src="tab_btn_sep.gif" border="0" alt="tabs" /></div>
<!--Indent--><div style="float:left; width:23%"><a href="free_plan.php"><img src="tab_program_off.gif" border="0" alt="1" /></a></div>
<!--Indent--><div style="float:left;"><img src="tab_btn_sep.gif" border="0" alt="tabs" /></div>
<!--Indent--><div style="float:left; width:23%"><a href="bonus_pool.php"><img src="tab_bonuspool_off.gif" border="0" alt="1" /></a></div>
<!--Indent--><div style="float:left;"><img src="tab_btn_sep.gif" border="0" alt="tabs" /></div>
<div style="float:left; width:23%"><a href="faq.php"><img src="tab_faqs_off.gif" border="0" alt="1" /></a></div>
<!--Indent--><div style="height: 54px; background: url('tab_right.gif') no-repeat top right;" ></div>
</div>

</div>

This seems fine in IE(a first) but not in anything else. I can either remove the clear:left; and the gap is gone but the page explodes.
Or I can remove the 3 images at the top and make them text and the gap is gone(but thats not what i want).

I am at a loss, any help would be great.

thanks.

[createErrorMsg]

First, try adding float:left; to the two <div>s containing the <div>s containing the images (follow that?). i.e., the one with 'height: 28px;' and the one with 'clear: left;'. This will force them to expand to wrap around the floated image <div>s and may get rid of the gap.

Two, you need to explicitly set a WIDTH value for all of those floated <div>s. A float without a width is asking for trouble, and could even be the cause of your problem.

Lastly, you may be able to get rid of the image holding <div>s altogether (if the images are the only things in them). Simply apply the float (and WIDTH!) values to the <img> tags themselves and save yourself the added complexity of all those <div> tags.

[punkass]

Well no luck,

Tried the first one, but it caused the bottom menu to float up next to the top menu. Then tried a few variations of it but still no luck.

Set all the widths, didnt seem to make a differnce.

I can't get rid of the divs because I want the divs to scale but not the images.

thanks.

[createErrorMsg]

Tried the first one, but it caused the bottom menu to float up next to the top menu.

Try it with a clear: left; on the bottom menu.

[punkass]

thanks, Well that seemed to do the trick, But :)

it now created the same gap(a little bigger) in IE.

So I am assuming that I can use a hack of some kind to hide that float:left from IE?

thanks again.

[createErrorMsg]

So I am assuming that I can use a hack of some kind to hide that float:left from IE?

Probably not the best bet. If IE ever fixes it's non-compliance issues, then suddenly your page won't work in IE again. I would leave the float, but see if there's another way to deal with the gap in IE, which is almost certainly not coming from the float.

The IE gap may be a default margin, so try 'zeroing out" (explicitly setting to 0) the margins and padding on elements at the bottom of the top <div> and top of the bottom <div>. You may find that this gets rid of the gap.

[Patrick Taylor]

Totally off the top of my head, does:

img { margin: 0; padding: 0; border: 0; display: block; }

in your external stylesheet make any difference?

[punkass]

Well the margin/padding: 0px thing didnt seem to make a difference, and neither did the img style.

I managed to get it to work with this:

* html #menu_top {float:none;}

True that one day MS my fix IE but I dont see that happening any time soon. :)

thanks again for your help.