Welcome to WebmasterWorld Guest from 22.214.171.124
Forum Moderators: incrediBILL
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. :-)
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?
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.