Thu, 2007-08-30 14:50
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 |
Fri, 2007-08-31 12:35
#1
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%;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque est sapien, imperdiet id, aliquam et, consectetuer a, nulla. Suspendisse aliquam dapibus velit. Nulla suscipit. Suspendisse venenatis, diam ac egestas commodo, libero ligula tempus risus, sed semper purus orci id odio. Integer sodales, magna a dictum sagittis, urna lectus sodales odio, eu ultrices neque nunc eget tellus. Proin aliquet tempus felis. Nullam imperdiet, elit hendrerit pulvinar aliquet, libero turpis malesuada arcu, vel tempus velit nisl vitae nunc. Mauris varius, tortor in blandit dignissim, ante sem placerat nibh, a viverra dolor ante at nisi. Nullam tincidunt urna eget metus. Curabitur id neque ac lectus porttitor consequat. Integer et magna vitae nisl porta pharetra.
| 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 |
Fri, 2007-08-31 12:54
#2
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!!!
Fri, 2007-08-31 18:35
#3
Fixed
Thanks for letting us know you fixed it 