PDA

View Full Version : cell borders in IE6 and Firefox2


mikem
10-06-2008, 12:05 PM
in a table I want to outline a cell with a border

see example:
http://www.mantlermusic.com/cell_border.htm

the word English has a white border around its cell (over the general grey page background)

this can be seen correctly in IE6, but not in Firefox2, where I see ALL borders in the table

anyone know a way to fix this so it looks the same in both browsers?

(using Dreamweaver 4.0)

Cary
10-07-2008, 01:42 AM
You can start your table with either one of these...
<table cellspacing="0" cellpadding="0" width="764" align="center">

<table cellspacing="0" cellpadding="0" width="764" align="center" style="border:2px solid #333333">

Using the border attribute will mess up the look if it's set to anything other than "0".

mikem
10-07-2008, 06:08 AM
thanks, but sorry, that doesn't seem to do it.
now I can't see ANY border around the individual cell in question ....

Cary
10-07-2008, 06:20 AM
Correct, if a specific cell needs a border, you'll need to style it.

mikem
10-07-2008, 06:49 AM
sorry to be dense (no styling experience ...) - if possible, can you tell me exactly how I would do that?

maybe one specific example of code to make that one cell have a white border?

edbr
10-07-2008, 07:36 AM
try this
<style type="text/css">
<!--
.white{
border-color:#FFFFFF;}
-->
</style>
in the head section or in css sheet.
<td class="white" height="25" valign="top" width="398" >
in the html

mikem
10-07-2008, 09:50 AM
works to some degree - but it adds another blank cell and pushes the bordered cell over to the right (but maybe I'm not putting the code in the correct html spot ...)

HOWEVER - the original reason for the post was that it didn't work in Firefox - and it it still doesn't (it shows ALL table borders)

edbr
10-07-2008, 10:13 AM
here is your page, with a style added but changed to red for contrast , it works. but you are using inline font tags which maybe is not the best
<html>
<head>
<TITLE>Michael Mantler - composer, musician - Discography</TITLE>
<META NAME="Keywords" CONTENT="Michael Mantler, composer, musician, leader, sideman, discography, recordings, new jazz, contemporary music">
<meta name="Description" content="Detailed information about all recordings of Michael Mantler, composer, leader and musician, sideman in new jazz and contemporary classical music.">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--




<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
//-->
</script>
<style type="text/css">
<!--
.white{
border-color:#FF0000;}
-->
</style>
</head>
<body bgcolor="#333333" text="#FFFFFF" link="#00FFFF" vlink="#00FFFF" alink="#00FFFF" >
<table cellspacing="0" cellpadding="0" border="2" width="764" align="center" bordercolor="#333333">
<tr>
<td valign="top" width="268"><font size="3" face="Arial" color="#FF6633"><strong><b><font size="2"><br>
</font><font size="5"> </font><font face="Verdana, Arial, Helvetica, sans-serif" color="#FF6633" size="3"><strong><b><font face="Arial, Helvetica, sans-serif" size="5">BIOGRAPHY</font></b></strong></font></b></strong></font></td>

<td valign="top" width="37">&nbsp;</td>
<td valign="top" width="398">&nbsp;</td>
</tr>
<tr>
<td colspan="3" valign="top"><img src="../intro_line.gif" width="764" height="20"></td>
</tr>
<tr>
<td height="25" valign="top" width="268">&nbsp;</td>
<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398">&nbsp;</td>

</tr>
<tr>
<td height="25" valign="top" width="268" bgcolor="#666666"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_eng.htm" target="home"><img src="../flag_UK.gif" width="30" height="20" border="0" align="absbottom"></a>&nbsp;&nbsp;&nbsp;</font></b></font></td>
<td height="25" valign="top" width="37">&nbsp;</td>
<td class="white" height="25" valign="top" width="398" ><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_eng.htm" target="home">&nbsp;&nbsp;&nbsp;&nbsp;English </a></font></b></font></td>
</tr>
<tr>
<td height="25" valign="top" width="268">&nbsp;</td>
<td height="25" valign="top" width="37">&nbsp;</td>

<td height="25" valign="top" width="398">&nbsp;</td>
</tr>
<tr>
<td height="25" valign="top" width="268" bgcolor="#666666"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_fr.htm" target="home"><img src="../flag_france.gif" width="30" height="20" border="0" align="absbottom"></a>&nbsp;&nbsp;&nbsp;</font></b></font></td>
<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398" bgcolor="#000000"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_fr.htm" target="home">&nbsp;&nbsp;&nbsp;&nbsp;Francais</a></font></b></font></td>
</tr>
<tr>
<td height="25" valign="top" width="268">&nbsp;</td>

<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398">&nbsp;</td>
</tr>
<tr>
<td height="25" valign="top" width="268" bgcolor="#666666"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_ger.htm" target="home"><img src="flag_germany.gif" width="30" height="20" border="0" align="absbottom"></a>&nbsp;&nbsp;&nbsp;</font></b></font></td>
<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398" bgcolor="#000000"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_ger.htm" target="home">&nbsp;&nbsp;&nbsp;&nbsp;Deutsch</a></font></b></font><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"></font></b></font></td>
</tr>
<tr>
<td height="25" valign="top" width="268">&nbsp;</td>

<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398">&nbsp;</td>
</tr>
<tr>
<td height="25" valign="top" width="268" bgcolor="#666666"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_it.htm" target="home"><img src="flag_italy.gif" width="30" height="20" border="0" align="absbottom"></a>&nbsp;&nbsp;</font></b></font></td>
<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398" bgcolor="#000000"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_it.htm" target="home">&nbsp;&nbsp;&nbsp;&nbsp;Italiano</a></font></b></font><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"></font></b></font></td>
</tr>
<tr>
<td height="25" valign="top" width="268">&nbsp;</td>

<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398">&nbsp;</td>
</tr>
<tr>
<td height="25" valign="top" width="268" bgcolor="#666666"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_dk.htm" target="home"><img src="flag_denmark.gif" width="30" height="20" border="0" align="absbottom"></a>&nbsp;</font></b></font></td>
<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398" bgcolor="#000000"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_dk.htm" target="home">&nbsp;&nbsp;&nbsp;&nbsp;Dansk</a></font></b></font><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"></font></b></font></td>
</tr>
<tr>
<td height="25" width="268" valign="top">&nbsp;</td>

<td height="25" width="37" valign="top">&nbsp;</td>
<td height="25" width="398" valign="top">&nbsp;</td>
</tr>
<tr>
<td height="25" colspan="3" valign="top"><img src="../intro_line.gif" width="764" height="20"></td>
</tr>
<tr>
<td height="25" width="268" valign="top">&nbsp;</td>
<td height="25" width="37" valign="top">&nbsp;</td>
<td height="25" width="398" valign="top">&nbsp;</td>

</tr>
<tr>
<td height="25" width="268" valign="top">&nbsp;</td>
<td height="25" width="37" valign="top">&nbsp;</td>
<td height="25" width="398" valign="top">&nbsp;</td>
</tr>
</table>

</body>
</html>

mikem
10-09-2008, 06:48 AM
thanks
still doesn't work right in Firefox, but that's OK, the whole thing should probably be re-done anyway, not using tables ...

edbr
10-09-2008, 06:52 AM
works in firefox3 i tested it, but yes get away from tables , you wont regret it

Cary
10-09-2008, 10:16 PM
This code combines both answers so IE and Firefox look pretty similar. The main difference being how the width of columns are rendered as the three column widths don't correctly add up to a value equal to the width of the table.

<html>
<head>
<title>Michael Mantler - composer, musician - Discography</title>
<meta name="Keywords" content="Michael Mantler, composer, musician, leader, sideman, discography, recordings, new jazz, contemporary music">
<meta name="Description" content="Detailed information about all recordings of Michael Mantler, composer, leader and musician, sideman in new jazz and contemporary classical music.">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/ecmascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
.white {
border: 1px solid #FFFFFF;
}
</style>
</head>
<body bgcolor="#333333" text="#FFFFFF" link="#00FFFF" vlink="#00FFFF" alink="#00FFFF" >
<table cellspacing="0" cellpadding="0" width="764" align="center">
<tr>
<td valign="top" width="268"><font size="3" face="Arial" color="#FF6633"><strong><b><font size="2"><br>
</font><font size="5"> </font><font face="Verdana, Arial, Helvetica, sans-serif" color="#FF6633" size="3"><strong><b><font face="Arial, Helvetica, sans-serif" size="5">BIOGRAPHY</font></b></strong></font></b></strong></font></td>
<td valign="top" width="37">&nbsp;</td>
<td valign="top" width="398">&nbsp;</td>
</tr>
<tr>
<td colspan="3" valign="top"><img src="intro_line.gif" width="764" height="20"></td>
</tr>
<tr>
<td height="25" valign="top" width="268">&nbsp;</td>
<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398">&nbsp;</td>
</tr>
<tr>
<td height="25" valign="top" width="268" bgcolor="#666666"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_eng.htm" target="home"><img src="flag_UK.gif" width="30" height="20" border="0" align="absbottom"></a>&nbsp;&nbsp;&nbsp;</font></b></font></td>
<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398" class="white"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_eng.htm" target="home">&nbsp;&nbsp;&nbsp;&nbsp;English</a></font></b></font></td>
</tr>
<tr>
<td height="25" valign="top" width="268">&nbsp;</td>
<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398">&nbsp;</td>
</tr>
<tr>
<td height="25" valign="top" width="268" bgcolor="#666666"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_fr.htm" target="home"><img src="flag_france.gif" width="30" height="20" border="0" align="absbottom"></a>&nbsp;&nbsp;&nbsp;</font></b></font></td>
<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398" bgcolor="#000000"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_fr.htm" target="home">&nbsp;&nbsp;&nbsp;&nbsp;Francais</a></font></b></font></td>
</tr>
<tr>
<td height="25" valign="top" width="268">&nbsp;</td>
<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398">&nbsp;</td>
</tr>
<tr>
<td height="25" valign="top" width="268" bgcolor="#666666"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_ger.htm" target="home"><img src="flag_germany.gif" width="30" height="20" border="0" align="absbottom"></a>&nbsp;&nbsp;&nbsp;</font></b></font></td>
<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398" bgcolor="#000000"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_ger.htm" target="home">&nbsp;&nbsp;&nbsp;&nbsp;Deutsch</a></font></b></font><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"></font></b></font></td>
</tr>
<tr>
<td height="25" valign="top" width="268">&nbsp;</td>
<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398">&nbsp;</td>
</tr>
<tr>
<td height="25" valign="top" width="268" bgcolor="#666666"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_it.htm" target="home"><img src="flag_italy.gif" width="30" height="20" border="0" align="absbottom"></a>&nbsp;&nbsp;</font></b></font></td>
<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398" bgcolor="#000000"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_it.htm" target="home">&nbsp;&nbsp;&nbsp;&nbsp;Italiano</a></font></b></font><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"></font></b></font></td>
</tr>
<tr>
<td height="25" valign="top" width="268">&nbsp;</td>
<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398">&nbsp;</td>
</tr>
<tr>
<td height="25" valign="top" width="268" bgcolor="#666666"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_dk.htm" target="home"><img src="flag_denmark.gif" width="30" height="20" border="0" align="absbottom"></a>&nbsp;</font></b></font></td>
<td height="25" valign="top" width="37">&nbsp;</td>
<td height="25" valign="top" width="398" bgcolor="#000000"><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"><a href="biograph_dk.htm" target="home">&nbsp;&nbsp;&nbsp;&nbsp;Dansk</a></font></b></font><font face="Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFCC"></font></b></font></td>
</tr>
<tr>
<td height="25" width="268" valign="top">&nbsp;</td>
<td height="25" width="37" valign="top">&nbsp;</td>
<td height="25" width="398" valign="top">&nbsp;</td>
</tr>
<tr>
<td height="25" colspan="3" valign="top"><img src="intro_line.gif" width="764" height="20"></td>
</tr>
<tr>
<td height="25" width="268" valign="top">&nbsp;</td>
<td height="25" width="37" valign="top">&nbsp;</td>
<td height="25" width="398" valign="top">&nbsp;</td>
</tr>
<tr>
<td height="25" width="268" valign="top">&nbsp;</td>
<td height="25" width="37" valign="top">&nbsp;</td>
<td height="25" width="398" valign="top">&nbsp;</td>
</tr>
</table>
</body>
</html>