Grow your CSS skills. Land your dream job.

Problem with DIVs in IE and FF

  • # August 10, 2008 at 1:43 pm

    Hi y’ll

    Have been working on a CSS (where I have not much experience in used to tables) template for a design today, and have been testing it in FF 3 and IE 7, and so far have been struggling to get one thing to work correctly in both (actually IE 7 is doing what I want to happen). Here are some screens

    IE 7 how I want it: http://img247.imageshack.us/my.php?image=ie7vb9.jpg

    FF how I don’t want it: http://img300.imageshack.us/my.php?image=ffwm8.jpg

    And here is to code that is screwing me over :P

    The HTML file

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin pellentesque, ligula in eleifend faucibus, felis risus hendrerit nisl, sed posuere dolor felis ornare dui. Nullam blandit risus feugiat mi. Quisque euismod leo eget arcu. Nullam dictum odio vel augue. Vivamus nulla massa, porttitor vel, faucibus a, sagittis facilisis, nisl. Sed adipiscing molestie nisi. Suspendisse tempus sodales turpis. Nunc varius adipiscing felis. Fusce volutpat rhoncus est. Donec nulla dui, gravida et, malesuada eu, vulputate vel, urna. Sed sem arcu, dignissim id, lobortis nec, eleifend vel, libero. Donec egestas, ligula quis vulputate lacinia, enim eros varius tortor, a hendrerit nunc nibh et nisi. Sed dignissim aliquam lectus. Ut enim. Praesent enim metus, mollis ac, sollicitudin ac, vestibulum eu, velit. Nunc dapibus neque eu lorem. Aliquam erat volutpat.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin pellentesque, ligula in eleifend faucibus, felis risus hendrerit nisl, sed posuere dolor felis ornare dui. Nullam blandit risus feugiat mi. Quisque euismod leo eget arcu. Nullam dictum odio vel augue. Vivamus nulla massa, porttitor vel, faucibus a, sagittis facilisis, nisl. Sed adipiscing molestie nisi. Suspendisse tempus sodales turpis. Nunc varius adipiscing felis. Fusce volutpat rhoncus est. Donec nulla dui, gravida et, malesuada eu, vulputate vel, urna. Sed sem arcu, dignissim id, lobortis nec, eleifend vel, libero. Donec egestas, ligula quis vulputate lacinia, enim eros varius tortor, a hendrerit nunc nibh et nisi. Sed dignissim aliquam lectus. Ut enim. Praesent enim metus, mollis ac, sollicitudin ac, vestibulum eu, velit. Nunc dapibus neque eu lorem. Aliquam erat volutpat.


    The CSS file

    Code:
    @charset “utf-8″;
    /* CSS Document */

    * {
    margin: 0;
    padding: 0;
    border: 0;
    }

    html, body {
    background: url(img/background.jpg) repeat-x;
    background: #3d4959;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    height: 100%;
    }

    div#sitewrap {
    margin: 0 auto;
    background: #FFFFFF;
    padding: 0px;
    width: 1000px;
    z-index: 1;
    }

    div#header {
    height: 200px;
    width: 1000px;
    background:#666666;
    }

    div#content {
    background:#FFFFFF;
    width:980px;
    padding: 10px;
    position: relative;
    }
    div#content p{
    font-size:12px;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    color:#666666;
    padding:5px;
    }

    div#left_part{
    background: #CCCCCC;
    position: relative;
    float:left;
    padding: 5px;
    width: 760px;
    }

    div#right_part{
    background: #999999;
    position: relative;
    float: right;
    padding: 5px;
    width: 200px;
    }

    div#bottom {
    width: 1000px;
    height: 50px;
    background:url(img/bottom.png) no-repeat;
    margin: 0px auto;
    }

    div#bottom_fade {
    width: 100%;
    height: 50px;
    z-index: 99;
    position: fixed;
    bottom: 0%;
    background:url(img/fadebottom.png) repeat-x;
    }

    Anyone know how I can make it work correctly in FF to (meaning getting the white background behind the floated divs and the round bottom under them)?

    # August 10, 2008 at 1:55 pm

    Got it fixed with someone else’s help added a div after them that does a clear :)

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

You must be logged in to reply to this topic.

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