Forum Moderators: open
Does anyone know why with IE both of my tables below display fine, but with Netscape only Table 1 displays OK? The only difference with Table 2 is that I have nested my inline tables in a parent table. But as you can see, I've lost my fraction bars in the second table.
I've searched everywhere on the web, and I've seen that Netscape can be quirky, but I can't seem to find a fix.
Thanks!
:)
*********************
<HTML>
<HEAD>
<BODY>
<H1>Table 1</H1>
<TABLE STYLE = 'display:inline' CELLPADDING = 0 CELLSPACING = 0 >
<TR><TD HEIGHT = 20>1</TD></TR>
<TR><TD HEIGHT = 1 BGCOLOR = 'BLACK'></TD></TR>
<TR><TD HEIGHT = 20>3</TD></TR>
</TABLE>
<TABLE STYLE = 'display:inline' CELLPADDING = 0 CELLSPACING = 0 >
<TR><TD HEIGHT = 20>1</TD></TR>
<TR><TD HEIGHT = 1 BGCOLOR = 'BLACK'></TD></TR>
<TR><TD HEIGHT = 20>3</TD></TR>
</TABLE>
<H1>Table 2</H1>
<TABLE>
<TR>
<TD>
<TABLE STYLE = 'display:inline' CELLPADDING = 0 CELLSPACING = 0 >
<TR><TD HEIGHT = 20>1</TD></TR>
<TR><TD HEIGHT = 1 BGCOLOR = 'BLACK'></TD></TR>
<TR><TD HEIGHT = 20>4</TD></TR>
</TABLE>
<TABLE STYLE = 'display:inline' CELLPADDING = 0 CELLSPACING = 0 >
<TR><TD HEIGHT = 20>1</TD></TR>
<TR><TD HEIGHT = 1 BGCOLOR = 'BLACK'></TD></TR>
<TR><TD HEIGHT = 20>4</TD></TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Netscape acts funny sometimes with empty cells (I know, it's contradictory because it's working in the first one)
<TR><TD HEIGHT=1 BGCOLOR='BLACK'></TD></TR>
this
<TR><TD HEIGHT=1 BGCOLOR='BLACK'> </TD></TR>
Of course makes the bar too tall, so
<TR><TD HEIGHT=1 BGCOLOR='BLACK'><img src="spacer.gif" width="8" height="1" border="0" alt=""></TD></TR>
fixes it.
Also, these "stack" in NN 4.7 even with a nowrap (I know for a fact many are still using 4.7, in fact some areas of Qwest's site are inaccessable with anything else) instead of the side-by-side you're shooting for, so this is suggested:
....
<td>
<TABLE STYLE='display:inline' CELLPADDING=0 CELLSPACING=0>
<TR><TD HEIGHT=20>1</TD></TR>
<TR><TD HEIGHT=1 BGCOLOR='BLACK'><img src="spacer.gif" width="8" height="1" border="0" alt=""></TD></TR>
<TR><TD HEIGHT=20>4</TD></TR>
</TABLE>
</td>
<td>
<TABLE STYLE='display:inline' CELLPADDING=0 CELLSPACING=0>
<TR><TD HEIGHT=20>1</TD></TR>
<TR><TD HEIGHT=1 BGCOLOR='BLACK'><img src="spacer.gif" width="8" height="1" border="0" alt=""></TD></TR>
<TR><TD HEIGHT=20>4</TD></TR>
</TABLE>
</td> ....
Putting the nests inside two cells will lock them side by side.
Seems like a long way to go for fractions . . . .
Rocknbil, your suggestion actually worked well. I've been spending the last day trying to work with it. However, here's the wildcard: I need to be able to generate these kinds of fractions on the fly using general code, and I won't know in advance how wide to make the fraction bar. For instance, a width of 8 might not be enough if the numerator is something like 1 + x.
Is there a way to figure out how wide the cells will be in a certain table, before I write it out? If not, then I fear I'll be back to square one...
How about
topnum { text-decoration:underline; }
div.frac { text-align:center; }
<div class="frac">
<span class="topnum">1</span><br>
3
</div>
?
Not a great solution either but you can see where it's leading.