CSS issues with IE

[Ruth.Adele]

Hi all,

I am a newbie to web designing (this is my first job!) and i'm having a few issues with IE (Firefox, Safari, Opera all work fine)
This is also the only forum i frequent, so if anyone knows any good web developing forums, i'd love a link to it!

So - my issue is: i have used css to make hover links, here's the css i've used:

#footer {
width: 843px;
height: 58px;
clear: both;
overflow: hidden;
}

#footer ul {
margin: 0px;
padding: 0px;
}

#footer li {
float: left;
}

#footer li a {
display: block;
height: 58px;
padding: 58px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}

#footer li a:hover {
background-position: 0 -58px;
}

This is what i get in firefox:

And this is what i get in IE:

Does anyone know a solution to this?
Thanks,
Ruth.

 

[zhoom]

What version of IE are you using..? I think the problem is with the IE and if you are using IE6 it is really not good. In fact, it is already face out.

 

[waynede]

Could you please supply a url for this as it will be easier for myself as well as others to test the page and try and help fix the problem.

 

[PixelPusher]

Ruth it would be a little easier to diagnose the problem if we could see a live page (actual code) but here is my first guess/thought:

1. Don't add all the padding to the links in the list, add it to the list.
2. Padding applies to internal content, margin adjust outer spacing; i think margin would be more appropriate in this situation
3. No need to define the height of the list; a list will only be a tall as its contents
4. In most cases, there is no need to wrap a list in a div, they are both block-level elements
5. Use line height to define the height of your links (great solution if text is only one line)

It looks to me like you are trying to add an image over the text of the links, so you can have a cool looking font. Problem is the cool text is image based, and you still want to have the anchor text in the link for seo and web crawlers. Here is your solution (my favorite): Gilder/Levin method. It uses a empty span tag to place an image over your text. Why do this? Here is why:

• You get the look you want (cool image text)
• You have real anchor text in your links
• Web crawlers/site index bots are happy
• Win win situation

Here is the setup:

ul#footer {
width: 843px;
clear: both;
margin:58px 0 0 0;
padding: 0;
overflow:hidden;
}

ul#footer li {
float: left;
}

ul#footer li a {
position:relative;
display: block;
line-height: 58px;
text-align:center;
text-decoration:none;
font:normal 10pt Arial, sans-serif;
color:#dedede;
padding: 0;
margin:0;
}

/* General setting for a span tags in links */
ul#footer li a span {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

/* Change span image for each link...make one for each link */
ul#footer li a.home span {
background:transparent url(images/homeImg.png) 0 0 no-repeat;
}

HTML

<ul id="footer">
   <li>
      <a href="home.php" class="home"><span></span>home</a></li>
   <li>
      <a href="about.php" class="about"><span></span>home</a></li>
   <li>
      <a href="collections.php" class="collect"><span></span>home</a></li>
   <li>
      <a href="membership.php" class="member"><span></span>home</a></li>
   <li>
      <a href="contact.php" class="contact"><span></span>home</a></li>
</ul>

If this is too complicated for you I understand. To fix your problem with the code you have you need to set the background position back to zero when the mouse hovers out. Like so:

background-position: 0 0;

Good luck, let me know if you have any questions.