Avatar of WestCoast_BC
WestCoast_BC
Flag for Canada asked on

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

HTMLCSSColdFusion Language

Avatar of undefined
Last Comment
Omar_El_Sergany

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Omar_El_Sergany

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23