I am using Firefox and have tried for two dfays to figure out why the h3 content is appearing with a 30x padding on the left of the <div>. I have the following code:
CSS-->
div#favorites-well {
background: transparent;
border: 1px solid red;
width: 530px;
}
div#favorites-wrapper {
border: 1px solid green;
padding: 10px 16px 0 30px; //trbl
width: 484px;
}
div.favorites-item {
background-position: top left;
border: 1px solid yellow;
color: #FFFFFF;
display: inline;
float: left;
height: 124px;
margin-right: 8px;
text-align: left;
width: 113px;
}
div.favorites-item-last {
margin-right: 0;
}
div.favorites-item h3 {
border: 1px solid blue;
color: #f6f6f6;
font-size: 9px;
font-style: bold;
line-height: 13px;
padding-top: 65px;
}
HTML:-->
<div id="favorites-well">
<div id="favorites-wrapper">
<div class="favorites-item" style="background-image:url(_graphics/favorites/astheworldturns.png)">
<div class="clear"></div>
<h3>Soap Opera</h3>
</div>
<div class="favorites-item" style="background-image:url(_graphics/favorites/southpark.png)">
<div class="clear"></div>
<h3>Animated</h3>
</div>
<div class="favorites-item" style="background-image:url(_graphics/favorites/smallville.png)">
<div class="clear"></div>
<h3>Current</h3>
</div>
<div class="favorites-item favorites-item-last" style="background-image:url(_graphics/favorites/wonderwoman.png)">
<div class="clear"></div>
<h3>Childhood</h3>
</div>
<div class="clear"></div>
</div>
</div>
NOTE: I do not want the borders in the final display. However, I included them to for myself to see the outlines of each <div> and also to help show others how the <div> are placed.
You can see the Web page image here: http://www.artschneiderheinze.com/boxmodeltemp.jpg
PROBLEM: How can I get the <h3> content (with the blue border) to be aligned left with the favorites-item <div>? Currently there is a 30px space between the two borders, and I cannot figure out why that space exists.
