SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    239
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    IE 5 and 6 are pushing the margin between divs down too far.

    This exposes the white behind the background image.
    The format is thus (works in everything else):
    HTML Code:
    <div id="wrap" style="height:600px; max-height:600px">
    <div id="menu">
    </div>
    <div id="links">
    </div>
    <div id="content">
    <form>
    <table>
    	
    </table>
    </form>
    </div>
    THE GAP IS HAPPENING HERE
    </div><!-- end wrap -->
    It is a large gap and not necessary at all. I want to close it but I can't see why it is there in the first place or why setting the height of the wrap div doesn't change it at all.

    In Opera and FF removing the height definitions on the wrap div gives the gap too.

  2. #2
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's the empty form you have in there.

    It's similar to the space that's set aside in lists for the bullets to sit in.

    You'll have to set margin to 0 to get rid of it, I'm not sure if FF uses padding on forms like it does for list bullet boxes, but if it's still there in FF when you remove the margin, then you'll know to remove padding as well.

    It can get a little tricky if you have your form nested in a div with padding/margin properties applied in a complicated rule structure.

  3. #3
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    239
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ho ho, very funny.

  4. #4
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SubEffect
    Ho ho, very funny.
    No really, remove the form, or it's margin/padding and see what happens.

    <form style="margin:0;">

  5. #5
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    239
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Setting the margin to 0 does make a difference - the gap is much smaller, about 10px now. Still there though.

    I thought you were joking cause I already said this is just the format.

  6. #6
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SubEffect
    Setting the margin to 0 does make a difference - the gap is much smaller, about 10px now. Still there though.
    Their shouldn't be any margin.

    Which browser are you seeing it in?

  7. #7
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    239
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Only in IE 5 and 6. Of course

  8. #8
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SubEffect
    Only in IE 5 and 6. Of course
    10px, that's not much, it's probably just the block around the text.

    add

    <span style="border:solid white 1px;">THE GAP IS HAPPENING HERE</span>

    and see if theirs a gap between the border and the table.

  9. #9
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    239
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    There is no text there on the actual page. I've done what you said and I can see that there is the gap is between the lower border of the content div and the wrap div.

    But I already knew that.

    Linkage:
    http://www.medicaltextbooks.co.uk/credits_contact.php

  10. #10
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Edit:



    O.K. I see what you're talking about now, it's hard to spot.

    Add <form style="margin:-15px;



    Edit:



    If this is an IE only thing, and you use the margin setting I suggested, then you'll have to use a hack so the other browsers won't get the style.

    style="margin:-15px; ma\rgin:0;"

    You might have to check to see what the margin on the form is set to and include that value in the ma\rgin hack.

    I think theirs most likely better way than using a hack though.

    It has something to do with your layout, probably towards the top of the page, where you have something fugded.

    Keep checking, you'll find it.


  11. #11
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    239
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    No, that doesn't work either.

    I've looked at the page in FFs DOM inspector and I cannot find anything. IE is just creating extra space without reason. Even if I alter the height of the wrap div all the other browsers obey. IE does not.

  12. #12
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You missed my post above.

  13. #13
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    239
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That margin hack works in IE5 but not IE6. This is ridiculous.

  14. #14
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is also ridiculous.

    You've got 11 <br> tags in your markup.

    You need to put that stuff in a list.

    I think it's pushing your container down below your image.

    Code:
    <span>Submit
     <br> - a book title
     <br> - a book review,<br>&nbsp;&nbsp;&nbsp;rating or both
     <br> - an error
     <br> - a book for sale
    </span></a>
    <a href="forum/index.php">Forum 
    <span>Register at the<br>forums to discuss
     <br> - the site &amp; contents
     <br> - textbooks
     <br> - medicine
     <br> - future site versions
     <br> - your suggestions
    </span>

  15. #15
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SubEffect
    That margin hack works in IE5 but not IE6. This is ridiculous.
    It works on IE6 the same way it works on any other standards mode browser.

    IE6 ignores the first rule, and gets the \ed one.

  16. #16
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    239
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That margin hack is not working in IE6. It's fine in everything else. In fact it is messed up in IE5 too - the gap is gone but the text at the bottom of the form is pushed up to overlap the buttons.

    I've swapped the <br> for lists. No difference.

  17. #17
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe you should swap the tables for divs. Lol

    You could increase the size of your image.

    Or use a tilable background image on the body, and put the artificial heart image in a div, and center it.

  18. #18
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    239
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I could take the forms out of tables but it's a nice way to format them.

    I don't want to increase the image size as it is already too big really for memory and quality.

    This shouldn't be happening at all. IE is so awkward. Why can I not just set a maximum height for a division?

  19. #19
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SubEffect
    I could take the forms out of tables but it's a nice way to format them.

    I don't want to increase the image size as it is already too big really for memory and quality.

    This shouldn't be happening at all. IE is so awkward. Why can I not just set a maximum height for a division?
    You can set a height, but if your content grows beyond that , it'll overflow the division.

    Setting overflow to hidden might fix the margin problem for now.

    Like I said before though, if you put the heart image in a div as it's background, you won't have to increase it's size.

    Then you use a tilable image on the body, or the wrapper, set to repeat, that way as the div expands, the background will tile, so no more margin, just background image as far as the eye can see.

  20. #20
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    239
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I may have to do this tile thing after all. It's so dumb. There is NOTHING between the divs. . .

    Actually the heart is already the background image of the wrap div. hmmmm

  21. #21
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SubEffect
    I may have to do this tile thing after all. It's so dumb. There is NOTHING between the divs. . .

    Actually the heart is already the background image of the wrap div. hmmmm
    Tiling an image is the best way to go, since it'll keep tiling whenever the div expands.

  22. #22
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    239
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    How do I do that though? The heart is already the background image. I could put a div behind it but that seems silly. The other thing is the heart image cuts off very abruptly so it will be hard to blend it with another image. I was thinking of fading it out at the bottom. . .

    I've fixed the problem by taking some <p> tags out of the content text (not uploaded) bu this is not a satisfactory solution as if I alter content size in the future the same thing will happen.


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
  •