PDA

View Full Version : Please help... tables (of course)

nemesis
03-23-2000, 01:21 AM
So we're happily redesigning, making nice progress, when it occurs to us that we haven't looked at it in Netscape yet. So we do. And it's all buggered up. :(

We've tried all sorts of fiddling, but we can't get Netscape to treat it correctly. We've run it through multiple HTML validators, and they find no errors. HELP, pretty please?

Here's a screen shot of what we see in Netscape 4.72: http://www.buffyguide.com/netscape.jpg

And in Explorer 5 (this is exactly how it's supposed to look): http://www.buffyguide.com/explorer.jpg

And here's the basics of the code (most of the content is trimmed out, but this is all of the table setup, plus two of the inner tables (they're all the same): http://www.buffyguide.com/sample.txt

Any advice, hints, magical solutions, etc. would be greatly appreciated! :)

Jamie and Jeremy
---------------------------------
The Complete Buffy Episode Guide
www.buffyguide.com (http://www.buffyguide.com)
[This message has been edited by nemesis (edited 03-23-00@01:23 am)]
Dan Kaplan
03-23-2000, 01:29 AM
It looks like the only difference between the two is the black border Netscape is adding around the page.[nbsp][nbsp]You should be able to get around that by using:

<body background=&quot;&quot; topmargin=&quot;0&quot; leftmargin=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot;>

Dan
Justin
03-23-2000, 01:35 AM
A much easier way to add a border to a table is to nest two tables, rather than making one pixel wide columns/rows and having to add spacing manually etc - this UBB does it this way:
</font><font face="Courier" size="3">
<table border=0 cellpadding=0 cellspacing=0 bgcolor=#bordercolor>
<tr>
<td>
<table width=100% border=0 cellpadding=3 cellspacing=0 bgcolor=#insidebgcolor>
<tr>
<td>This is inside a bordered table...</td>
</tr>
</table>
</td>
</tr>
</table>
</font><font face="Verdana, Arial" size="2">
Or, to put a thin border around each cell, just set the cellspacing=1 for the inner table and specify the inside bgcolor for each <TR> on the inner table...

It simply takes a bit of experimentation - but I use the above method all the time (here, the CNC, my own sites, etc).

Hope this helps.

------------------
Justin Nelson
FutureQuest (http://www.FutureQuest.net/index.php) Support
sheila
03-23-2000, 01:36 AM
I looked at the images, and can't tell why you say that it's &quot;all buggered up&quot; in NS. Looks essentially the same to me. Only thing I can figure, is that you don't like the proportions of some of the navy bars/outlines in the NS version (wider than you wanted?).

I see, from your code, that you're using 1 by 1 pixel gifs for spacers. Try inserting in your image tags the properties
VSPACE = &quot;0&quot; HSPACE = &quot;0&quot;

Perhaps that will help?

Other than that, I see you're doing your tables in percentages. Try coding your table dimensions in fixed pixels, if you want your layout that rigid and inflexible.

Overall, come to accept the fact that in different browsers your page will display somewhat differently. You can't code down to the pixel exactly the same in NS, IE, Opera, etc...
That's not necessarily a bad thing.

<edit>Dang, Justin and Dan are fast. I swear their posts weren't there when I started...but I bet they're on target and my response isn't what you need. Still, I'm leaving it. </edit>
[This message has been edited by sheila (edited 03-23-00@01:37 am)]
nemesis
03-23-2000, 02:15 AM
It looks like the only difference between the two is the black border Netscape is adding around the page. Actually, there's a larger border around the page, which is the same in each browser; we just cropped the screen shots to make them smaller. (Sorry; should have mentioned that.) We do use the topmargin, marginheight, etc. tags, though (in the real code, not that sample code).

Justin -- good ideas; we'll try those. It did seem like there must be a better way, but sometimes the obvious choice is the one that escapes. :P

Sheila -- yeah, the problem is that the borders are all different sizes -- they're supposed to be one pixel. And it's not even that Netscape does it different than IE, it's that it's so inconsistent. One table has it at one pixel, another table it looks about three, another one looks about five. Crazy.

We're trying to avoid hardcoding the size, although if it comes down to it I suppose we will. But it's definitely a last resort. Some of the pages on our site are have a *lot*( of content (extended episode synopses, reviews, etc.), and we certainly can't make it small enough for the 640x480 people (for those on &quot;real&quot; resolutions, it's just too narrow for that much text). At the same time, though, the 640 audience is almost 20% of our users, and we'd rather not force them to scroll sideways. It's a big fat catch 22. :(

The HSPACE/VSPACE is something we'll try, though. Can't hurt. :)

Thanks for the tips, guys! (Other tips are still welcome, of course.) :)
nemesis
03-23-2000, 02:43 AM
Justin -- For some reason, your original method didn't work in Explorer for us (which baffled us, because we know how much you prefer Explorer :P). But cellpadding on the outside table (instead of cellspacing on the inside table) works in both browsers.

If only there could be just one browser. Or if, at least, they could all render HTML the same way. Sigh.

At any rate, it's much cleaner and easier -- thanks muchly for the tip!
------------------
---------------------------------
The Complete Buffy Episode Guide
www.buffyguide.com (http://www.buffyguide.com)
Dan Kaplan
03-23-2000, 02:45 AM
If only there could be just one browser. If Microsoft has their way, that will happen any day now...

Doomsayer
Justin
03-23-2000, 11:45 AM
You're right - the reason it didn't work that way is that my way requires the bgcolor on the inside table to be within each <TR> tag - I generally have a thin border around each cell, so that's the way I've always done it. I didn't realize the difference for just a border around the whole table...

I actually don't mind coding for multiple browsers. Even with different IE or Netscape versions you will find inconsistancies. All of it simply presents a challenge :)
You can't code down to the pixel exactly the same in NS, IE, Opera, etc... I can certainly try though - if you place the CNC in IE and Netscape side by side (easiest with two monitors), they are virtually identical in almost every respect. Opera is a different story, but Opera is basically Netscape 3.0 with a little CSS support...

------------------
Justin Nelson
FutureQuest (http://www.FutureQuest.net/index.php) Support
nemesis
03-23-2000, 05:30 PM
You can't code down to the pixel exactly the same in NS, IE, Opera, etc...Well, with the twist on Justin's code, there's no discernible difference in the page on all three of those browsers. :) It may sometimes be a hell of a hassle, but it isn't always impossible. What can I say -- I prefer, whenever possible, that people actually see what I want them to see.
------------------
---------------------------------
The Complete Buffy Episode Guide
www.buffyguide.com (http://www.buffyguide.com)
Justin
03-23-2000, 07:25 PM
The main key between Netscape and IE is that the defaults for a table are not the same in either. Cellpadding, cellspacing, border, etc are defaulted if not specified, and those defaults differ. The other main difference is the default border colors. As long as you specify every aspect of your table, it should show properly. There are other things that may work in one and not the other, so those things should be avoided as well.

Then there is the way IE and Netscape render text boxes - they count characters differently, so size=19 in Netscape is roughly equal to size=30 in IE (which is why I use a variable, based on the USER_AGENT string).

The final thing is that Netscape loses CSS attributes after you either close two (or more) nested tables, or close a table and then use an <HR> tag. I have work-arounds for that as well...

It takes practice, and some time pounding your head on the desk, to get it right - I have to use trial and error, no matter how many times I've coded the same type of HTML layout - it always behaves differently in each browser...

------------------
Justin Nelson
FutureQuest (http://www.FutureQuest.net/index.php) Support