[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2008
  • Last Modified:

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?


#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>

Open in new window

0
trickyidiot
Asked:
trickyidiot
1 Solution
 
David S.Commented:
The width and height properties don't apply to (non-floated, non-absolutely-positioned) elements with display:inline. Those <a>s need display:block

What happens if a visitor has images disabled in their browser? I use and recommend the Gilder/Levin Method of CSS Image Replacement: http://levin.grundeis.net/files/20030809/alternatefir.html
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now