| AN-net |
01-29-2006 06:32 PM |
html problems in FF and IE
1 Attachment(s)
ok well this design is somehow getting messed up in both. i checked the code and it looks fine. it even validates out except for the alt's for images.
FF:
even if i add <br>'s under the news table it still doesnt add space.
IE: it overlaps the tables, placing the forums table over the gallery table.
my code:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pilot Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
body
{
margin: 0% 5% 0% 5%;
font: normal normal normal 10pt sans-serif, verdana, geneva, lucida, 'lucida grande', arial, helvetica;
}
.header
{
background-color: #333333;
color: #FFFFFF;
font-family: sans-serif;
}
.logo
{
background-color: #000000;
font-size: 20px;
font-weight: bold;
vertical-align: bottom;
}
.mainnav
{
background-color: #000000;
font-weight: bold;
font-size: 13px;
text-align: center;
}
.secondnav
{
background-color: #333333;
color: #FFFFFF;
width: 100%;
font-family: sans-serif;
}
.secondnav_alt1
{
background-color: #000000;
font-size: 15px;
font-weight: bold;
}
.secondnav_news
{
background-color: #000000;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.secondnav_news hr
{
width: 80%;
height: 5px;
color: #0099CC;
background-color: #0099CC;
border: none;
}
.secondnav_forums
{
background-color: #000000;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.secondnav_forums hr
{
width: 80%;
height: 5px;
color: #009933;
background-color: #009933;
border: none;
}
.secondnav_events
{
background-color: #000000;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.secondnav_events hr
{
width: 80%;
height: 5px;
color: #FF6600;
background-color: #FF6600;
border: none;
}
.secondnav_directory
{
background-color: #000000;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.secondnav_directory hr
{
width: 80%;
height: 5px;
color: #660099;
background-color: #660099;
border: none;
}
.secondnav_journals
{
background-color: #000000;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.secondnav_journals hr
{
width: 80%;
height: 5px;
color: #003399;
background-color: #003399;
border: none;
}
.secondnav_gallery
{
background-color: #000000;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.secondnav_gallery hr
{
width: 80%;
height: 5px;
color: #CC0000;
background-color: #CC0000;
border: none;
}
.secondnav_reviews
{
background-color: #000000;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.secondnav_reviews hr
{
width: 80%;
height: 5px;
color: #990099;
background-color: #990099;
border: none;
}
.secondnav_tutorials
{
background-color: #000000;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.secondnav_tutorials hr
{
width: 80%;
height: 5px;
color: #009999;
background-color: #009999;
border: none;
}
.secondnav_premium
{
background-color: #000000;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.secondnav_premium hr
{
width: 80%;
height: 5px;
color: #999900;
background-color: #999900;
border: none;
}
.tborder
{
background-color: #333333;
border: 1px solid #000000;
color: #FFFFFFF;
}
.tcat
{
background-color: #000000;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
text-align: left;
vertical-align: bottom;
font-family: sans-serif;
}
.tcat_news
{
color: #0099CC;
font-size: 18px;
font-weight: bold;
text-align: left;
vertical-align: bottom;
font-family: sans-serif;
}
.tcat_gallery
{
color: #CC0000;
font-size: 18px;
font-weight: bold;
text-align: left;
vertical-align: bottom;
font-family: sans-serif;
}
.tcat_forums
{
color: #009933;
font-size: 18px;
font-weight: bold;
text-align: left;
vertical-align: bottom;
font-family: sans-serif;
}
.thead
{
background-color: #666666;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
text-align: left;
font-family: sans-serif;
}
.thead_alt
{
background-color: #999999;
color: #FFFFFF;
font-size: 10px;
text-align: center;
font-weight: bold;
font-family: sans-serif;
}
.alt1
{
background-color: #999999;
color: #FFFFFF;
font-size: 10px;
text-align: left;
}
.alt2
{
background-color: #CCCCCC;
color: #000000;
font-size: 10px;
text-align: left;
}
.hotnews_list
{
list-style-type: none;
margin-left: 15px;
padding-left: 0px;
}
.bginput
{
background-color: #666666;
border: 1px solid #999999;
color: #FFFFFF;
font: normal normal normal 10px sans-serif, verdana, geneva, lucida, 'lucida grande', arial, helvetica;
}
.button
{
background-color: #666666;
border: 1px solid #999999;
color: #FFFFFF;
font: normal normal bold 10px sans-serif, verdana, geneva, lucida, 'lucida grande', arial, helvetica;
}
.feature_title
{
font: normal normal bolder 25px sans-serif, verdana, geneva, lucida, 'lucida grande', arial, helvetica;
}
.feature_link
{
font: normal normal bold 12px sans-serif, verdana, geneva, lucida, 'lucida grande', arial, helvetica;
background-color: #333333;
border-left: 2px solid #999999;
border-bottom: 2px solid #999999;
border-right: 2px solid #999999;
padding: 3px 3px 3px 3px;
}
.feature
{
background: #000000 url(images/newstyle_feature.jpg);
height: 200px;
padding: 0xp 4px 4px 4px;
border: none;
width: 100%;
align: center;
color: #FFFFFF;
}
</style>
</head>
<body>
<table class="header" cellspacing="0" cellpadding="2" border="0" width="100%">
<tr>
<td class="logo" valign="bottom" style="vertical-align: bottom;">Animation Talk<img src="images/newstyle_logo.gif"/></td>
<td class="mainnav" nowrap="nowrap" valign="bottom">Home | About Us | Advertise | Register<br />
<form action="" method="">
<input type="text" class="bginput" name="username" value="User Name" size="20" maxlength="25" />
<input type="password" class="bginput" name="password" value="Password" size="20" maxlength="30" />
<input type="submit" class="button" name="submit" value="Login"/>
</form>
</td>
</tr>
</table>
<table class="feature" cellspacing="0">
<tr>
<td class="feature_title" valign="bottom" align="left">
Feature:<br />
<i>Disney Buys Pixar</i>
</td>
<td valign="top" align="right">
<span class="feature_link">Read Full Story</span>
</td>
</tr>
</table>
<table class="secondnav" cellspacing="4" cellpadding="6" border="0">
<tr>
<td class="secondnav_news">
<hr/>
News
</td>
<td class="secondnav_forums">
<hr/>
Forums
</td>
<td class="secondnav_events">
<hr/>
Events
</td>
<td class="secondnav_directory">
<hr/>
Directory
</td>
<td class="secondnav_journals">
<hr/>
Journals
</td>
<td class="secondnav_gallery">
<hr/>
Gallery
</td>
<td class="secondnav_reviews">
<hr/>
Reviews
</td>
<td class="secondnav_tutorials">
<hr/>
Tutorials
</td>
<td class="secondnav_premium">
<hr/>
Premium
</td>
</tr>
</table>
<br />
<table cellspacing="2" cellpadding="2" border="0" width="100%" align="center">
<tr>
<td width="50%" valign="top">
<table class="tborder" cellspacing="2" cellpadding="4" border="0" align="left" width="100%">
<tr>
<td class="tcat" colspan="2">Animation Talk <span class="tcat_news">News</span></td>
</tr>
<tr>
<td class="thead" colspan="2">Recent News</td>
</tr>
<tr>
<td width="50%" class="alt1">
<div style="float: left;"><img src="images/newstyle_newsfiller.gif" /></div>
<b>News Item 1</b> - <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla elit arcu, posuere feugiat.
</td>
<td width="50%" class="alt1">
<div style="width: 60px;height: 60px; background-color: #000000;float: left;"> </div>
<b>News Item 2</b> - <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla elit arcu, posuere feugiat.
</td>
</tr>
<tr>
<td width="50%" class="alt1">
<div style="float: left;"><img src="images/newstyle_newsfiller.gif" /></div>
<b>News Item 3</b> - <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla elit arcu, posuere feugiat.
</td>
<td width="50%" class="alt1">
<div style="float: left;"><img src="images/newstyle_newsfiller.gif" /></div>
<b>News Item 4</b> - <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla elit arcu, posuere feugiat.
</td>
</tr>
<tr>
<td width="50%" class="alt1">
<div style="float: left;"><img src="images/newstyle_newsfiller.gif" /></div>
<b>News Item 5</b> - <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla elit arcu, posuere feugiat.
</td>
<td width="50%" class="alt1">
<div style="float: left;"><img src="images/newstyle_newsfiller.gif" /></div>
<b>News Item 6</b> - <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla elit arcu, posuere feugiat.
</td>
</tr>
<tr>
<td class="thead" colspan="2">Hot News</td>
</tr>
<tr>
<td class="alt2">
<ul class="hotnews_list">
<li>
<img src="images/newstyle_hotfiller.gif" />
<b>Hot News Item 1</b>
</li>
<li>
<img src="images/newstyle_hotfiller.gif" />
<b>Hot News Item 2</b>
</li>
<li>
<img src="images/newstyle_hotfiller.gif" />
<b>Hot News Item 3</b>
</li>
<li>
<img src="images/newstyle_hotfiller.gif" />
<b>Hot News Item 4</b>
</li>
<li>
<img src="images/newstyle_hotfiller.gif" />
<b>Hot News Item 5</b>
</li>
</ul>
</td>
<td class="alt2">
<ul class="hotnews_list">
<li>
<img src="images/newstyle_hotfiller.gif" />
<b>Hot News Item 6</b>
</li>
<li>
<img src="images/newstyle_hotfiller.gif" />
<b>Hot News Item 7</b>
</li>
<li>
<img src="images/newstyle_hotfiller.gif" />
<b>Hot News Item 8</b>
</li>
<li>
<img src="images/newstyle_hotfiller.gif" />
<b>Hot News Item 9</b>
</li>
<li>
<img src="images/newstyle_hotfiller.gif" />
<b>Hot News Item 10</b>
</li>
</ul>
</td>
</tr>
</table>
<br />
<br />
<table class="tborder" cellspacing="2" cellpadding="4" border="0" align="left" width="100%">
<tr>
<td class="tcat" colspan="2">Animation Talk <span class="tcat_gallery">Gallery</span></td>
</tr>
<tr>
<td class="thead" colspan="2">Recent Gallery Additions</td>
</tr>
<tr>
<td width="50%" class="alt1">
<div style="float: left;"><img src="images/newstyle_galleryfiller.gif" /></div>
<b>Gallery Item 1</b> - <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla elit arcu, posuere feugiat.
</td>
<td width="50%" class="alt1">
<div style="float: left;"><img src="images/newstyle_galleryfiller.gif" /></div>
<b>Gallery Item 2</b> - <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla elit arcu, posuere feugiat.
</td>
</tr>
<tr>
<td width="50%" class="alt1">
<div style="float: left;"><img src="images/newstyle_galleryfiller.gif" /></div>
<b>Gallery Item 3</b> - <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla elit arcu, posuere feugiat.
</td>
<td width="50%" class="alt1">
<div style="float: left;"><img src="images/newstyle_galleryfiller.gif" /></div>
<b>Gallery Item 4</b> - <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla elit arcu, posuere feugiat.
</td>
</tr>
<tr>
<td width="50%" class="alt1">
<div style="float: left;"><img src="images/newstyle_galleryfiller.gif" /></div>
<b>Gallery Item 5</b> - <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla elit arcu, posuere feugiat.
</td>
<td width="50%" class="alt1">
<div style="float: left;"><img src="images/newstyle_galleryfiller.gif" /></div>
<b>Gallery Item 6</b> - <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla elit arcu, posuere feugiat.
</td>
</tr>
<tr>
<td class="alt1" style="text-align: right;" colspan="2">Go to Gallery</td>
</tr>
</table>
</td>
<td width="50%" valign="top">
<table class="tborder" cellspacing="2" cellpadding="4" border="0" align="right" width="100%">
<tr>
<td class="tcat" colspan="4">Animation Talk <span class="tcat_forums">Forums</span></td>
</tr>
<tr>
<td class="thead" colspan="4">Recent Forum Discussions</td>
</tr>
<tr>
<td class="thead_alt" align="left">Title</td>
<td class="thead_alt" nowrap="nowrap">Poster</td>
<td class="thead_alt" nowrap="nowrap">Forum</td>
<td class="thead_alt" nowrap="nowrap">Last Post</td>
</tr>
<tr>
<td class="alt1">
<b>Lorem ipsum dolor sit amet, consectetuer adipiscing.</b>
</td>
<td class="alt1">Antonbomb22</td>
<td class="alt1">Welcome Mat</td>
<td class="alt1" nowrap="nowrap">
<div align="left">
By Antonbomb22
</div>
<div align="right">
01/28/06 10:58 AM
</div>
</td>
</tr>
<tr>
<td class="alt1">
<b>Lorem ipsum dolor sit amet, consectetuer adipiscing.</b>
</td>
<td class="alt1">Antonbomb22</td>
<td class="alt1">Welcome Mat</td>
<td class="alt1" nowrap="nowrap">
<div align="left">
By Antonbomb22
</div>
<div align="right">
01/28/06 10:58 AM
</div>
</td>
</tr>
<tr>
<td class="alt1">
<b>Lorem ipsum dolor sit amet, consectetuer adipiscing.</b>
</td>
<td class="alt1">Antonbomb22</td>
<td class="alt1">Welcome Mat</td>
<td class="alt1" nowrap="nowrap">
<div align="left">
By Antonbomb22
</div>
<div align="right">
01/28/06 10:58 AM
</div>
</td>
</tr>
<tr>
<td class="alt1">
<b>Lorem ipsum dolor sit amet, consectetuer adipiscing.</b>
</td>
<td class="alt1">Antonbomb22</td>
<td class="alt1">Welcome Mat</td>
<td class="alt1" nowrap="nowrap">
<div align="left">
By Antonbomb22
</div>
<div align="right">
01/28/06 10:58 AM
</div>
</td>
</tr>
<tr>
<td class="alt1">
<b>Lorem ipsum dolor sit amet, consectetuer adipiscing.</b>
</td>
<td class="alt1">Antonbomb22</td>
<td class="alt1">Welcome Mat</td>
<td class="alt1" nowrap="nowrap">
<div align="left">
By Antonbomb22
</div>
<div align="right">
01/28/06 10:58 AM
</div>
</td>
</tr>
<tr>
<td class="alt1">
<b>Lorem ipsum dolor sit amet, consectetuer adipiscing.</b>
</td>
<td class="alt1">Antonbomb22</td>
<td class="alt1">Welcome Mat</td>
<td class="alt1" nowrap="nowrap">
<div align="left">
By Antonbomb22
</div>
<div align="right">
01/28/06 10:58 AM
</div>
</td>
</tr>
<tr>
<td class="alt1">
<b>Lorem ipsum dolor sit amet, consectetuer adipiscing.</b>
</td>
<td class="alt1">Antonbomb22</td>
<td class="alt1">Welcome Mat</td>
<td class="alt1" nowrap="nowrap">
<div align="left">
By Antonbomb22
</div>
<div align="right">
01/28/06 10:58 AM
</div>
</td>
</tr>
<tr>
<td class="alt1">
<b>Lorem ipsum dolor sit amet, consectetuer adipiscing.</b>
</td>
<td class="alt1">Antonbomb22</td>
<td class="alt1">Welcome Mat</td>
<td class="alt1" nowrap="nowrap">
<div align="left">
By Antonbomb22
</div>
<div align="right">
01/28/06 10:58 AM
</div>
</td>
</tr>
<tr>
<td class="alt1">
<b>Lorem ipsum dolor sit amet, consectetuer adipiscing.</b>
</td>
<td class="alt1">Antonbomb22</td>
<td class="alt1">Welcome Mat</td>
<td class="alt1" nowrap="nowrap">
<div align="left">
By Antonbomb22
</div>
<div align="right">
01/28/06 10:58 AM
</div>
</td>
</tr>
<tr>
<td class="alt1">
<b>Lorem ipsum dolor sit amet, consectetuer adipiscing.</b>
</td>
<td class="alt1">Antonbomb22</td>
<td class="alt1">Welcome Mat</td>
<td class="alt1" nowrap="nowrap">
<div align="left">
By Antonbomb22
</div>
<div align="right">
01/28/06 10:58 AM
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
the attached is a Screenshot of what it renders like in IE. |
More Information