Solved

ul li a text-indent not working

Posted on 2009-04-13
1
1,991 Views
Last Modified: 2013-11-19
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
Comment
Question by:trickyidiot
1 Comment
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 24134805
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question