SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    a.subnav {height:13px} /*to fill div */
    a.availability{ height:21px;}/*to fill up space*/
    #headerimage2 img{display:block}/*for netscape 6*/
    html
    Code:
    <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

  3. #3
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  5. #5
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    #headerimage2 img{ display:block;}
    You put it inside #headerimage 2 itself which is a block element anyway so nothing happens.


    Paul

  7. #7
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doh!

    Nice one paul!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •