Home › Forums › CSS › menu positioning problem in IE7 › Re: menu positioning problem in IE7
Try this.
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 */