Treehouse: Grow your CSS skills. Land your dream job.

css bugs in layout

  • # March 27, 2010 at 9:17 am


    I am building a site for a coworker, which is giving me 2 problems in IE6/7 that need to be fixed…

    On this about page, the content section gets all screwed up. it looks fine in firefox/safari/IE8 (I didn’t test chrome but it should look correct.)

    Also the footer is screwed up in those browsers.

    (the magic line will be removed in IE6.)

    I am not sure where to start, please point me in the right direction if you can.

    # March 27, 2010 at 10:33 am

    You are suffering from the double margin/padding bug when using floats. Read this … argin.html

    For the footer, you need to add more top margin to #footer .p so that it moves down.

    # March 27, 2010 at 12:37 pm

    this wasn’t a doubled margin issue.

    For some reason IE was treating the "bio-img" as block because it was forcing the bio down.. so I wrapped it in a div, and floated the image left.

    Then I simply floated my two side by side sections opposite each other, one left and one right instead of both left…

    I still need to fix the footer… margin-top of the #footer p is how I fixed it in the non IE browsers. Incresing it helped IE, but also affected the rest of the browsers, I guess having it a little higher isn;t too detrimental to the design though…


    This can be marked as solved.

    # March 28, 2010 at 7:03 am

    Then you need to use a conditional comment to fix the IE issue so it doesn’t affect the other browsers.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.