Grow your CSS skills. Land your dream job.

UL Horizontal menu wierndness IE6, Safari, IE7

  • # July 18, 2008 at 11:39 pm

    have a UL horizontal menu with sprites for the images and it works fine in IE8 (all IE testing done using IETester) and Firefox but IE 6 & 7 make the buttons do a weird stair-step up the page starting with the first one being about 10 pixels to high into the header – can’t figure it out but it’s the closest i can get to what i can’t. Also Safari pushes the menu up into the header about 10 pixels (like the IE stuff but the buttons are inline. I’m a newbie so if it’s obvious what i’m doing – be nice, please. any help would be GREATLY GREATLY appreciated.

    MY HTML:

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">


    content="text/html; charset=UTF-8" />

    MY CSS:

    Code:
    @charset “utf-8″;

    img, div { behavior: url(iepngfix.htc)}

    body {
    background-image: url(../images/repeat.gif);
    margin: 0;
    padding: 0;
    background-color: #6C6C6C;}

    #page_wrap {
    width: 100%;
    backkground: black;
    margin: 0 auto;}

    #top_content {
    margin: 0 auto;
    height: 300px;
    width: 80%;}

    #header {
    margin: 0 auto;
    height: 300px;
    width: 950px;
    background: url(../images/header2.jpg) no-repeat center top;}

    #fish_logo {position: relative; z-index: 3; width: 183px; height: 270px;
    margin-left: 15px; margin-top: 8px;}

    #menu {
    display: inline;
    margin: 0 auto;
    list-style: none;}

    li{
    margin-top: -65px;
    margin-left: 148px;}

    li a{
    display: block;
    float:left;
    width: 123px;
    height: 41px;}

    li#home a {background: url(../images/home_bg.jpg) 0px 0px no-repeat;}
    li#home a:hover {background-position: 0 -41px;}
    li#home a:active {background-position: 0 -82px;}

    li#about a {background: url(../images/about_bg.jpg) 0px 0px no-repeat;}
    li#about a:hover {background-position: 0 -41px;}
    li#about a:active {background-position: 0 -82px;}

    li#quotes a {background: url(../images/quotes_bg.jpg) 0px 0px no-repeat;}
    li#quotes a:hover {background-position: 0 -41px;}
    li#quotes a:active {background-position: 0 -82px;}

    li#specs a {background: url(../images/specs_bg.jpg) 0px 0px no-repeat;}
    li#specs a:hover {background-position: 0 -41px;}
    li#specs a:active {background-position: 0 -82px;}

    li#faq a {background: url(../images/faq_bg.jpg) 0px 0px no-repeat;}
    li#faq a:hover {background-position: 0 -41px;}
    li#faq a:active {background-position: 0 -82px;}

    li#home a {background: url(../images/home_bg.jpg) 0px 0px no-repeat;}
    li#home a:hover {background-position: 0 -41px;}
    li#home a:active {background-position: 0 -82px;}

    li#contact a {background: url(../images/contact_bg.jpg) 0px 0px no-repeat;}
    li#contact a:hover {background-position: 0 -41px;}
    li#contact a:active {background-position: 0 -82px;}

    #middle_content {}

    #center_area {}

    #text_area {}

    #bottom_content {}

    #image_swap {}

    #footer {}

    here is the problem:

    [attachment=0]ie6_ie7_problem.jpg[/attachment]

    # July 19, 2008 at 11:30 am

    Could it be a reversed menu stepdown? Check out Chris’ article about it.

    # July 19, 2008 at 8:13 pm

    that did it – thank you so much!

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

You must be logged in to reply to this topic.

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