css IE problem
This is my first site in CSS. I am having some trouble getting this site to work in IE. I'm running IE7. I tried to combine a rollover image based menu with a dropdown menu, didn't work too well. I had to use alot of classes to get it to work, is that going to cause any problems? What I'm most concerned about is the main div won't go behind the dropdown menu in IE. Works fine in FF. Here's a copy of code and the style sheet. Help! ( won't let me post a link - www (dot) joeymarino (dot) com )
[HTML]/* mac hide \*/
html, body {height:100%;margin:0;padding:0}
/* end hide*/
body {
padding:0;
margin:0;
background:#d1d2d4;
background-image:url(images/borderleftbg.gif);
background-repeat:repeat-y;
color: #000000;
}
#outer{
min-height:100%;/*for mozilla as IE treats height as min-height anyway*/
margin-left:150px;
background:white;
margin-bottom:-66px;
color: #000000;
}
* html #outer{height:100%;}/* ie 3 pixel jog*/
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:190px;
background:#d1d2d4;
background-image: url("images/bgtop.gif") ;
overflow:hidden;
color: #000000;
z-index:1
}
#header p {white-space:nowrap;margin:0}
#logo{
background-image:url(images/3Dlogo.gif);
background-repeat:no-repeat;
width:240px;
height:180px;
overflow:hidden;
position:absolute;
left:0;
top:0;
z-index:10;
}
#title{
background-image:url(images/titlebar.gif);
background-repeat:no-repeat;
width:560px;
height:180px;
overflow:hidden;
/*margin-left:33.33%;*/
position:absolute;
left:240px;
top:0;
z-index:10;
}
#headerbase{
background:url(images/bordertop.gif) no-repeat 0 0;
width:200px;
height:10px;
overflow:hidden;
position:absolute;
left:0;
top:180px;
z-index:4
}
#left {
position:relative;/*ie needs this to show float */
width:148px;
float:left;
margin-left:-149px;/*must be 1px less than width otherwise won't push footer down */
padding-top:190px;/*needed to make room for header*/
left:-1px;/* line things up exactly*/
background:transparent;
}
* html #left {margin-right:-3px}/* three pixel jog*/
#left p {padding:3px;}
#menu{
z-index:6;
}
#footer {
font-size:10px;
width:100%;
clear:both;
height:66px;
background-color: #d1d2d4;
background-image: url("images/borderbotbg.gif");
background-repeat: repeat-x;
color: #000000;
text-align:center;
position:relative;
}
#footer-top{
background:url(images/borderbot.gif) no-repeat 0 0;
width:200px;
height:10px;
overflow:hidden;
position:absolute;
left:0;
top:0px;
z-index:4
}
#naa{
position:absolute;
bottom:0;
left:20px;
}
#cai{
position:absolute;
bottom:0;
left:110px;
}
#rltr{
position:absolute;
bottom:0;
right:120px;
}
#eho{
position:absolute;
bottom:0;
right:20px;
}
#footer p{padding-top:15px}
#clearheader{height:190px;}/*needed to make room for header*/
#clearfooter{clear:both;height:50px;}/*needed to make room for footer*/
p {margin-top:0}/*clear top margin for mozilla*/
* html #centrecontent {height:100%;margin-bottom:12px;z-index:-1;overflow:auto}/* combat IE's 3 pixel jog */
html>body #main{
position:absolute;
left:155px;
right:0px;
top:181px;
bottom:57px;
overflow:auto;
background:none;
z-index:5;
clear:both
}
* html #main{
position:absolute;
height:100%;
z-index:5;
clear:both
}
ul.ro{
padding:0;
margin:0;
list-style:none;
z-index:7;
}
li.ro {
width:147px;/*size of image*/
height:33px;/* size of image*/
background:url("images/menu_dn.gif") no-repeat left top;/* this holds the rollover state of the image1*/
z-index:7;
}
a.ro {
display:block;
width:147px;
height:33px;
z-index:7;
}
li a.ro {
padding-left:10px;
padding-top:10px;
font:14px arial;
font-weight:bold;
color:#fff;
text-decoration:none;
background:url("images/menu_up.gif") no-repeat left top; /* this holds the normal state of the image1*/
z-index:7;
}
ul a:hover.ro{background:transparent;z-index:7; }
/* on hover we just hide the anchor and let the image underneath show through.*/
ul.sm {
margin: 0;
padding: 0;
list-style: none;
width:146px;
z-index:6;
}
ul li.sm {
position: relative;
width:148px;
border: 1px solid #000;
z-index:6;
}
/* keep folowing styles together..........................*/
* html ul ul.sm {
margin-left:-16px;/* ie5 fix */
voice-family: "\"}\"";
voice-family: inherit;
z-index:6;
}
* html ul li.sm {float:left; position:absolute;/* hide float from ie5*/}
* html ul ul.sm {
width:148px;
w\idth:146px;
voice-family: "\"}\"";
voice-family: inherit;
z-index:6;
}
* html ul ul.sm {margin-left:0;z-index:6; /* hide margin from ie5*/}
/* keep above styles together .............*/
/*ul li.sm {position:relative}*/
li ul.sm {
position: relative;
top: -38px;
left:-999em;
z-index:6;
}
/* Styles for Menu Items */
ul li a.sm {
display:block;
font:12px arial;
font-weight:bold;
text-decoration: none;
color: #FFF;
background: #495fd7; /* IE6 Bug */
line-height:2em;
height:2em;
padding:0 5px 0 5px;
z-index:6;
}
/* this sets all hovered lists to white */
li:hover a.sm,
li.over a.sm,
li:hover li a:hover.sm,
li.over li a:hover.sm {
color: #495fd7;
background-color: #fff;
z-index:6;
}
/* set dropdown to default */
li:hover li a.sm, li.over li a.sm {
color: #FFF;
background-color: #495fd7;
z-index:6;
}
li ul li a.sm { z-index:6; } /* Sub Menu Styles */
li:hover ul.sm,
li.over ul.sm { left:147px; z-index:6; } /* The magic */
[/HTML]
|
Linear Mode
