<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>
[web] Cross Browser Help with Tables
Author
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.
Note: Also whatever this means:<!DOCTYPE HTML SYSTEM>
It seems to change the results.
Thanks~
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:
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>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.
Author
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.
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.
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....)
Author
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.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
