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
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>
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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 :
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;
}
Premium Content
You need an Expert Office subscription to comment.Start Free Trial