IE placing space between my footer and content? Help please?

Discussion in 'CSS' started by Barry Scott, Sep 26, 2007.

  1. #1
    Hi

    I have been building this for quite some time, i have taken time to learn and have really tried to get stuck in.

    I was one of those sad people that used to use only dreamweaver, now i only write by hand, mainly copy and pasting, my syntax doesn't come naturally yet!

    Anyway, the site. It's valid strict html 4.01 and i've really worked hard at this and by sticking as closely to what i was being told cross browser issues should be minimal.

    http://www.dremar.com/38.html

    When viewed through IE, as you can see, i get a nice gap between the footer and the content. It also adds a nice white strip to the right hand edge of the content?

    I had a similar problem with the page earlie in it's design, unforunately i seem to have fluked sorting it and have no recollection how it was done!

    Please help me if you can, inormation regarding why it's like this would be most appreciated. :D

    Thanks
     
    Barry Scott, Sep 26, 2007 IP
  2. x11joex11

    x11joex11 Peon

    Messages:
    106
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This worked for me when I had the error before, I put
    font-size:0; on my page to fix an odd spacing error that I.E did. Try puting that in the div before the spacing happens.
     
    x11joex11, Sep 26, 2007 IP
  3. x11joex11

    x11joex11 Peon

    Messages:
    106
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hey I found a good site that might help fix your spacing problem.

    Try overflow: hidden; in the div before it as well it's better I believe.

    It has to do with I.E rendering divs with small heights incorrectly. It assumes there is text in there like say of font size 12 or something and since it can't fit it overflows and creates that spacing error (at least from what I've read so far).

    Read more here.

    http://haslayout.net/css/extraheight#solution1_cs
     
    x11joex11, Sep 26, 2007 IP
  4. Crimsonc

    Crimsonc Peon

    Messages:
    616
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #4
    looks like you've fixed it.
     
    Crimsonc, Sep 27, 2007 IP
  5. KipperMyHero

    KipperMyHero Peon

    Messages:
    9
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    The footer div is 24px high but your <p> tag inside it has margin on top and bottom for 20px each, plus 5px padding top, it exceeds the container's height.
    Remove the margins on top and bottom will fix the problem.
     
    KipperMyHero, Sep 28, 2007 IP
  6. Barry Scott

    Barry Scott Active Member

    Messages:
    183
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #6
    I'm not sure whether i'm unable to implement your ideas or just that they don't work.

    I have got rid of the white-space though!

    http://www.dremar.com/40.html

    @x11joex11

    Thanks Joe, I couldn't seem to get that working? Could you elaborate or even show me where i should paste said code? Thanks

    @crimsonc

    Not yet unfortunately. Do you have any ideas?

    @KipperMyHero

    From re-reading the code, thanks to what you said, i was able to cure the white space to the right of the content. I had an 800px image, in 800px holder with padding! :D

    The P element you state is not relevent as the footer uses footer p for specifying that P. Or so it seems, can you explain further?
     
    Barry Scott, Sep 28, 2007 IP
  7. HVMDesign

    HVMDesign Well-Known Member

    Messages:
    110
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    105
    #7
    Whenever I have a problem like this, I just add div{border:1px dashed red} to the bottom of my CSS file. It allows me to see if I have any strange overlapping/margin issues with my divs. Then I know exactly where to look to fix.
     
    HVMDesign, Sep 29, 2007 IP
  8. Barry Scott

    Barry Scott Active Member

    Messages:
    183
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #8

    You were right. :eek: Thanks very much! Thanks for your tip as well hvm, the red border helped me solve it!
     
    Barry Scott, Sep 29, 2007 IP