Forum Moderators: not2easy
One of the weird things is that it slides underneath the text (.text) but above the grey background.
The space between the grey header and the black line is also different in Opera and Firefox.
I'm not sure what i should do about that. I thought of changing the margin/padding to create more distance but that will also affect IE in which it looks fine... So Any idea's...?
required CSS code
#content {
margin-left: 181px;
margin-right: 162px;
margin-top: 10px;
padding: 5px 5px 0 5px;
background-color: #FFFFFF;
}
#contentfeatured {
border-top: 1px solid #000000;
height: 1px;
padding: 5px 0 5px 0;
}
.text {
font: bold 12px, Arial, Helvetica, sans-serif;
height: 15px;
color: #1A1A1A;
padding: 5px 0px 5px 10px;
background-color:#F3F3F3;
margin: 5px 0px 5px 0px;
}
#contentbox {
margin: 0 0 10px 0;
background-color: #FFFFFF;
}
HTML Code
<div id="contentfeatured">
<div class="text">Featured Travel Blog - <span class="boldbrown">My Trip in Africa </span></div>
</div>
<table width="405" height="40" border="0" cellpadding="0" cellspacing="0" id="contentbox">
<tr>
<td width="350" height="10" valign="top"><table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="136" height="10"><span class="author">Author:</span> <span class="authorname">Tijmen</span></td>
<td width="214"><span class="where">Where:</span> <span class="wherelocation">New Zealand</span></td>
</tr>
</table></td>
<td width="55" rowspan="2" align="right"><img src="images/blogicon.jpg" width="20" height="29" hspace="10" />
</td>
</tr>
<tr>
<td height="10"><table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="136" height="10"><span class="views">Views:</span> <span class="numviews"> 2353</span></td>
<td width="214"><span class="update">Last update:</span> <span class="lastupdate">02-05-2005
</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2"><table width="405" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="136"><img src="images/ausbeach.jpg" width="116" height="78" class="pics" /></td>
<td width="269" valign="top" class="contentxt">Donec mattis ipsum. Donec mattis ipsum.<br />
<span class="boldbrownline">Read more
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
The boxes are working okay now, but since i removed the 15px height from the .text the grey background occasionaly dissapears in IE...
