• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 248
  • Last Modified:

Why doesn't my text display?

I am trying to understand why text is not displaying correctly.  I have created a test page that illustrates my problem.  This can be viewed at: Test Page

Sample page, the first box should display 'Title' at the top
Each of the 4 squares should display the word 'Text' at the top.  The only difference is that the 2 boxes on the right do not have a background color set in the style and the two on the left do.  I do not understand why the text 'Title' is not being displayed in the first box.

Any help that you can provide me that explains what I am doing wrong is very much appreciated.

Here is the code that is being used to display the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
ul.thumb {
	list-style: none;
	float: left;
	padding:0;
	margin: 0; 
	width: 560px;
}
ul.thumb1 {
	list-style: none;
	float: left;
	padding:0;
	margin: 0; 
	width: 560px;
}
ul.thumb li {
	margin: 0; padding: 5px;
	float: left;
	position: relative;  
	width: 174px;
	height: 88px;
	height: 128px;
}
ul.thumb1 li {
	margin: 0; padding: 5px;
	float: left;
	position: relative;  
	width: 174px;
	height: 88px;
	height: 128px;
}
ul.thumb li img {
	width: 174px; height: 88px; 
	border: 1px solid #000000;
	padding: 5px;
	background: #f0f0f0;
	position: absolute;
	left: 0; 
	top: 0;
	padding-top:40px;
}
ul.thumb1 li img {
	width: 174px; height: 88px; 
	border: 1px solid #000000;
	padding: 5px;
	position: absolute;
	left: 0; 
	top: 0;
	padding-top:40px;
}

img.notsel
{
	opacity: 0.4;
	filter: alpha(opacity=40);
}

</style>
</head>

<body>
<div class="thumbinfo">
	<ul class="thumb">
		<li>
			<div class="TempName">Title</div>
			<img src="test.png" alt="1" />
		</li>
		<li>
			<div class="TempName">Title</div>
			<img class="notsel" src="test.png" alt="2" />
		</li>
	</ul>
	<ul class="thumb1">
		<li>
			<div class="TempName">Title</div>
			<img src="test.png" alt="1" />
		</li>
		<li>
			<div class="TempName">Title</div>
			<img class="notsel" src="test.png" alt="2" />
		</li>
	</ul>
</div>
</body>
</html>

Open in new window

0
WestCoast_BC
Asked:
WestCoast_BC
1 Solution
 
Omar_El_SerganyCommented:
the image is on top of the text div
you need to add z-index attributed for the image and give it a lower number

modefy the CSS file to be :

ul.thumb li img {
    background: none repeat scroll 0 0 #F0F0F0;
    border: 1px solid #000000;
    height: 88px;
    left: 0;
    padding: 40px 5px 5px;
    position: absolute;
    top: 0;
    width: 174px;
    z-index: -1;
}

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

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