Thread: html problems in FF and IE
View Single Post
  #1  
Old 01-29-2006, 06:32 PM
AN-net's Avatar
AN-net AN-net is offline
 
Join Date: Dec 2003
Location: AnimationTalk.com
Posts: 2,367
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default html problems in FF and IE
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&nbsp;&nbsp;|&nbsp;&nbsp;About Us&nbsp;&nbsp;|&nbsp;&nbsp;Advertise&nbsp;&nbsp;|&nbsp;&nbsp;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;">&nbsp;</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.
Attached Images
File Type: jpg styleproblem_ie.jpg (47.8 KB, 0 views)
Reply With Quote
 
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.02060 seconds
  • Memory Usage 1,986KB
  • Queries Executed 12 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD_SHOWPOST
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)bbcode_html
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_box
  • (1)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit_info
  • (1)postbit
  • (1)postbit_attachment
  • (1)postbit_onlinestatus
  • (1)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • reputationlevel
  • showthread
Included Files:
  • ./showpost.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showpost_start
  • bbcode_fetch_tags
  • bbcode_create
  • postbit_factory
  • showpost_post
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • showpost_complete