Jump to content
  • Advertisement
Sign in to follow this  
Tradone

[web] Cross Browser Help with Tables

This topic is 4483 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

There are 2 tables in the below html source, an outer table and an inner tabler. The purpose of the outertable is to provide an extra border for the table for decoration. Now, I would like the source code below work in IE6.0, Firefox, & Opera. But, it only works properly in IE6.0 and I just can't figure it out!!! T_T The use of tables for this effect is prefered.
<html>
<head>
<title>Header</title>
<STYLE TYPE="TEXT/CSS">
.myTable	{
		text-decoration:none;
		font-family:arial;
		font-size:12pt;
		font-style:normal;
	}

.myTable A	{
		text-decoration:none;
		font-family:arial;
		font-size:12pt;
		font-style:normal;
	}

.myTable A:Hover	{
		text-decoration:none;
		font-family:arial;
		font-size:35pt;
		font-style:none;
	}

</STYLE>
<style>
.myTableBorder { 
	BORDER-BOTTOM: yellow 2px solid;
	BORDER-LEFT: yellow 2px solid; 
	BORDER-RIGHT:yellow 2px solid; 
	BORDER-TOP: yellow 2px solid; 
	BACKGROUND-COLOR: skyblue; 

}
.myTableOuterBorder td{ 
	BORDER-BOTTOM:  red 1px solid;
	BORDER-LEFT:  red 1px solid; 
	BORDER-RIGHT:  red 1px solid; 
	BORDER-TOP:  red 1px solid; 
	BACKGROUND-COLOR: skyblue; 
	height: 100%;
}

</style>

</head>
<body>
<TABLE WIDTH="100%" BORDER=0 CELLSPACING=5 CELLPADDING=0 ALIGN=CENTER>
	<TR>
	    <TD WIDTH="50%" HEIGHT="100%"  ALIGN="CENTER" VALIGN="TOP" BGCOLOR="skyblue" class="myTableBorder">
			<TABLE WIDTH="100%" HEIGHT="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0 class="myTableOuterBorder">
			<TR>
				<TD WIDTH="100%" ALIGN="left" VALIGN="top" style="word-wrap:break-word;" class="myTable">
					BbaBbaBba<br>BbaBbaBba<br>BbaBbaBba<br>BbaBbaBba<br>BbaBbaBba<br>BbaBbaBba<br>BbaBbaBba<br>BbaBbaBba<br>BbaBbaBba<br>BbaBbaBba<br>BbaBbaBba<br>BbaBbaBba<br>BbaBbaBba<br>BbaBbaBba<br>BbaBbaBba<br>
				</TD>
			</TR>
			</TABLE>
	    </TD>
	    <TD WIDTH="50%" HEIGHT="100%"  ALIGN="CENTER" VALIGN="TOP" BGCOLOR="skyblue" class="myTableBorder">
			<TABLE WIDTH="100%" HEIGHT="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0 class="myTableOuterBorder">
			<TR>
				<TD WIDTH="100%" ALIGN="left" VALIGN="top" style="word-wrap:break-word;" class="myTable">
					BoomBoom<br>BoomBoom<br>BoomBoom<br>BoomBoom<br>BoomBoom<br>BoomBoom<br>BoomBoom<br>
				</TD>
			</TR>
			</TABLE>
	    </TD>
	</TR>
</TABLE>
</body>

</html>




Note: Also whatever this means:<!DOCTYPE HTML SYSTEM> It seems to change the results. Thanks~

Share this post


Link to post
Share on other sites
Advertisement
Seems to work on Firefox 1.5 and MSIE6. I see a yellow and red border, then blue background.

It might be simpler to use DIV for the outermost border. For example:

<html>
<head>
<style type="text/css">
div { border:2px solid yellow }
table { background-color:skyblue }
td { border:2px solid red; }
</style>
</head>
<body>
<div>
<table width="100%">
<tr>
<td>Bba</td>
<td>Boom</td>
</tr>
</table>
</div>
</body>
</html>

Share this post


Link to post
Share on other sites
Quote:
Original post by Tradone
Note: Also whatever this means:<!DOCTYPE HTML SYSTEM>
It seems to change the results.


System means that no standard doctype has been defined and that the browser should parse it in standard complience mode and hope for the best. It's usually used when mixing non-XHTML XML content in HTML that should still be viewed in a web browser.

Share this post


Link to post
Share on other sites
hm... is it that hard to make a cross browser double border with different colors, that will expand when the browser window has been resized? ( meaning the tables have been set by a percentage )

the div advice isn't coming along too well. Somebody at webdeveloper.com adviced me to use div's as well so I took the advice and still didn't come up with an answer. Even from my experience, it's best to avoid div's when it comes down to design, that's why I tried to use a nested table...

anyway, i'm going to have to figure this out, i'll post as soon as I find an answer.

Share this post


Link to post
Share on other sites
Quote:
Original post by Tradone
Even from my experience, it's best to avoid div's when it comes down to design, that's why I tried to use a nested table...


The reality is the reverse. It's best to stay away from using tables for design and reserve them for presenting tabular data. I only "cheat" with layout tables when creating big, complicated forms. If not for the users, bandwidth, etcetera then for your own sanity. Debugging 8+ layers of nested divs makes you go mad quite easily :-) (not that IE's sloppy CSS implementation doesn't....)

Share this post


Link to post
Share on other sites
I guess I was wrong, I'll take your word Sander ( and khsoh ). Better that I listen to pro's than myself [lol]. Hey, thanks for your answers every time Sander.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!