Grow your CSS skills. Land your dream job.

CSS-Browser Problems

  • # March 13, 2009 at 8:39 am

    I have just began creating a new wordpress theme. When I open the page in Firefox the divs look as desired but the body div is underneath the sidebar in internet explorer. I want the sidebar on the left and the body with the posts to the right, right next to it. The div’s are wrapped around the sidebar and the other div called body is wrapped around the post. Why is it that in internet explorer it looks so much different. I have included the css for these two divs underneath.

    the web site is http://www.chriscarvergraphics.com/blog

    #body {
    background-image:url(http://cdn.css-tricks.com/images/bb_body.png);
    width: 800px;
    float: none;
    background-repeat: no-repeat;
    margin-left: 224px;
    padding-top: 50px;
    padding-left: 5px;
    height: 600px;
    }
    #sidebar {
    float: left;
    height: 568px;
    width: 224px;
    background-image:url(http://cdn.css-tricks.com/images/bb_side.png);
    margin-left: 5px;
    padding-left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 20px;
    background-repeat: no-repeat;
    }

    by the way I am using a Mac. and the only way I was able to see the internet explorer version was to use limusapp.com to view it

    # March 13, 2009 at 9:02 am

    your wordpress should have divs like this:

    body
    container
    sidebar /sidebar
    main /main (this is where the posts should go)
    /container
    /body

    which you have done, but with those you need to get the right widths for your container…

    example:
    container =1000px
    sidebar = 200px
    body = 800px

    make sure your widths are correctly sized.

    and overflow hidden is great to fix small problems like forced push down with IE.

    also: position relative and floating helps also

    # March 13, 2009 at 9:08 am

    for the most part it is like that. I have a page-wrap div that is 1024px and the sidebar is 224px and the body div/ content is 800px

    # March 13, 2009 at 9:34 am

    Your overall page width is 1024px.
    Your sidebar width is 224px + 20px padding = 244px.
    Your body width is 800px + 5px padding = 805px.
    244px + 805px = 1049px.
    See the problem?

    Take the padding off the divs and add it (better still, make it a margin) to the elements inside the divs.

    # March 13, 2009 at 9:37 am

    I do see how that would issue a problem. Thank you very much for helping me with that. Why is it that it works on Mozilla Firefox?

    # March 13, 2009 at 9:49 am

    Firefox is much more forgiving than IE.

    I also noticed that you were not floating the body div. Dump that enormous margin and float it left, up against the sidebar.

    One more quick tip. If you validate your code as you go you can save yourself a lot of potential problems http://validator.w3.org/#validate_by_input

    # March 13, 2009 at 10:16 am

    Thank you for this info. it helps a lot. Not only in this case but also for future sites. Thank you very much for the resource for that site validation tool.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".