3 replies [Last post]
amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 10 years 5 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

Hola fellow css'ers! Yet again, IE has placed a hold on a beautiful drop down menu Sad 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 Smile 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.

AttachmentSize
index.html2.04 KB
program.gif7.14 KB

@}->-- Amanda

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 10 years 5 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

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. Sad

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.

AttachmentSize
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

@}->-- Amanda

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 10 years 5 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

Problem solved Safari

Problem solved Smile 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!!!

@}->-- Amanda

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Fixed

Thanks for letting us know you fixed it Wink

Verschwindende wrote:
  • CSS doesn't make pies