Space between CSS border and table in Netscape 4 ...

[Liet]

I have a few tables that need single borders around the edges, to look something like a chalkboard. (They also need Comic Sans, a font I hate beyond all others, but hey, I'm not the designer.)

The following code works just fine in Internet Explorer 6.0, Netscape 6.2, Mozilla .9.9, and Opera 6.0, all for Windows. I use Javascript to insert span tags around the table for Netscape 4x, which should display the same effect. Netscape 4 displays a border of the correct width and color, only with some space around the table inside of it. It doesn't look very good.

Using div instead of span, by the way, doesn't make any difference. I see this trick posted on boards more often with the span tag, which is why I'm using it here. And the browser has serious problems with margin properties and tables, so changing margin and padding settings doesn't work.

This is what it looks like in Netscape 4.78:


And this is what it looks like in other browsers (the screenshot's from Mozilla .99, but it doesn't make any difference):


Here's the relevant CSS, from a separate file. It's pretty nasty, but I'm trying to be as redundant as possible for Netscape 4:

/* for green chalkboard-type table effect */
table.chalkboard {
text-align: left;
color: #FFFFFF;
background-color: #009966;
border-width: 5px;
border-color: #333333;
border-style: solid;
}

/* for chalkboard border on form table in Netscape 4 */
span.form-n4 {
width: 450px;
color: #FFFFFF;
background-color: #009966;
border-width: 5px;
border-color: #333333;
border-style: solid;
}

/* for cells within chalkboard-type table */
.form {
color: #FFFFFF;
background-color: #009966;
text-align: left;
font-size: 16px;
font-family: 'Comic Sans MS', Verdana, Arial, Helvetica, sans-serif;
}

... and here's a sample of the relevant HTML:

<!-- writes table border code for Netscape 4 -->
<script type="text/JavaScript">
if (navigator.appName == "Netscape" && parseInt(navigator.appVersion) == 4) 
{
document.writeln("<span class=\"form-n4\">");
}
</script>
<table width="450" class="chalkboard" summary="Entry Form">
<tr>
<td class="form">
<label for="school_name">School Name</label>
</td>
<td>
<input type="text" id="school_name" size="40">
</td>
</tr>
<tr>
<td class="form">
<label for="principal">Principal</label>
</td>
<td>
<input type="text" id="principal" size="40">
</td>
</tr>
</table>
<!-- closes Netscape 4-specific table border code -->
<script type="text/JavaScript">
if (navigator.appName == "Netscape" && parseInt(navigator.appVersion) == 4) 
{
document.writeln("<\/span>");
}
</script>

Any ideas on how I can get rid of that little bit between the border and the table in Netscape 4? Thanks a lot.

[Blizzy]

I don't think you can... from my experience...

[moonman]

NS4 doesn't support that kind of CSS. Don't ask me why

[Aes]

Originally posted by moonman
NS4 doesn't support that kind of CSS. Don't ask me why

It doesn't support it becuase of its age. Same reason that Internet Explorer 3.x or Opera 4.x would not display it correctly.

-Colin

[Liet]

Alright. I'll live with the table border rendering like that. Thanks a lot.