...

View Full Version : IE workaround for this...?



tefuzz
02-25-2009, 12:15 AM
I have a navigation bar i am working on for a website...the link is http://dpserror.com the original code was created by some CSS creator, but i since edited and tweaked it to work how i want (im new to CSS, haven't designed a website in around 10 years)

works nicely in firefox, but not so in IE, is there a "hack" (yuck) to make this work with IE?, something i just might be missing? here is the code from the navbar:



/*************************************************
NAVIGATION
***************************************************/

#navbar {
margin:auto;
margin-top: 30px;
padding: 0px;
height: 35px;
width: 845px;
text-align: center;
background-color: #F0E8CE;
clear: both;
vertical-align: middle;
}

.nav {
margin: auto;
padding:0;
height:35px;
width:auto;
display:block;
background:url('img/topMenuImages.png') repeat-x;
text-align: center;
}

.nav li {
padding:0;
margin: auto;
list-style:none;
display:inline;


}

.nav li a {
float:left;
padding-left:20px;
display:block;
color:rgb(0,0,0);
text-decoration:none;
font:12px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
cursor:pointer;
background:url('img/topMenuImages.png') 0px -30px no-repeat;
width: auto;
}

.nav li a span {
line-height:35px;
float:left;
display:block;
padding-right:20px;
background:url('img/topMenuImages.png') 100% -30px no-repeat;
width: auto;
}

.nav li a:hover {
background-position:0px -90px;
color:rgb(255,255,255);
}

.nav li a:hover span {
background-position:100% -90px;
}

.nav li a.active, .nav li a.active:hover {
line-height:35px;
font:12px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
background:url('img/topMenuImages.png') 0px -90px no-repeat;
color:rgb(255,255,255);
}

.nav li a.active span, .nav li a.active:hover span {
background:url('img/topMenuImages.png') 100% -90px no-repeat;
}

Fisher
02-25-2009, 02:49 AM
Right from the horses mouth: http://support.microsoft.com/kb/294714

One possible fix:http://24ways.org/2007/supersleight-transparent-png-in-ie6

Someone might come along with a better way.

tefuzz
02-25-2009, 11:18 AM
Right from the horses mouth: http://support.microsoft.com/kb/294714

One possible fix:http://24ways.org/2007/supersleight-transparent-png-in-ie6

Someone might come along with a better way.

oh lord, i didnt even think it was a png problem...easy fix then :D thanks

EDIT: it is not a PNG problem alone. I changed over to a .gif for a minute to see, but it is the same result. just a small portion of the hover color shows up to the left of the "icon" image. i think it has something to do with IE not being able to position the hover image correctly...any ideas? the icon image itself s only 30x30, but the hover doesnt show at any point beyond it either...

Fisher
02-25-2009, 01:04 PM
Try changing these 2 pieces of code:

CSS:

#navbar {
margin: 0 auto;
height: 35px;
width: 840px;
clear: both;
background:#F0E8CE;
}
#nav {
padding:0;
height:35px;
text-align: center;
display:inline;
}
#nav li, #nav a {
height:35px;
width:140px;
display:inline;
float: left;
list-style:none;
}
#nav a {
color:#000;
text-decoration:none;
font:12px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
background:url(topMenuImages.png) 0px 0px no-repeat;
}
#nav li a:hover {
background:url(topMenuImages.png) 0 -90px no-repeat;
color: #FFF;
}
#nav img {
float:left;
}
#nav span {
float:left;
margin:5px;
}

HTML:

<ul id="nav">
<li> <a href="http://dpserror.com/index.php?p=home" target="_self"><img src="home.gif" alt="home" width="30" align="top" border="0" height="30" /><span>Home</span></a></li>
<li><a href="http://dpserror.com/index.php?p=about" target="_self"><img src="about.png" alt="about us" width="30" align="top" border="0" height="30" /><span>About Us</span></a></li>
<li><a href="http://dpserror.com/index.php?p=students" target="_self"><img src="students.png" alt="students" width="30" align="top" border="0" height="30" /><span>Students</span></a></li>
<li><a href="http://dpserror.com/index.php?p=tutors" target="_self"><img src="chalk.png" alt="tutors" width="30" align="top" border="0" height="30" /><span>Tutors</span></a></li>
<li><a href="http://dpserror.com/index.php?p=faq" target="_self"><img src="faq.png" alt="faq" width="30" align="top" border="0" height="30" /><span>FAQ</span></a></li>
<li><a href="http://dpserror.com/index.php?p=contact" target="_self"><img src="envelope.png" alt="contact us" width="30" align="top" border="0" height="30" /><span>Contact Us</span></a></li>
</ul>

Does this achieve what you mean?

Edit: Unless you plan on changing the picture with something fancier, you don't really need it. You could just use a background colour instead:

background: #6CC;instead of
background:url(topMenuImages.png) 0 -90px no-repeat;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum