Hola fellow css'ers! Yet again, IE has placed a hold on a beautiful drop down menu Works in everything... even safari on the mac... and safari on pc... just not IE 6 or 7. Here's the code:
Untitled Document
.nav-bar, .nav-bar ul {
padding: 0;
margin: 0;
list-style: none;
font-size: 12px;
}
.nav-bar a {
color: #625e39;
text-decoration: none;
display: block;
}
.nav-bar a:hover {
color: #ffffff;
text-decoration: none;
display: block;
}
.nav-bar li {
float: left;
width: 152px;
}
.nav-bar li ul {
margin-left: 5px;
background-color: #e1ded4;
border: 3px solid #cec9bc;
border-top: none;
position: absolute;
width: 152px;
left: -999em;
}
.nav-bar ul a {
padding: 5px;
}
.nav-bar li:hover ul {
left: auto;
}
.nav-bar li:hover ul, .nav-bar li.sfhover ul {
left: auto;
}
.nav-bar li ul li:hover {
background-color: #97957d;
}
/* The Holly Hack */
* html .nav a { height: 1%; }
/*-------Rollover Images-----*/
#program-link a.main-nav {
background: url('program.gif') no-repeat;
width: 168px;
min-height: 38px;
text-indent: -9999px;
}
#program-link a.main-nav:hover {
background-position: 0px -38px;
}
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i
I'm being good and even attaching the images and the file to make this easier I realize there's a good chance it has something to do with IE not liking hovers on anything but links, but it's working on the main image... so... not sure what's going on. Oh, and to describe the problem: basically, the menu isn't showing up at all.
Attachment | Size |
---|---|
index.html | 2.04 KB |
program.gif | 7.14 KB |
Just as a note--I've found
UPDATE*********
I've now gotten everything working in every browser except Safari (for mac) On Safari, the drop down is appearing farther left than it's parent li. I really need help with this one! I've spent all day on the silly menu... and just when i think I've gotten all the kinks worked out, Safari dies on me.
Untitled Document
#nav-bar, #nav-bar ul {
clear: both;
padding: 0;
margin: 0;
list-style: none;
font-size: 12px;
}
/*------------------*/
#nav-bar {
overflow: hidden;
background: url('images/navBar.gif') no-repeat;
width: 938px;
height: 38px;
padding: 0px;
text-align: left;
margin: 0px auto;
}
#nav-bar li {
float: left;
padding-left: 50px;
*position: relative;
}
#nav-bar li ul li{
padding: 0px;
}
#nav-bar li a {
height: 38px;
padding: 0px;
margin: 0px;
}
#nav-bar a {
color: #625e39;
text-decoration: none;
display: block;
}
#nav-bar ul a {
font-size: 11px;
padding: 5px;
width: 142px;
margin: 0px;
}
#nav-bar a:hover {
color: #ffffff;
text-decoration: none;
display: block;
}
#nav-bar li ul {/* second-level lists */
position: absolute;
margin-left: 5px;
background-color: #e1ded4;
border: 3px solid #cec9bc;
border-top: none;
width: 152px;
left: -999em;/* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav-bar li:hover ul, #nav-bar li.sfhover ul {
left: auto;
}
#nav-bar ul li:hover, #nav-bar ul li.sfhover {
background-color: #97957d;
}
#nav-bar li.request-info {
margin-right: 40px;
float: right;
}
/*-------Rollover Images-----*/
#program-link {
width: 168px;
}
#program-link a.main-nav {
background: url('images/program.gif') no-repeat;
width: 168px;
min-height: 38px;
text-indent: -9999px;
}
#program-link a.main-nav:hover {
background-position: 0px -38px;
}
#home-link a {
background: url('images/home.gif') no-repeat;
width: 65px;
text-indent: -9999px;
}
#home-link a:hover {
background-position: 0px -38px;
}
#contact-link a{
background: url('images/contact.gif') no-repeat;
width: 91px;
text-indent: -9999px;
}
#contact-link a:hover {
background-position: 0px -38px;
}
#request-info-link a{
background: url('images/requestinfo.gif') no-repeat;
width: 178px;
text-indent: -9999px;
margin-left: 220px;
}
#request-info-link-active a{
background: url('images/requestinfo.gif') no-repeat;
width: 178px;
text-indent: -9999px;
margin-left: 220px;
background-position: 0px -38px;
}
#request-info-link a:hover {
background-position: 0px -38px;
}
*:first-child+html #nav-bar {
height: 1%;
}
*:first-child+html #nav-bar li {
height: 1%;
}
Attachment | Size |
---|---|
contact.gif | 4.2 KB |
home.gif | 3.19 KB |
navbar.gif | 15.04 KB |
program.gif | 7.14 KB |
requestInfo.gif | 7.3 KB |
index.html | 4.51 KB |
Problem solved Safari
Problem solved Safari didn't like the padding I was using to space the li's so I just changed it to margin and it fixed it!!!
Fixed
Thanks for letting us know you fixed it