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 Re: menu positioning problem in IE7

#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 */