Trying to get rid of extra spacing IE7 puts before and after paragraphs?

Discussion in 'CSS' started by carlos123, Oct 15, 2009.

0
  1. #1
    I have been beating my head against the proverbial CSS wall once again trying to figure out a hack around IE7's quirks. I gave up on trying to support IE6.

    I am hoping to be able to support IE7.

    This particular quirk is about the last one (I hope) that I have to overcome.

    Here is an image that shows how my 3col template layout appears in IE7.

    http://174.120.136.123/~carlos/3col/columns3.testb.html-in-ie7.png

    Notice that the IE7 has put extra spacing below the second paragraph in the header, the first and last paragraphs in the center column, and the first paragraph in the footer. S-l-o-p-p-y!

    Here is how it looks in IE8.

    http://174.120.136.123/~carlos/3col/columns3.testb.html-in-ie8.png

    Not quite perfect but good enough (it still seems to add extra spacing but at least it's consistent...compared to all the other browsers).

    Other than IE7's quirk the layout looks good in IE8, FF, Opera, and Chromium.

    Anybody got any suggestions as to how to get IE7 to behave??

    I've tried p:first-child { margin: 0; } but I don't want no spacing above the first paragraph. I want the spacing as it should be.

    The HTML can be seen here -> http://174.120.136.123/~carlos/3col/columns3.testb.html (you'll have to do a view source through your browser).

    The CSS can be seen here ->
    http://174.120.136.123/~carlos/3col/columns3.testb.css

    If anyone has any suggestions I would really appreciate hearing them.

    Thanks.

    Carlos
     
    carlos123, Oct 15, 2009 IP
  2. wwright

    wwright Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I'm a bit new to this, but I think that my answer is correct:

    Some developers recommend initially resetting some parameters, so that you have absolute control over each of them. Otherwise, the browser sets its own default values that tend to change from browser to browser. Here is a great discussion of resets. Cut and paste this link:
    http://creatingdrew.com/2008/08/6-popular-css-reset-techniques/

    Finally, here is a tutorial at the point where the author addresses the issue that you seem to be having. Cut and paste this link:
    http://css.maxdesign.com.au/floatutorial/tutorial0814.htm​
     
    wwright, Oct 17, 2009 IP
  3. carlos123

    carlos123 Peon

    Messages:
    58
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks very much for the info and the links! Some excellent stuff therein.

    I fixed my problem...I think I took the content at the links down though. It took me a long time to figure it out and I can't quite remember exactly what the problem was anymore but I know that I got around it by using an IE conditional comment statement in the HTML where I reset some of the CSS just for IE 7. Something to do with collapsing margins or some such if I remember rightly.

    Thanks again!

    Carlos
     
    carlos123, Oct 17, 2009 IP