开发者

css image sprite hover background conflicts with my text hover

开发者 https://www.devze.com 2023-03-02 01:07 出处:网络
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

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消