View Full Version : Tables in Netscape 6 (what's up with this browser?)
virtualshock
08-07-2002, 04:22 AM
I'm using tables to organize the layout of my web site (like most people). Several of the columns and rows of my table need to have a repeating background. The columns need to by 1px wide and the rows need to be 1px tall. I'm using CSS to size the rows/columns. On IE 5, 5.5 and 6 this works like a dream. On netscape 6, however, i'm having three problems:
1) For columns, if they have a rowspan greater than 2 and i try to have the background repeat using repeat-y, it only repeats for the first row and then stops even though the column takes up several rows. I can work around this by dividing the column up, but this requires more code and increases the load time...albeit not by much. Even more annoying, if the background-attachment is set to fixed, the image disappears completely, but i'm willing to overlook this issue if i can get the first part fixed.
2) The second problem really prevents me from trying to fix the first one. With rows, I can't size them to be 1px tall. I used the css height property, height="1" in the TD tag, and even put in a 1px tall image into the row to try to get it to size correctly (it works for columns, at least) to no success. I'm 99.9% positive that this isn't being caused by the table being a certain size and the row heights not adding up to the total. What's going on here?
3) The third problem I have is the fact that people actually still use Netscape 6 (i'm not even going to mention Netscape 4). I know that creating a page layout isn't easy, but does IE render pages the way that I intend them simply because it's bad compared to Netscape? :confused: I think it's ridiculous that Netscape 6 can't properly show w3c complient pages.
Anyway, any input on problems #1 and 2 is greatly appreciated.
joh6nn
08-07-2002, 05:36 AM
can you post a link to the page you're working on, or maybe a piece of code that's giving you trouble? would make it easier for us to see what you're talking about, and offer suggestions.
pardicity3
08-07-2002, 06:21 AM
2) The second problem really prevents me from trying to fix the first one. With rows, I can't size them to be 1px tall. I used the css height property, height="1" in the TD tag, and even put in a 1px tall image into the row to try to get it to size correctly (it works for columns, at least) to no success. I'm 99.9% positive that this isn't being caused by the table being a certain size and the row heights not adding up to the total. What's going on here?
First off, I may be wrong (which I usually am), but I think that the height property is depreciated anymore. I remember hearing this somewhere.......This, of course, would cause some problems with browsers that aren't so forgiving. Some broswers still support the height property (I think) but it has been depreciated.
You may also want to make sure that you don't have any cellpadding action going on which would obviously make a 1px tall cell be bigger than 1px. And keep in mind that even a transposed letter in any of your tags can cause everything to mess up (This is why we like to see code!! :)).
3) The third problem I have is the fact that people actually still use Netscape 6 (i'm not even going to mention Netscape 4). I know that creating a page layout isn't easy, but does IE render pages the way that I intend them simply because it's bad compared to Netscape? I think it's ridiculous that Netscape 6 can't properly show w3c complient pages.
Not to harp on you at all, but I have had no problems with using a table layout and Netscape 6. I actually find that it is very good at complying with the css that I use. I know some people don't like netscape, but really it often doesn't take too much effort to make things work on most all browsers.
1) For columns, if they have a rowspan greater than 2 and i try to have the background repeat using repeat-y, it only repeats for the first row and then stops even though the column takes up several rows. I can work around this by dividing the column up, but this requires more code and increases the load time...albeit not by much. Even more annoying, if the background-attachment is set to fixed, the image disappears completely, but i'm willing to overlook this issue if i can get the first part fixed.
I made myself a quick little test page to see if I got similiar problems to you, and I didn't. It worked okay for me. This just leads me back to the 'check your code millions (no sarcasm) of times' statement. I have found that IE will render a mistake in code a lot better then any other browser. So it is very likely that somewhere you might have a mispelled word. It happens to me all the time, and is very frustrating, but once you fix it it feels good!!!!
Good luck!!!
See this for problems with height in cells:
http://developer.netscape.com/evangelism/docs/articles/img-table/
virtualshock
08-07-2002, 06:34 PM
Sorry about not including the code...that came to me as an afterthought and I didn't have it on the computer that i wrote the post on. What you see below is basically all of the code that is on the page (except for the !DOCTYPE, head, etc...)
<table width="100%" height="100%" cellpadding="0" cellspacing="0" align="center">
<tr>
<td class="margin" rowspan="7"> </td>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
<td class="headerCell"> </td>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
<td class="margin" rowspan="7"> </td>
</tr>
<tr>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
<td height="1%"class="horizontalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
</tr>
<tr>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
<td class="navigationCell"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="750" height="150" name="fla_navigation" id="fla_navigation">
<param name="movie" value="../content/dynamic/shockwave/Fla_Navigation_UI.swf" />
<param name="quality" value="high" />
<embed src="../content/dynamic/shockwave/Fla_Navigation_UI.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="150" name="fla_navigation" id="fla_navigation" swliveconnect="true"></embed></object></td>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
</tr>
<tr>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
<td class="horizontalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
</tr>
<tr>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
<td class="movieCell"> </td>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
</tr>
<tr>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
<td class="horizontalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
</tr>
<tr>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
<td> </td>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
</tr>
<tr>
<td class="horizontalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
<td class="horizontalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
<td class="horizontalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
</tr>
<tr>
<td class="footerCell"> </td>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
<td class="footerCell"> </td>
<td class="verticalLineArt"><img src="../content/images/static/pix.gif" width="1" height="1" border="0" /></td>
<td class="footerCell"> </td>
</tr>
</table>
Here are the css style that i'm using (from an external file):
.headerCell {
height: 60px;
width: 750px;
}
.navigationCell {
height: 150px;
width: 750px;
}
.footerCell {
height: auto;
width: auto;
}
.movieCell {
height: 200px;
width: 750px;
}
.pageContent {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
.horizontalLineArt {
background-image: url(../../content/images/static/dash_horizontal_737373.gif);
background-repeat: repeat;
background-position: left bottom;
height: 1px;
width: auto;
}
the rows that i'm having problems with use the horizontalLineArt class. Thanks.
PS. About that netscape stuff, I used to be an avid Netscape 4 user until IE 5 came out. Anyway, i was just blowing off some steam. It's kind of annoying having to deal with it again after so many years of freedom :)
pardicity3
08-08-2002, 05:41 AM
Okay, well I don't have a whole lot of time to reply but here is my first instinct:
.horizontalLineArt {
background-image: url(../../content/images/static/dash_horizontal_737373.gif);
background-repeat: repeat;
background-position: left bottom;
height: 1px;
width: auto;
}
I am not positive but I think you are supposed to put the background-image url in quotes (i.e. url("../../content/images/static/dash_horizontal_737373.gif")).
Also I am not positive on this one either, but I think that it is bad to have empty table cells (<td></td>). You should maybe try putting in transparent gif's in there with 1px by 1px dimensions.
Good luck for now, and if I have more time I will try and comb through again later. Good Luck!!!!
virtualshock
08-10-2002, 12:28 AM
I fixed the first problem thanks to jdk's link, but the background images for a column that has a rowspan >1 still is only visible for the first row in Netscape 6. Here's the entire code for the page. You can ignore most of it; the only parts that are concerned are the td.verticalLine style and the two td tags that use this style.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
img.spacer {
display: block;
}
-->
</style>
<style type="text/css">
<!--
table.body {
background-color: #FFFFFF;
padding: 0px;
border: none;
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
-->
</style>
<style type="text/css">
<!--
td.footer {
height: auto;
width: 750px;
}
td.header {
height: 60px;
width: 750px;
}
td.horizontalLine {
background-attachment: fixed;
background-image: url("content/images/static/dash_horizontal_737373.gif");
background-position: center center;
height: 1px;
}
td.introMovie {
height: 200px;
width: 750px;
}
td.margin {
height: auto;
width: auto;
}
td.navigation {
height: 150px;
width: 750px;
vertical-align: top;
}
td.navigationMarginBottom {
height: 90px;
vertical-align: bottom;
}
td.navigationMarginTop {
height: 60px;
vertical-align: top;
}
td.verticalLine {
background-attachment: fixed;
background-image: url("content/images/static/dash_vertical_737373.gif");
background-position: center center;
width: 1px;
}
-->
</style>
</head>
<body bottommargin="0" rightmargin="0">
<table class="body" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td> </td>
<td class="verticalLine" rowspan="11"><img class="spacer" src="content/images/static/pix.gif" width="1" height="1" /></td>
<td class="header" width="750"><img class="spacer" src="content/images/static/pix.gif" width="1" height="60" /></td>
<td class="verticalLine" rowspan="11"><img class="spacer" src="content/images/static/pix.gif" width="1" height="1" /></td>
<td> </td>
</tr>
<tr>
<td><img class="spacer" src="content/images/static/pix.gif" width="1" height="1" /></td>
<td class="horizontalLine"><img class="spacer" src="content/images/static/pix.gif" width="1" height="1" /></td>
<td><img class="spacer" src="content/images/static/pix.gif" width="1" height="1" /></td>
</tr>
<tr>
<td class="navigationMarginTop"> </td>
<td class="navigation"rowspan="3"> </td>
<td class="navigationMarginTop"> </td>
</tr>
<tr>
<td class="horizontalLine"><img class="spacer" src="content/images/static/pix.gif" width="1" height="1" /></td>
<td class="horizontalLine"><img class="spacer" src="content/images/static/pix.gif" width="1" height="1" /></td>
</tr>
<tr>
<td class="navigationMarginBottom"> </td>
<td class="navigationMarginBottom"> </td>
</tr>
<tr>
<td><img class="spacer" src="content/images/static/pix.gif" width="1" height="1" /></td>
<td class="horizontalLine"><img class="spacer" src="content/images/static/pix.gif" width="1" height="1" /></td>
<td><img class="spacer" src="content/images/static/pix.gif" width="1" height="1" /></td>
</tr>
<tr>
<td class="margin" rowspan="3"> </td>
<td class="introMovie"> </td>
<td class="margin" rowspan="3"> </td>
</tr>
<tr>
<td class="horizontalLine"><img class="spacer" src="content/images/static/pix.gif" width="1" height="1" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="horizontalLine"><img class="spacer" src="content/images/static/pix.gif" width="1" height="1" /></td>
<td class="horizontalLine"><img class="spacer" src="content/images/static/pix.gif" width="1" height="1" /></td>
<td class="horizontalLine"><img class="spacer" src="content/images/static/pix.gif" width="1" height="1" /></td>
</tr>
<tr>
<td class="margin"> </td>
<td class="footer"> </td>
<td class="margin"> </td>
</tr>
</table>
</body>
</html>
pardicity3
08-10-2002, 02:44 AM
I got this from a recent post, I think it may be where your problem lies:
http://www.codingforums.com/showthread.php?s=&threadid=3519
I'll hazard a guess and say that your table is somewhere down on your page.
With "background-attachment: fixed", the background position should be fixed to the viewport (the browser window). With a position of 0px, 0px, that means in the upper-left corner of the window, no the upper-left corner of the table or table cell.
The problem is that IE positions fixed backgrounds incorrectly. Netscape is actually doing it right, so you can't see the background because it's positioned outside the area covered by the table. To prove it, remove the "background-repeat: repeat-x" so the background will fill the browser window. It should then appear in the table in Netscape.
Take a look at http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html and read the explanation. Be sure to try the page in IE and Netscape 6.
I see that you are using 'background-attachment: fixed' in your css....maybe that is the problem??
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.