Skip to main content

Forums

This topic contains 2 replies, has 2 voices, and was last updated by  iosman123 5 days, 17 hours ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #294140

    iosman123
    Participant

    Hello,

    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.

    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;

    }

    thanks
    iosman

    #294142

    Paulie_D
    Moderator

    We can’t tell anything from some unrelated CSS and no HTML

    I’d suggest a Codepen.io demo but IE7 is not supported ANYWHERE that I am aware of. Its a dead browser.

    Is this a problem in newer versions of IE?

    #294632

    iosman123
    Participant

    Thanks my issue has been fixed.


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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star