Go Back   vb.org Archive > vBulletin 3 Discussion > vB3 Programming Discussions
Reload this Page html problems in FF and IE
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools Display Modes
  #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
Reply

« Previous Thread | Next Thread »

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 02:32 PM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.03484 seconds
  • Memory Usage 2,296KB
  • Queries Executed 12 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)ad_showthread_firstpost
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)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
  • (1)tagbit_wrapper 
Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • 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
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete