[SOLVED] Gaps between divs :-(

[danny322]

hey guys, down the left of the page, im getting a gap between 2 of my divs in IE and i dont have a clue why. Its fine in FF

http://www.design365.co.uk/mindaid/home.htm

[dab42pat]

its ok in ie7

[danny322]

its wrong in ie6, you should see just above the 'stop smoking' area theres a gap between the top of the box and where the stop smoking box starts

[Aso]

It's a known trait of IE6 to interpret line carriages in HTML as line breaks. Try putting

Code: Select all

<div id="stopsmoking">
<div id="smoking_txt">
<span class="leftlinks"><a href="#">Stop Smoking</a></span>
</div>
</div>

on one line.

Nice to see valid HTML by the way

[danny322]

hi aso, i tried that, it didnt work. Any other suggestions?

[danny322]

Hey, i now have an easier link for you to look at, i just cant get rid of that gap....its IE6 im getting the gaps

http://www.design365.co.uk/mindaid/test.htm

HTML:

Code: Select all

<div id="shadow_top"></div><div id="stopsmoking"></div>

CSS:

Code: Select all

#shadow_top{
width: 265px;
height: 14px;
background-image: url(images/shadow_top.gif);
background-repeat: no-repeat;
}

#stopsmoking{
width: 265px;
height: 55px;
background-image: url(images/stopsmoking.gif);
background-repeat: no-repeat;
text-align: right;
}

[spinal007]

I haven't look at your page but I'm pretty sure it's the old clear:both bug in IE6. DAMN Microsoft.
Try adding this to you css: (both divs)
clear:both;

If not, then it may well be because of your height parameters. Double check them...

[danny322]

Ive done that, it still doesnt work

Theres no error in my height parameters either, they are all exactly the same size as the images.

[spinal007]

ok, add this to your css:
#stopsmoking, #shadow_top{ display: block; padding:0; margin:0; float:left; clear:both; }
one of those should fix it...

[danny322]

nope lol

[danny322]

I find it very confusing how theres a gap, because all the rest are seperate images as well (weight loss, sexual issues, products) yet there isnt a gap between them. Im so confused and annoyed!

[Aso]

Got it! Slap

Code: Select all

 

in each of those divs and see what you get.

EDIT: And add this to your CSS

Code: Select all

#shadow_top {
line-height: 14px;
}
#stopsmoking {
line-height: 55px;
}

That should fix it

[danny322]

aso186 i could kiss you!

[spinal007]

LINE HEIGHT... Oh yes...
Well done!