Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS menu positioning problem in IE7

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #26708
    Totoro
    Member

    Hi,

    I’m new to css and just starting out doing some things for my friend.
    I have created a page with a header, menu and footer, but I’m having problems with the positioning of the menu.
    It looks fine in Firefox on the PC and Mac, also no problems in Safari. But in IE7 the position of the menu is way off. It should be positioned top-right corner above the red line. But in IE7 it’s positioned in the center under the black bar.

    A screenshot how it looks like in IE7: http://www.puppetbrain.com/temp/website/screenIE7.jpg

    Here’s the link for the page: http://www.puppetbrain.com/temp/website/home.html

    I have put the menu in a wrapper (#navBarContainer) centered and the postion of the menu (ul#navBar) is set to relative. I’ve set the x an y coordinates of the menu.

    Does anybody know what the problem is and how can I fix that?

    Part of the CSS:

    Code:
    html, body{
    font-family: LucidaSans, Arial, Verdana, sans-serif;
    margin:0;
    padding:0;
    height:100%;
    }

    /* header properties */
    #header{
    background-color:#efefef;
    color:#f0f0f0;
    margin: 0;
    height:175px;
    border-bottom: 6px;
    border-bottom-style: solid;
    border-bottom-color: #e31837;
    }
    #bar{
    position:relative;
    width: 100%;
    height:40px;
    margin-bottom: 10px;
    background-image: url(‘img/headerBlack.gif’);
    background-repeat: repeat-x;
    }

    #navBarContainer{
    width: 1016px;
    height: 93px;
    margin: 0 auto;
    }

    ul#navBar{
    width: 900px;
    height: 93px;
    margin:0;
    padding: 0;
    list-style: none;
    position:relative;
    top:82px;
    left:171px;
    }

    ul#navBar li{
    display: inline;
    }

    ul#navBar li a{
    height: 93px;
    float: left;
    text-indent: -9999px;
    }

    ul#navBar li#navBarHome a{
    width: 75px;
    background: url(img/mainMenu.jpg) no-repeat 0px 0px;
    }

    ul#navBar li#navBarInformation a{
    width: 155px;
    background: url(img/mainMenu.jpg) no-repeat -75px 0px;
    }

    HTML:

    Code:

    Welcome to OrienTouch Entertainment. OrienTouch Entertainment is an independent and professional entertainment and events organization bureau which specializes in organizing both traditional and modern Chinese entertainment shows to cater to your explicit wishes.

    moreInfo

    #66418
    Brido
    Member

    Try this.

    Code:
    html, body{
    font-family: LucidaSans, Arial, Verdana, sans-serif;
    margin:0;
    padding:0;
    height:100%;
    }

    /* header properties */
    #header{
    background-color:#efefef;
    color:#f0f0f0;
    margin: 0;
    height:175px;
    border-bottom: 6px;
    border-bottom-style: solid;
    border-bottom-color: #e31837;
    }
    #bar{
    position:relative;
    width: 100%;
    height:40px;
    margin-bottom: 10px;
    background-image: url(‘img/headerBlack.gif’);
    background-repeat: repeat-x;
    }

    h1{
    width: 314px;
    float: left;
    }
    /* end header properties */

    /* main menu */
    a img {
    text-decoration: none;
    border: 0 none;
    }

    #navBarContainer{
    width: 1016px;
    margin: 0 auto;
    position:relative;
    }

    ul#navBar{
    height: 93px;
    list-style: none;
    position:absolute;
    top:82px;
    padding:0;
    margin:0;
    right:0;
    }

    ul#navBar li{
    display: inline;
    }

    ul#navBar li a{
    height: 93px;
    float: left;
    text-indent: -9999px;
    }

    ul#navBar li#navBarHome a{
    width: 75px;
    background: url(img/mainMenu.jpg) no-repeat 0px 0px;
    }

    ul#navBar li#navBarInformation a{
    width: 155px;
    background: url(img/mainMenu.jpg) no-repeat -75px 0px;
    }

    ul#navBar li#navBarProjects a{
    width: 106px;
    background: url(img/mainMenu.jpg) no-repeat -230px 0px;
    }

    ul#navBar li#navBarClients a{
    width: 91px;
    background: url(img/mainMenu.jpg) no-repeat -336px 0px;
    }

    ul#navBar li#navBarContact a{
    width: 105px;
    background: url(img/mainMenu.jpg) no-repeat -427px 0px;
    }

    ul#navBar li#navBarHome a:hover{
    background-position: 0 -93px;
    }

    ul#navBar li#navBarInformation a:hover{
    background-position: -75px -93px;
    }

    ul#navBar li#navBarProjects a:hover{
    background-position: -230px -93px;
    }

    ul#navBar li#navBarClients a:hover{
    background-position: -336px -93px;
    }

    ul#navBar li#navBarContact a:hover{
    background-position: -427px -93px;
    }

    ul#navBar li#navBarHome a.selected{
    background-position: 0 -93px;
    }

    ul#navBar li#navBarInformation a.selected{
    background: url(img/mainMenu.jpg) no-repeat -75px -93px;
    }

    ul#navBar li#navBarProjects a.selected{
    background: url(img/mainMenu.jpg) no-repeat -230px -93px
    }

    ul#navBar li#navBarClients a.selected{
    background: url(img/mainMenu.jpg) no-repeat -336px -93px;
    }

    ul#navBar li#navBarContact a.selected{
    background: url(img/mainMenu.jpg) no-repeat -427px -93px;
    }

    /* ———————— content ———————— */

    h2{
    font-size: 14px;
    font-style: normal;
    color:#878787;
    line-height: 2em;
    width: 785px;
    float:left
    padding:0;
    }

    #mainContent{
    width: 1016px;
    height: 100%;
    margin: 0 auto;
    }

    #welcome{
    width: 940px;
    height: 90px;
    margin: 0 auto;
    }

    #moreInfo{
    width: 114px;
    height: 16px;
    position:relative;
    top:0px;
    left:0px;
    }

    /* ———————— footer ———————— */
    #footer{
    background: #f1f1f1;
    border-top: 1px;
    border-top-style: solid;
    border-top-color: #e4e4e4;
    position: relative;
    height: 47px;
    clear:both;
    }

    #footerText{
    width: 940px;
    margin: 0 auto;
    font-size: 12px;
    color: #bdbdbd;

    margin: 0 auto;
    padding: 0;
    }

    #copyright{
    float:left;
    margin: 0;
    padding: 0;
    }

    #credit{
    float:right;
    margin: 0;
    padding: 0;
    }
    /* end footer */

    #66423
    Totoro
    Member

    Wow Thanks man for the fast solution! :D

    I see that you’ve added position:relative to #navBarContainer. changed the position from ul#navBar from relative to absolute among other things. So the main problem was the absolute and relative definition? With other changes in x an y.

    Much appreciate it. I couldn’t figure it out and was searching all over for tutorials.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.