Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Layering Issue With Netscape

Background image duplicates within multiple tables



3:49 am on Aug 22, 2000 (gmt 0)

Redesigning our website and have a perplexing problem that I know there is probably a good answer for. I design with FrontPage so, of course, everything looks great in IE5.

I am redesigning the navbar and have a background ring image within a table. I also have eight tables within the navbar area table to create a layer effect and have better positioning control over placement of the navbar buttons.

However, when testing for Netscape, each of the navbar button tables wants to duplicate the background ring image and stuck at what to do. The test page is located at [graphicmemory.com...] and would appreciate viewing it and the source code in both browsers for some feedback to eliminating this problem. I'm sure I'm not the first webmaster to experience this. :-)


7:32 am on Aug 22, 2000 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Netscape can be very rough with background images. You ought to see what it can to a jpeg! Some versions of Explorer for the Macintosh O/S will also act up and mis-position background images.

You'll need to rethink the HTML code to get the effect you want. I can see two directions. One is don't define any background images at all. Instead, lay out the entire area the way you want it to look in your graphic program, including the big background ring and all your nav buttons. Next flatten it and slice up that complete graphic. Then hold the pieces together in a table.

A second approach is to keep the background image in the <TD> tag, but eliminate the nested table that contains your nav buttons (this table is what confuses Netscape). Instead, just declare the buttons as inline graphics inside the same cell that has the background image, possible using valign="top".

By including enough transparency around the edges of each nav button you can position them in the table cell exactly where you want. The background should show through without any problems in either browser. Ideally, each nav graphic would be the full width of the table cell, with a <BR> between each image.

Hope this helps. By the way, did you notice that even in Explorer your nav buttons still eat away a little piece of the big background ring right now?


6:31 pm on Nov 24, 2000 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

A simple fix for this tiling problem has been posted in other threads, but I wanted to include it here in the original thread, for the sake of completeness. -tedster

Set background="null" in the nested table tag. Both major browsers will let a single background image show through the way you would expect.


Featured Threads

Hot Threads This Week

Hot Threads This Month