trickyidiot
asked on
ul li a text-indent not working
Trying to replace text with a background image in CSS - I'm assuming the fact that my list is display:inline could be causing the issue
Does anyone know how to fix this?
Does anyone know how to fix this?
#header{
margin: 0;
padding: 0;
height: 85px;
width: 100%;
text-indent: -9000px;
}
#header ul {
margin: 0;
padding: 0;
width: 540px;
list-style: none;
display: inline;
}
#header ul li {
margin: 0;
padding: 0;
width: 175px;
height: 40px;
display: inline;
}
#header ul li a.home{
width: 92px;
height: 32px;
font-size: 33px;
background: #fff url('../images/sprite.gif') 0px 0px no-repeat;
}
#header ul li a.services{
width: 105px;
height: 32px;
font-size: 33px;
background: #fff url('../images/sprite.gif') -105px 0px no-repeat;
}
#header ul li a.aboutUs{
width: 150px;
height: 32px;
font-size: 33px;
background: #fff url('../images/sprite.gif') -255px 0px no-repeat;
}
#header ul li a.contactUs{
width: 160px;
height: 32px;
font-size: 33px;
background: #fff url('../images/sprite.gif') -410px 0px no-repeat;
}
==============
<div id="header">
<ul>
<li><a class="home" href="index.php">Home</a></li>
<li><a class="services" href="services.php">Services</a></li>
<li><a class="aboutUs" href="aboutUs.php">About Us</a></li>
<li><a class="contactUs" href="contactUs.php">Contact Us</a></li>
</ul>
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.