Solved

Tables in Netscape 6

Posted on 2002-03-19
16
191 Views
Last Modified: 2010-04-09
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.
0
Comment
Question by:mayhew
  • 4
  • 4
  • 4
  • +2
16 Comments
 

Expert Comment

by:jastroem
ID: 6880541
hi mayhew

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">&nbsp;</td>
          <td background="Marble.jpg" width="20%">&nbsp;</td>
         <td align="right" valign="middle" width="55%" bgcolor="#103121"><img src="name.jpg">&nbsp;&nbsp;&nbsp;</td>
          <td bgcolor="#FFFFFF" width="25%">&nbsp;</td>
     </tr>
</table>

<-- shrinked code -->

<table border="0" height="10%" width="100%" cellpadding="0" cellspacing="0"><tr><td width="5%" bgcolor="#CC9966">&nbsp;</td><td background="Marble.jpg" width="20%">&nbsp;</td><td align="right" valign="middle" width="55%" bgcolor="#103121"><img src="name.jpg">&nbsp;&nbsp;&nbsp;</td><td bgcolor="#FFFFFF" width="25%">&nbsp;</td></tr></table>
0
 
LVL 1

Expert Comment

by:reider
ID: 6880802
Why Are you using three tables. Try it by only using One table tag and create your colums and rows as you go
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 6880956
Place 'm right after each other without any space or break.

...</table><table ...>

CJ
0
 
LVL 5

Author Comment

by:mayhew
ID: 6881721
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.
0
 

Expert Comment

by:jastroem
ID: 6881896
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
0
 
LVL 19

Accepted Solution

by:
webwoman earned 100 total points
ID: 6882788
Get rid of all the heights.
Make sure all cellspacing/padding is set to 0

And if you really want it to line up correctly, it should be one table, not 3. If you can't deal with one table, get rid of the heights and get rid of the percentages -- allowing something to resize pretty much guarantees that it's not going to line up the way you would like.
0
 
LVL 1

Expert Comment

by:reider
ID: 6882812
if you really need the heights thought use abosolute heights instead osf percentages
0
 
LVL 5

Author Comment

by:mayhew
ID: 6883622
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.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Expert Comment

by:jastroem
ID: 6883770
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

0
 
LVL 1

Expert Comment

by:reider
ID: 6883776
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
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6884004
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.
0
 

Expert Comment

by:jastroem
ID: 6884063
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
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6884070
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.
0
 
LVL 5

Author Comment

by:mayhew
ID: 6884637
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.
0
 
LVL 5

Author Comment

by:mayhew
ID: 6884666
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.
0
 
LVL 1

Expert Comment

by:reider
ID: 6885327
I'm happy things worked out for you
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
HTML table 7 54
Location of Javascript on HTML page 3 25
Cannot scroll down on html page 2 26
Glyph icons in Bootstrap 3 4 14
Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now