mayhew
asked on
Tables in Netscape 6
Hi folks,
I've got three tables, one after another.
It looks fine in ie and nn4. But in NN6, I'm getting a little white horizontal line between the second and third tables.
Please take a look at www.donmayhew.com in NN6.
I've tried every strange thing I can think of to get rid of it. At one point, I removed the first table, just to see what would happen. That got rid of the space. I put the first table back in, and the space reappeared.
Any help would be appreciated. Thanks.
I've got three tables, one after another.
It looks fine in ie and nn4. But in NN6, I'm getting a little white horizontal line between the second and third tables.
Please take a look at www.donmayhew.com in NN6.
I've tried every strange thing I can think of to get rid of it. At one point, I removed the first table, just to see what would happen. That got rid of the space. I put the first table back in, and the space reappeared.
Any help would be appreciated. Thanks.
Why Are you using three tables. Try it by only using One table tag and create your colums and rows as you go
Place 'm right after each other without any space or break.
...</table><table ...>
CJ
...</table><table ...>
CJ
ASKER
Thanks for the reponses guys.
I tried the code shrinkage to no avail as jastroem and CJ suggested.
To reider, I tried putting everything in one table before I posted this question. It works, but it's much less readable. Also, I like using multiple tables as they render quicker in some browsers.
My feeling was that there is something in Netscape that I'm missing that is causing this thin line of white space to appear and I was hoping someone would know what it was.
I'm using Netscape 6.0 on Win2K. If someone using 4.x and someone else using 6.2 aren't getting problems, then maybe it's a stange little bug that I shouldn't worry about.
I'm going to leave this open for a few more days to see if anyone knows about this bug.
Thanks again.
I tried the code shrinkage to no avail as jastroem and CJ suggested.
To reider, I tried putting everything in one table before I posted this question. It works, but it's much less readable. Also, I like using multiple tables as they render quicker in some browsers.
My feeling was that there is something in Netscape that I'm missing that is causing this thin line of white space to appear and I was hoping someone would know what it was.
I'm using Netscape 6.0 on Win2K. If someone using 4.x and someone else using 6.2 aren't getting problems, then maybe it's a stange little bug that I shouldn't worry about.
I'm going to leave this open for a few more days to see if anyone knows about this bug.
Thanks again.
I looked at your page again in ns 6.2 and under certain sizes after a browser resizing I could reproduce the white line you've got. Especiall when resizing the browser so much that a scroll bar appear.
I looked at the code, the only thing I find is an orphan <td></td> pair at the bottom of the page.
If you wan't images to align "perfect" you shouldn't go for realtive sizes in the <td width=""> and generally I think you should take a closer look on how you've set up the page with nested tables.
/ jörgen
I looked at the code, the only thing I find is an orphan <td></td> pair at the bottom of the page.
If you wan't images to align "perfect" you shouldn't go for realtive sizes in the <td width=""> and generally I think you should take a closer look on how you've set up the page with nested tables.
/ jörgen
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
if you really need the heights thought use abosolute heights instead osf percentages
ASKER
Hi all,
At this point, I have everything in one table. I thought, as I previously mentioned to reider, that this fixed the problem. It does, until I resize. Then the white space shows up again.
So, one table isn't a solution.
I'm curious about what webwoman and reider said about getting rid of percentages. I like the percentages because that way I know the ratios will be approximately the same regardless of the resolution.
webwoman goes on to say get rid of all heights in general. If I had no heights, how would I get the look I want? Use a spacer.gif or something like that?
jastroem, I fixed that <td> thing. Ultradev was trying to correct my code for me.
Out of curiousity, has anyone besides jastroem and me seen this phantom white line?
Thanks again everybody.
At this point, I have everything in one table. I thought, as I previously mentioned to reider, that this fixed the problem. It does, until I resize. Then the white space shows up again.
So, one table isn't a solution.
I'm curious about what webwoman and reider said about getting rid of percentages. I like the percentages because that way I know the ratios will be approximately the same regardless of the resolution.
webwoman goes on to say get rid of all heights in general. If I had no heights, how would I get the look I want? Use a spacer.gif or something like that?
jastroem, I fixed that <td> thing. Ultradev was trying to correct my code for me.
Out of curiousity, has anyone besides jastroem and me seen this phantom white line?
Thanks again everybody.
also the the left image is an background image, and it might be a good idea to strech that cell out to the size you need with a transparent 1 x 1 gif "upsized " to the size you need.
Beleive us...
It is better to use all sizes in px instead of % when you want to have images that must fit perfect in an environment. Also Netscpae is not very famous for rendering % (and by the way px) to a nice output. And besides that... how would you do a 50%/50% split on 601 pixel available screen width - 300.5px each?
I can almost guess that the problem is actually that you are using a bgImage in the left image cell. Why don't you just crop that image to the size you need, and place it that cell as a "normal" <img src>?
/joergen
Beleive us...
It is better to use all sizes in px instead of % when you want to have images that must fit perfect in an environment. Also Netscpae is not very famous for rendering % (and by the way px) to a nice output. And besides that... how would you do a 50%/50% split on 601 pixel available screen width - 300.5px each?
I can almost guess that the problem is actually that you are using a bgImage in the left image cell. Why don't you just crop that image to the size you need, and place it that cell as a "normal" <img src>?
/joergen
No unfortunately I don't have access to netscape 6 on the computer I am on. And I have to agree with you you need the heights in you page or else you wouldn't get the look you want. All I was pointing out was that absolute values would be better because then the page will always look the same. You would just need to put a disclamer on the bottom of your page saying eg best viewed at 800 x 600.
Question for you now
Do you really need the height in the <tr>'s as well as the <td>'s
I'll try to find a way to see your page in nn6
Question for you now
Do you really need the height in the <tr>'s as well as the <td>'s
I'll try to find a way to see your page in nn6
No, you don't need the heights. The cells will size for the images that they contain. If you set the table for an absolute pixel size, it will NOT reflow when the browser resizes, which is what's really the source of your problem.
You want the images to line up in a certain way. If you set the tables/cells as PERCENTAGES, they will resize with the browser window. This will ALWAYS mess it up. If you want the table to be centered in the browser window (which is what I'm assuming you REALLY want) just set the TABLE alignment to CENTER.
If you really do want extra space around the images, yes, use spacer GIFs to set the height/width of the cells, using an extra row/cell to put them in. That's how all the graphics programs do it when you slice up images for mouseovers, and it works very well. They do NOT use percentages, nor heights. They don't even usually use alignments.
What graphics programs do you have? If you have Photoshop/ImageReady or Fireworks (or even PaintShop Pro, I think), you can make ONE graphic and slice it up, allowing the program to reassemble it for you. You'll get much better results, and you'll be able to add mouseover effects as well.
You want the images to line up in a certain way. If you set the tables/cells as PERCENTAGES, they will resize with the browser window. This will ALWAYS mess it up. If you want the table to be centered in the browser window (which is what I'm assuming you REALLY want) just set the TABLE alignment to CENTER.
If you really do want extra space around the images, yes, use spacer GIFs to set the height/width of the cells, using an extra row/cell to put them in. That's how all the graphics programs do it when you slice up images for mouseovers, and it works very well. They do NOT use percentages, nor heights. They don't even usually use alignments.
What graphics programs do you have? If you have Photoshop/ImageReady or Fireworks (or even PaintShop Pro, I think), you can make ONE graphic and slice it up, allowing the program to reassemble it for you. You'll get much better results, and you'll be able to add mouseover effects as well.
I now see better what mayhew want...
He want the images to "sort of" growing when the browser is upsized. Look at the image to the left. But look close... and you will see that marble start to repeating above a certain size. Only, it doesn't repeats nice - if you want that you should use a better image (made for background repeating).
Anyhow, with all respect for your ideas...
The font size, the text on the image doesn't grow when the browser is upsized.
Save yourself these troubles - make the at least the images size static, set the rest to % sizes if you want to have illegable line lenght on very large monitors.
/joergen
He want the images to "sort of" growing when the browser is upsized. Look at the image to the left. But look close... and you will see that marble start to repeating above a certain size. Only, it doesn't repeats nice - if you want that you should use a better image (made for background repeating).
Anyhow, with all respect for your ideas...
The font size, the text on the image doesn't grow when the browser is upsized.
Save yourself these troubles - make the at least the images size static, set the rest to % sizes if you want to have illegable line lenght on very large monitors.
/joergen
OK... now that you have all the pieces together I can see better what you're trying to do.
YOu still only need one table -- but it may have other tables nested in it.
You don't need heights. If you want to force something, use a spacer gif set for a certain pixel height and a width of 1 px. But you shouldn't need many.
One table - and for the effect you want, it would need to be percentages (unless you want to set it at a certain size and center it -- which is probably what I'd do). 4 cells across.
First row, spacers set for maybe 20 px (to give some space at the top). All cells spacers, but not much width. 2 cells have bgcolor, 2 white.
Second row, one spacer w/bgcolor (it can be 1x1, since the height will be set from the other cells), one spacer gif w/bg image, logo set to align right, spacer gif.
Third row, 2 spacers w/bgcolor, name/title graphic set to align right, spacer.
Fourth row, one spacer w/bgcolor, next cell has table with navigation, cell set to align top. Then your main copy, cell set to align top. Last another spacer.
Set the main table to border, cellspacing and cellpadding of 0.
Shouldn't have any gaps, navigation can be however you want, should resize the way you want.
YOu still only need one table -- but it may have other tables nested in it.
You don't need heights. If you want to force something, use a spacer gif set for a certain pixel height and a width of 1 px. But you shouldn't need many.
One table - and for the effect you want, it would need to be percentages (unless you want to set it at a certain size and center it -- which is probably what I'd do). 4 cells across.
First row, spacers set for maybe 20 px (to give some space at the top). All cells spacers, but not much width. 2 cells have bgcolor, 2 white.
Second row, one spacer w/bgcolor (it can be 1x1, since the height will be set from the other cells), one spacer gif w/bg image, logo set to align right, spacer gif.
Third row, 2 spacers w/bgcolor, name/title graphic set to align right, spacer.
Fourth row, one spacer w/bgcolor, next cell has table with navigation, cell set to align top. Then your main copy, cell set to align top. Last another spacer.
Set the main table to border, cellspacing and cellpadding of 0.
Shouldn't have any gaps, navigation can be however you want, should resize the way you want.
ASKER
OK, I need to get caught up.
reider said:
>Do you really need the height in the <tr>'s as well as the <td>'s
No. I've been messing with the page and trying just anything I can think of that might be causing the space. I just haven't taken the height back out of the <tr>'s yet.
jastroem said:
>The font size, the text on the image doesn't grow when the browser is upsized.
Yes that's true, but I can live with that. What I'm trying to accomplish is my understanding of liquid design. I just want to have the page look reasonably consistent regardless of resolution.
I think at this point I have two clear options. Either ignore this problem for the minority of people that will be using Netscape. Or redesign with static sizes a la webwoman and jastroem.
My best guess is that 1/4 to 1/3 of my audience will be using Netscape, so I think the redesign is my best choice in the absence of knowledge about what still appears to be a Netscape bug.
I'll try it and post back. Thanks.
reider said:
>Do you really need the height in the <tr>'s as well as the <td>'s
No. I've been messing with the page and trying just anything I can think of that might be causing the space. I just haven't taken the height back out of the <tr>'s yet.
jastroem said:
>The font size, the text on the image doesn't grow when the browser is upsized.
Yes that's true, but I can live with that. What I'm trying to accomplish is my understanding of liquid design. I just want to have the page look reasonably consistent regardless of resolution.
I think at this point I have two clear options. Either ignore this problem for the minority of people that will be using Netscape. Or redesign with static sizes a la webwoman and jastroem.
My best guess is that 1/4 to 1/3 of my audience will be using Netscape, so I think the redesign is my best choice in the absence of knowledge about what still appears to be a Netscape bug.
I'll try it and post back. Thanks.
ASKER
Ok guys, static heights fixed the problem. I used a spacer.gif to define heights within the cells and it's working fine.
I'm now getting no little white line in Netscape.
Thanks to all for your help and suggestions.
I believe webwoman was the first to suggest getting rid of the heights so I will award this question to her.
I'll also post points for jastroem and reider.
Thanks again.
I'm now getting no little white line in Netscape.
Thanks to all for your help and suggestions.
I believe webwoman was the first to suggest getting rid of the heights so I will award this question to her.
I'll also post points for jastroem and reider.
Thanks again.
I'm happy things worked out for you
I looked at the page in NS 6.2 / win2k and couldn't see any problems with it.
If you have this kind of problems (NS4 is in this sense very kinky...) it's always a good idea to squeez all table code together and remove all line feeds and spaces between tags in the code. You can also remove the height attribute in tables
Copy and paste your tables
Put the original in <!-- comments -->
And then just go ahead and shrink the code like this:
<-- original code -->
<table border="0" height="10%" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="5%" bgcolor="#CC9966"> </
<td background="Marble.jpg" width="20%"> </td>
<td align="right" valign="middle" width="55%" bgcolor="#103121"><img src="name.jpg">  
<td bgcolor="#FFFFFF" width="25%"> </td>
</tr>
</table>
<-- shrinked code -->
<table border="0" height="10%" width="100%" cellpadding="0" cellspacing="0"><tr><td width="5%" bgcolor="#CC9966"> </