Divs not butting up ... Please help making me mad

[mumford1]

Hi

Could someone please look at http://www.picturesqueframes.co.uk/test.htm

In Netscape 6 the check availability link should be flush with the picture above, but there is a 2px gap.

Also the middle pics height is 117px, so I have set the left nav height to 117px and the far right pic div to 117px high, but the middle picture div seems to be higher?

Would be easier to understand if you took a look.

Any help would be extremeley nice of you as this is driving me mad

[Paul O'B]

Hi,

The left nav is 117px but the content doesn't fill it up. If you give it a background colour you will see that it matches up correctly.

I think that if you make these changes then the layout should be like you want.

a.subnav {height:13px} /*to fill div */
a.availability{ height:21px;}/*to fill up space*/
#headerimage2 img{display:block}/*for netscape 6*/

html

<div id="headerimage1"><img src="http://www.picturesqueframes.co.uk/
images/header_image.jpg" width="360" height="118" border="0" alt=""></div>
<div id="headerimage2" ><img src="http://www.picturesqueframes.co.uk/
images/header_image2.jpg" width="223" height="97" border="0" alt="" ><a href=".htm" class="availability">Check Availability</a>
</div>

I've taken the onepixspacer div out and changed the image height to 118px.

You may need to tidy it up a bit but it looks the same in mozilla and IE6 and Netscape (although Ie5, 5.5. will be out unless you account for the broken box model).

Anyway hope that helps.

Paul

[mumford1]

thanks paul

But the check availability orange box is still not butting up to the women pic, in NS6 and if I take out that onepixspacer it doesen't butt up in IE6, do you know why?

[Paul O'B]

Hi,

It looked ok in my versions (ie6,mozilla1.2, netscape 6.2) ? Have you put the code online yet, you may have missed something out or I may have missed something that I changed.

Paul

[mumford1]

i have just uploaded it its the same address, if I look at it on IE6 without the onepixspacer the orange box doesen;t but up to the women.

I also have version 6.1 of NS

[Paul O'B]

Hi,

I see the problem you put the display block in the wrong place. It should apply to the image and not the containing div.

#headerimage2 img{ display:block;}

You put it inside #headerimage 2 itself which is a block element anyway so nothing happens.


Paul

[mumford1]

Doh!

Nice one paul!