Menu
Weird bug. I’ve got two divs floating left inside a wrapper. Some of the text in the wrapper is disappearing “Skill Title” and “Media Title.” If you mouse over one of them it shows up.
The clearing div is what’s causing the text to disappear, but I can’t figure out why. The fix is to not clear the floats and put overflow:hidden in the wrapper, but it’s a dirty trick. I’d like to figure out why the clearing div is making the text disappear. Any ideas anyone?
I put the styles inline in the divs to make it easy to see what’s going on:
<div style=”margin-top:10px; background-color:#5E8BFF; padding:5px;”>
<div style=”font-weight:bold; font-size:16px; color:#ffffff;”>Skill Title</div>
<div style=”background-color:#ffffff; margin-top:5px;”>
<div style=”padding:5px 0px 0px 5px;”>
<a href=”#” style=”display:block; font-size:14px;”><b>Media Title</b></a>
</div>
<div style=”background-color:#ffffff; float:left; padding:5px; width:100px; text-align:center;”>
<a href=”#”><img src=”images/media_noimage.gif” style=”border:0px;” alt=”” /></a>
<div style=”margin-top:5px;”><b>Media Type:</b> Image</div>
</div>
<div style=”background-color:#ffffff; float:left; padding:5px; width:448px;”>
<!– Limit to 600 characters –>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam eu ante id ligula vulputate tincidunt. Sed libero nisi, pretium sit amet, pellentesque vitae, pretium vitae, lectus. Aliquam at pede in leo sagittis bibendum. Quisque euismod felis at tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ut leo eget purus iaculis pellentesque.
</div>
<div style=”clear:both; height:0px;”><!– –></div>
</div>
</div>
Thanks!
By the way, the site I’m working on is [URL=”http://www.skillwho.com”]www.skillwho.com