asked on
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:
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>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 1 Comment.
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 1 Comment.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.