Problem with a:hover in IE6, 7 and 8

pealo86 · July 15, 2010

I've set in my stylesheet for 3 links to swap their background images when hovered. It's something I've done many times in the past so I can't figure out why it won't work!

First I thought maybe it's because the <a> elements are empty, but I added an and even some text but neither fixed my problem.

Every other browser swaps the images properly, but no version of IE does.

Here is my code (I've made the relevant <a> elements bold):

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="http://asdf.com/new/wp-content/themes/asdf/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="http://asdf.com/new/wp-content/themes/asdf/image/favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="http://asdf.com/new/wp-content/themes/asdf/script/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://asdf.com/new/wp-content/themes/asdf/script/nav-active.js"></script>
<script type="text/javascript" src="http://asdf.com/new/wp-content/themes/asdf/script/opacity-fix/opacity-fix.js"></script>
<title>  Blog  | The asdf</title>
</head>
<body>

<div id="wrapper">
	<div id="header">
[b]<a id="nav-get-in-touch" href="get-in-touch" title="Get in Touch"></a>
<a id="nav-blog-current" href="blog" title="Blog"></a>
<a id="nav-tweet-tweet" href="tweet-tweet" title="Tweet Tweet"></a>[/b]
</div>		<div id="page-blog">
		<div id="content">
																		<div class="post">
						<h1>Not sure about post 4 though</h1>

						<p class="date">15th July</p>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
					</div>
															</div><!--end content-->
		<div id="sidebar">
<h2 id="txt-sidebar-h2"><span>Latest News</span></h2>
<ul>

										<li><a href="http://asdf.com/new/not-sure-about-post-4-though/">Not sure about post 4 though</a></li>
						<li><a href="http://asdf.com/new/post-3-is-good/">Post 3 is good</a></li>
						<li><a href="http://asdf.com/new/smitten-with-mittens/">Smitten with mittens</a></li>
						<li><a href="http://asdf.com/new/as-big-as-a-house-he-was/">As big as a house he was</a></li>
							</ul>
</div><!--end sidebar-->		</div><!--end page-->
</div><!--end wrapper-->

</body>
</html>

CSS:

/* general //////////////////////////////////////////////////////////////////////////*/

* {
margin: 0;
padding: 0;
outline: 0;
border: none;
}

html {
background: #e6e1d3 url('../image/html.jpg') repeat-x;
}

body {
font-size: 11px;
font-family: georgia, constantia, serif;
color: #231F20;
background: url('../image/body.jpg') no-repeat center 0;
}

h1, h2, h3, h4, h5, h6 {
font-size: 18px;
margin-bottom: 10px;
font-weight: normal;
background-position: center 0;
}

h1 {
font-size: 24px;
margin: 0;
color: #871719;
}

h1 span, h2 span, h3 span {
display: none;
}

p {
margin: 10px 0 5px;
line-height: 17px;
}

a {
color: #333;
}

a:hover {
color: #444;
}

#splash {
position: relative;
}

#logo {
position: absolute;
top: 10px;
left: 10px;
}

#nav-get-in-touch, #nav-get-in-touch-current {
top: 11px;
left: 30px;
width: 152px;
height: 79px;
background: url('../image/nav-get-in-touch.png') no-repeat;
padding: 10px 60px 80px 0;
}

#nav-get-in-touch:hover, #nav-get-in-touch-current {
background-image: url('../image/nav-get-in-touch-current.png');
}

#nav-blog, #nav-blog-current {
bottom: 4px;
right: 178px;
width: 245px;
height: 135px;
background: url('../image/nav-blog.png') no-repeat;
padding-left: 50px;
}

#nav-blog:hover, #nav-blog-current {
background-image: url('../image/nav-blog-current.png');
}

#nav-tweet-tweet, #nav-tweet-tweet-current {
right: 1px;
top: 2px;
width: 118px;
height: 92px;
background: url('../image/nav-tweet-tweet.png') no-repeat;
padding-bottom: 60px;
}

#nav-tweet-tweet:hover, #nav-tweet-tweet-current {
background-image: url('../image/nav-tweet-tweet-current.png');
}

#txt-sidebar-h2 {
background: url('../image/txt-sidebar-h2.gif') no-repeat;
width: 116px;
height: 23px;
color: #7EA885;
}

#txt-h1-get-in-touch {
background: url('../image/txt-h1-get-in-touch.gif') no-repeat;
width: 256px;
height: 30px;
margin: 0 auto;
}

#txt-h1-tweet-tweet {
background: url('../image/txt-h1-tweet-tweet.gif') no-repeat;
width: 327px;
height: 39px;
margin: 0 auto;
}

#txt-h1-tweet-tweet img {
position: relative;
left: 115px;
bottom: 7px;
}

.date {
color: #7EA885;
font-size: 14px;
margin-top: 5px;
}

.alignleft {
float: left;
margin: 0 10px 10px 0;
}

.alignright {
float: right;
margin: 0 0 10px 10px;
}





/* div id //////////////////////////////////////////////////////////////////////////*/

#wrapper-splash {
width: 750px;
position: relative;
margin: 0 auto;
}

#wrapper {
width: 750px;
margin: 0 auto;
}

#page, #page-blog {
width: 590px;
margin: 5px 50px 50px;
padding: 20px 30px;
background: #E6E1D3;
overflow: auto;
min-height: 380px;
}

#page {
text-align: center;
}

#page .inner-blog {
background: url('../image/page-inner.gif') repeat-y 425px 0;
}

#header {
position: relative;
height: 230px;
}

#header a {
position: absolute;
}

#content {
width: 400px;
float: left;
border-right: #7EA885 solid 1px;
padding-right: 25px;
}

#content-get-in-touch {
font-size: 18px;
color: #871719;
}

#content-get-in-touch a {
color: #871719;
}

#content-get-in-touch .address {
color: #231F20;
font-size: 13px;
}

#twitter {
width: 425px;
margin: 10px auto;
font-size: 13px;
}

#twitter h2 {
color: #871719;
margin-bottom: 5px;
}

#twitter li {
margin-bottom: 20px;
}

#sidebar {
float: right;
width: 150px;
}

#sidebar ul {
margin-top: 32px;
}

#sidebar ul li a {
text-decoration: none;
}




/* div class //////////////////////////////////////////////////////////////////////////*/

.post {
margin-bottom: 30px;
}



/* list //////////////////////////////////////////////////////////////////////////*/

ul {
list-style: none;
}

ul li {
line-height: 17px;
}

ul .last {
border: none !important;
}

The styles that end in -current work fine (e.g. #nav-blog-current), but the :hover styles do not.

Does anybody know what might be wrong?

Thanks

sw9 · July 19, 2010

did you try a

display: block;

on your a's?

pealo86 · July 19, 2010

Yup, tried that. Tried so many different combos / tweaks and none worked!

I tried setting the background to flat colours rather than images and they worked fine!? For some reason the backgrounds refuse to swap when they're images!?

Man I HATE ie!

Sign In

Problem with a:hover in IE6, 7 and 8

Recommended Posts

pealo86

Link to comment

Share on other sites

sw9

Link to comment

Share on other sites

pealo86

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information