homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

Layering Issue With Netscape
Background image duplicates within multiple tables

10+ Year Member

Msg#: 39 posted 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. :-)



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

Msg#: 39 posted 7:32 am on Aug 22, 2000 (gmt 0)

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?


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

Msg#: 39 posted 6:31 pm on Nov 24, 2000 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved