My browser is IE6.
[UPDATE: You can view the template live at this link: ]
I have a template that utilizes 3 <a></a> tags to change the background position and create a button effect.
This is how it appears in all browsers
https://i.sstatic.net/zY5JH.png
This is how it appears in IE6:
https://i.sstatic.net/33xRq.png
Here is the CSS code:
#featured-nav {
width: 944px;
height: 131px;
background: url(/images/site/shadow.gif) bottom center no-repeat;
}
#featured-nav a {
height: 35px;
float: left;
cursor: pointer;
display: block;
padding: 47px 20px 20px 120px;
font-size: 12px;
line-height: 16px;
text-decoration: none;
font-weight: normal;
color: #777;
}
#featured-nav a span {
margin-top: 10px;
height: 30px;
width: 150px;
font-size: 12px;
text-transform: uppercase;
color: #5aa0b1;
font-weight: bold;
position: absolute;
top: 12px;
left: 120px;
}
#featured-nav a img {
position: absolute;
left: 40px;
top: 23px;
}
#featured-nav a.left {
background: url(/images/site/leftbutton.png) top left no-repeat;
width: 178px;
overflow: hidden;
position: relative;
}
#featured-nav a.left:hover, #featured-nav a.left.activeSlide { background: url(/images/site/leftbutton.png) bottom left no-repeat; }
#featured-nav a.middle {
background: url(/images/site/middlebutton.png) top left no-repeat;
width: 174px;
overflow: hidden;
position: relative;
}
#featured-nav a.middle:hover, #featured-nav a.middle.activeSlide { background: url(/images/site/middlebutton.png) bottom left no-repeat; }
#featured-nav a.right {
background: url(/images/site/rightbutton.png) top left no-repeat;
width: 172px;
overflow: hidden;
position: relative;
}
#featured-nav a.right:hover, #featured-nav a.right.activeSlide { background: url(/images/site/rightbutton.png) bottom left no-repeat; }
.content-wrapper {
width: 678px;
overflow: hidden;
margin-top: 10px;
margin-left: 8px;
}
Any suggestions?
Appreciate your help.