[SOLVED] Gaps between divs :-(

danny322 · #1 Jan 22nd, 2008, 15:10

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 · #2 Jan 22nd, 2008, 15:16

its ok in ie7

danny322 · #3 Jan 22nd, 2008, 15:43

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 · #4 Jan 22nd, 2008, 15:53

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 · #5 Jan 23rd, 2008, 08:11

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

danny322 · #6 Jan 23rd, 2008, 08:48

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 · #7 Jan 23rd, 2008, 12:43

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 · #8 Jan 23rd, 2008, 14:22

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 · #9 Jan 23rd, 2008, 15:03

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 · #10 Jan 23rd, 2008, 15:23

nope lol

danny322 · #11 Jan 23rd, 2008, 15:30

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 · #12 Jan 23rd, 2008, 20:11

Got it!

Slap

Code: Select all

&nbsp;

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 · #13 Jan 24th, 2008, 08:16

aso186 i could kiss you!

spinal007 · #14 Jan 24th, 2008, 10:14

LINE HEIGHT... Oh yes...

Well done!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] how to put divs next to each other	lostboys	Web Page Design	9	Jan 13th, 2008 20:47
[SOLVED] Im getting a gap between 2 divs :-(	danny322	Web Page Design	1	Jan 9th, 2008 08:46
[SOLVED] overlapping divs :-(	danny322	Web Page Design	7	Dec 18th, 2007 12:58
gaps in layout	jtyoungs	Web Page Design	11	Oct 8th, 2007 15:41
[SOLVED] DIVs and Firefox - help!	Emzi	Web Page Design	4	Oct 4th, 2007 10:42

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Gaps between divs :-(