My image sprite works fine as long as I delete my hover text links on the same css page. The hover in the image sprite and the hover in the text link style seem to be conflicting. How do I get the text link styles back? Do I use a separate css for the text link, will it still conflict?
HTML
><div id="page-bg"><img src="x" width="100%" height="100%" /></div>
<div id="container">
<div id="header1">
<ul id="navlist1">
<li id="login"><a href="x"></a></li>
<li id="getmail"><a href="x"></a></li>
<li id="quotebtn"><a href="x"></a></li>
</ul>
</div>
</div>
CSS
>body { color:#333; font-size: 9px; }
#page-bg {
position:fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#container {
position: relative;
background: #C35A26;
width: 900px;
font-family: Arial, Helvetica, sans-serif;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
#header1 {
width: 900px;
height: 232px;
position: relative;
background-image:url(x)
}
#navlist1 {position:relative;}
#navlist1 li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist1 li, #navlist1 a{height:44p开发者_开发问答x;display:block;}
#login{left:0px;width:94px;}
#login{background:url('x') 0 0;}
#login a:hover{background: url('x') 0 -363px;}
#getmail{left:94px;width:93px;}
#getmail{background:url('x') -94px 0;}
#getmail a:hover{background: url('x') -94px -363px;}
#quotebtn{left:775px;width:125px;}
#quotebtn{background:url('x') -775px 0;}
#quotebtn a:hover{background: url('x') -775px -363px;}
a {
font-family: Arial, Helvetica, sans-serif;
font-size:0.75em;
color: #900;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #900;
}
**a:hover {
text-decoration: underline;
color: #F00;**
}
a:active {
text-decoration: none;
color: #F60;
I got it to work now. All I did was open a blank page and added css to the page properties for links and headers, etc., to see how they layed out the css and re-arranged my css to be like the one that dreamweaver makes as far as where the tags are in order. Anyway, it fixed the problem.
精彩评论