Clearing floats / margin issue

Discussion in 'CSS' started by crazyryan, Nov 28, 2008.

  1. #1
    Hey,

    I have a really frustating problem with clearing floats and margins/padding.

    http://www.suttonkitchens.com/new/ - My code can be seen here, I'm having problems adding spacing where the document starts and between the header and container selectors.

    I've messed around with the code but what ever I do theres always different spacing in FF and IE. I've tried using the clearfix as well..
     
    crazyryan, Nov 28, 2008 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    The problem is IE does floats wrong. I don't have a Windows box to look at it but it's possible you are seeing IEs bug where it wrongly expands parent elements to contain floated elements. Firefox, in any case, will be handling it correctly and you should use it as your reference for how things should work.

    To get FF to imitate IEs bug, you can add 'overflow:auto' to the parent container.
     
    drhowarddrfine, Nov 28, 2008 IP
  3. cipals15

    cipals15 Well-Known Member

    Messages:
    1,085
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    100
    #3
    Yeah. I always have problems with IE. Alot of problems with respect to website design. FF, Chrome and Opera have no issues on my design but when i try it in IE. Issues arise. Hmmm..
     
    cipals15, Nov 28, 2008 IP
  4. lifeanddesign

    lifeanddesign Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    use CSS hack for IE
    eg : * html .classname{}

    for more understanding visit websites
    eg:
    csscodeslibrary.com/css-hack.html
     
    lifeanddesign, Nov 29, 2008 IP
  5. crazyryan

    crazyryan Well-Known Member

    Messages:
    3,087
    Likes Received:
    165
    Best Answers:
    0
    Trophy Points:
    175
    #5
    I managed to sort it out by adding a height to the #header selector and then using line-height to vertically center everything as well.
     
    crazyryan, Nov 29, 2008 IP