I need help building a news box on a web page. The box will have a gif graphic for the (classic round top corners), middle will be text , and the bottom will be a gif with rounded corners.
I tried building it using a table formatted with CSS. It looked good in IE7 but did not look good in FF 2. The graphics do not meet up with the edge of the content cell. Almost seams like I am missing a margin or padding somewhere.
1.) Is there a way to do it without a table?
2.) What causes the image to look bad in FF?
Here is the link and code:
http://www.flintstreet.net/als/index2.htm<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>ALS TDI | The world's largest ALS research center</title>
<style type="text/css">
#Forum {
float: right;
background: white;
width: 287px;
}
table.tblTable {width:287px;}
td.tdForum {
border-right: 5px solid #AD6BCC;
border-left: 5px solid #AD6BCC;
background-image: url(images/RecentnewsBG.jp
g);
background-repeat: repeat-x;
}
td.TopNews {
height: 23px;
padding: 0px 0px 0px 0px;
margin: 10px 10px 10px 10px;}
img.tdTop
{
padding: 0px 0px 0px 0px;
margin: 0px 0px -8px 0px;
}
img.tdRecent
{
padding: 0px 0px 0px 0px;
margin: -8px 0px -8px 0px;
}
img.tdBottomBox
{
padding: 0px 0px 0px 0px;
margin: -20px 0px -8px 0px;
}
</style>
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(p
arseInt(ap
pVersion)=
=4)) {
document.MM_pgW=innerWidth
; document.MM_pgH=innerHeigh
t; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_p
gW || innerHeight!=document.MM_p
gH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</head>
<body bgcolor="#000099">
<div id="sidebar">
<table class="tblTable">
<tr>
<td clas="TopNews" height="6"><img class="tdTop" src="images/top_story.gif"
width="287" height="23"></td>
</tr>
<tr>
<td class="tdForum">
USA Today - 11 hours ago
Beating the Boston Red Sox at Fenway Park in October is difficult enough. Having to do it against one of baseball's top postseason pitchers makes the task ...
</td>
</tr>
<tr>
<td><img class="tdRecent" src="images/recent_news.gi
f"></td>
</tr>
<td class="tdForum">
USA Today - 11 hours ago
Beating the Boston Red Sox at Fenway Park in October is difficult enough. Having to do it against one of baseball's top postseason pitchers makes the task ...
</td>
<tr>
<td><img class="tdBottomBox" src="images/bottom_box.gif
"></td>
</tr>
</table>
</div>
</body>
</html>
