SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Space Below DIV

  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Space Below DIV

    I am designing a new site for myself. I have added a function where the user can increase the font size. The problem is that a space occurs when this occurs. Have a look at this test page to see what I mean:

    Test Page

    Any suggestions how I can get rid of this space?

  2. #2
    SitePoint Evangelist Maujor's Avatar
    Join Date
    Mar 2005
    Location
    Rio de Janeiro - Brazil - South America
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can hidde the space, changing the background-color:#00FF00; for div#footerwrapper to background-color:#000000;
    Mauricio Samy Silva
    http://www.maujor.com/

  3. #3
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What space, where?

    Have you seen the page in Firefox, your bottom footer is aligned to the left, not centered as I believe you want it.

    Also the text in the breadcrumb div overlaps the orange box when you increase the size. If you change the height from 15px to something like 1.5em, the text doesn't overlap when text size is increased.

    Nadia

  4. #4
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gidday. There are several problems.

    One is that you need margin:0 auto; applied to #divfooterwrapper instead of #orangefooter.

    Will keep looking and try and help with a couple of other things this pm.
    fisherboy
    Web Site Design

  5. #5
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nadia is right. Try setting the heights of all divs containing text to em's. This should fix most of your problems, including the lime green gap that appears at the bottom in IE.

    There is also an odd positioning thing in IE with the larger font/smaller font link text when you increase and then decrease the size.

    Hope this helps.
    fisherboy
    Web Site Design

  6. #6
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your responses. I had seen that the text was overlapping in Firefox. I tried using em and it got rid of this problem so thax for that! Am going to change all of the heights etc to em to see if it irons out any more problems.

    Thanks again!

  7. #7
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looking MUCH better today. Well done! Let us know when its finished. Would love to see how it turns out.
    fisherboy
    Web Site Design


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
  •