|
Cross Coding for IE and Netscape
Now next step was to find out why in the world is the table background
image is showing straight through all the cells in the whole table.
Doing a little troubleshooting I found out that Netscape table background
attribute have precedents over cell color attribute. Plan and simple, in
Netscape if you put a table background it will bleed through any empty
space in cells, even if you change the background color of the cell it
self. The way I had to fix the problem was to remove the table background
image and apply it to the cells individually.
Un-Crossed Coded Code
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/menu_bar.gif">
<tr>
<td width="17%" align="center" valign="middle" height="34"><img border="0" src="images/menu_home.gif"></td>
<td width="17%" align="center" valign="middle"><img border="0" src="images/menu_mission.gif"></td>
<td width="17%" align="center" valign="middle"><img border="0" src="images/menu_admin.gif"></td>
<td width="17%" align="center" valign="middle"><img border="0" src="images/menu_student.gif"></td>
<td width="16%" align="center" valign="middle"><img border="0" src="images/menu_prep.gif"></td>
<td width="16%" align="center" valign="middle"><img border="0" src="images/menu_faq.gif"></td>
</tr>
</table>
Crossed Coded Code
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="17%" align="center" valign="middle" height="34" background="images/menu_bar.gif"><img border="0" src="images/menu_home.gif" width="66" height="23"></td>
<td width="17%" align="center" valign="middle" background="images/menu_bar.gif"><img border="0" src="images/menu_mission.gif" width="83" height="23"></td>
<td width="17%" align="center" valign="middle" background="images/menu_bar.gif"><img border="0" src="images/menu_admin.gif" width="157" height="23"></td>
<td width="17%" align="center" valign="middle" background="images/menu_bar.gif"><img border="0" src="images/menu_student.gif" width="95" height="20"></td>
<td width="16%" align="center" valign="middle" background="images/menu_bar.gif"><img border="0" src="images/menu_prep.gif" width="127" height="24"></td>
<td width="16%" align="center" valign="middle" background="images/menu_bar.gif"><img border="0" src="images/menu_faq.gif" width="50" height="21"></td>
</tr>
Speaking of table if you've ever used tables for expanding browsers and resolutions
friendly pages you've probably witness Netscape bunching or blank page syndrome.
Netscape bunching is when Netscape pushes a TD smaller than it's supposed to be.
Blank page syndrome is when you go to test a page in Netscape and it's just an
empty page, but it works fine in IE. If Netscape bunching is bothering you, eliminate
the "100%" attribute in the <table> Tag. You'll need to do things at the TD
level, now make it <td width="100">. The way you stop the blank page syndrome
is to make sure that every table tag is closed, and miraculously your page will appear
in Netscape.
Another thing that may frustrate even the most sophisticated Webmaster a break
line cell that even though you've specified a height, it's too big. A co-worker
from our Themes site told me about the spacer tag for Netscape. You don't have to
make Transparent GIFs or non-breaking space ( ). You can insert a spacer tag
in the table cell that you want to be thinner than the default font and specify the
type, width and height.
<table>
<tr height="2">
<td width="100%" bgcolor="black"><spacer type="block" width="1" height="2"></td>
</tr>
</td>
| If it was up to me, I'd paint the sky to look like you! |
|
|
| 
Upload
