Grow your CSS skills. Land your dream job.

FF vs. IE 7

  • # May 16, 2008 at 8:48 am

    I love this site and it has helped a great deal in designing layouts first and coding second!!

    I had to throw a quick page up for a client who wants to promote his pool party. I ran into a bit of a menu issue.

    http://www.homemadela.com/intropage.html

    The left navigation looks great in FF however in IE, the left navigation menus are off. How do I solve this using CSS? Listed below is my css code for the site. The Div markers "Left-Nav-Home" is where the menu items are listed. Any help is appreciated.

    Code:
    /* CSS Document */

    body {
    font-size: 62.5%;
    font-family: verdana, sans-serif;
    background: url(../images/white_bg.png) repeat top #FFF;
    }

    h1 {
    font-family: verdana, sans-serif;
    font-size: 18px;
    color: #7bc5e9;
    }

    a.link {color:#7bc5e9; text-decoration:none;}
    a.visited {color:#7bc5e9; text-decoration:none;}
    a.hover {color: #7bc5e9; text-decoration:underline;}
    a.active {color: #7bc5e9;}

    div#page-wrap {
    width: 908px;
    margin: 0 auto;
    }

    div#main-content {
    padding-top: 0px;
    width: 908px;
    background: url(../images/white_bg.png) repeat top;
    }

    ul#footer-content {
    width: 470px; height: 200px;
    padding-left: 40px;
    float: left;
    }

    ul#nav {
    margin-left: 150px;
    height: 52px; width: 892px;
    background: url(../images/home_made_logo.png) no-repeat;
    margin-top: 0px;
    }

    div#content-holder {
    float: right;
    height: 1401px; width: 700px;
    background: url(../images/main_paragraph.png) no-repeat;
    margin-top: 0px;
    }
    div#content-holder-text {
    height: 1400px;
    width: 472px;
    margin-top: 20px;
    }

    div#left-nav-home {
    float: left;
    height: 497px; width: 186px;
    background: url(../images/left_nav.png) no-repeat;
    margin-top: 0px;
    }

    ul#left-nav-home-text {
    height: 497; width: 186px;
    margin-top: 60px;
    margin-left: 12.5px;
    list-style: none;
    }
    ul#left-nav-home-text li a{
    display: inline;
    }
    ul#left-form {
    height: 200px;
    width: 100px;
    margin-top: 110px;
    margin-left: -20px;
    }

    a.left-nav-home:link {color:#FFFFFF; font-size: 15px; text-decoration:none; font-weight:400}
    a.left-nav-home:visited {color: #FFFFFF; font-size: 15px; text-decoration: none; font-weight:400}
    a.left-nav-home:hoover {color:#FFFF00; font-size: 15px; text-decoration:underline; font-weight:400}
    a.left-nav-home:active {color: #FFFFFF; font-size: 15px; text-decoration: none; font-weight:400}

    .clear {clear:both;}

    .form-button {
    background-color:#FFFFFF;
    border: #7bc5e9 solid 2px;
    font-size: 12px;
    }

    .form-field {
    background-color:#FFFFFF;
    border: #7bc5e9 solid 2px;
    font-size: 12px;
    }

    div#footer {
    width: 275px;
    height: 25px;
    margin-top: 50px;
    padding-bottom: 10px;
    }

    # May 16, 2008 at 4:41 pm

    Sorry to be vague….

    You need to do a if IE statement
    Ex: (Put in the header of the HTML)

    Code:
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".