fancy a CSS challenge?

**owen.munday** · Jul 27, 2000 11:19

I'm having continual problems with CSS and netscape, but i think i've nearly got everything sorted except this one thing. I want to layer a table with buttons over another table which just has images on it. I've done the two separately and then wrapped them both in DIV tags, one relatively positioned which goes around both tables, and the one that floats above is absolutely positioned inside the larger DIV. My problem is that Netscape doesn't seem to understand that i want the inner DIV to be absolutely positioned to only the outer DIV, not the edge of the page. Well it sort of understands it because the top is correct, but it keeps moving it to the left.
One easy solution is to relatively position the inner DIV, but then although Netscape moves the images in the table to the desired position, it leaves the links behind, just floating in space. I am going mad. I have tried applying my positioning styles to the tables, and their rows and even cells, i have tried nesting the tables, but all i get is even more bizarre special effects in netscape.
at the moment i am contemplating doing a browser detection test and giving netscape users another version. i need this site to work in netscape 4.x, but it's getting really tempting to just ditch the irritating browser.
anyway, here's the code:

<head>
<style>
#main {position:relative; left:0; top:0; z-index:1}
#front {position:absolute; left:0; top:104; z-index:2}
</style>
</head>

<body leftmargin=0 topmargin=20 marginwidth=0 marginheight=20>

<center>
<div id="main">
<table width=600 height=140 border=0 cellpadding=0 cellspacing=0>
<tr>
<td><img src="images/one.gif" height=140 width=140 border=0></td>
<td><img src="images/logo1.gif" height=140 width=320 border=0></td>
<td><img src="images/training1.gif" height=140 width=140></td>
</tr>
</table>

<div id="front">
<table width=600 height=60 border=0 cellpadding=0 cellspacing=0>
<tr>
<td colspan=9><img src="images/captions.gif" width=600></td>
</tr>
<tr>
<td><img src="images/navslice_r1_c01.gif"></a></td>
<td><a href="docs/upcoming.htm"><img src="images/navslice_r1_c02.gif" border=0></a></td>
<td><a href="docs/work.htm"><img src="images/navslice_r1_c03.gif" border=0></a></td>
<td><a href="docs/gallery.htm"><img src="images/navslice_r1_c04.gif" border=0></a></td>
<td><a href="docs/text.htm"><img src="images/navslice_r1_c05.gif" border=0></a></td>
<td><a href="docs/contact.htm"><img src="images/navslice_r1_c06.gif" border=0></a></td>
<td><a href="docs/specials.htm"><img src="images/navslice_r1_c07.gif" border=0></a></td>
<td><a href="docs/london.htm"><img src="images/navslice_r1_c08.gif" border=0></a></td>
<td><img src="images/navslice_r1_c09.gif"></a></td>
</tr>
</table>
</div>

</div>

</center>
</body>

many many thanks if you can help

twashington · Jul 28, 2000 15:25

if your #main table is at 0,0 try changing it from relative to absolute. that will lock it in the corner no matter what else is going on.
also try closing the main div before opening the front div. i think you are getting your browser cornfused.

------------------
That's just my opinion
t.washington@visto.com

**lynlimz** · Jul 30, 2000 00:05

If I'm correct, under w3 standards, they dun encourage the use of #
but well..still can use. =) heez!

**jizbot** · Jul 30, 2000 09:56

Im still a newb so disregard this comment if it sounds elementary, but if your wanting to place 9 images on top of the "one, logo1, and training1" images.

If those three images are only to be used for looks and not to link from,
maybe it would be easier to combine those three images into one and set it as a background to a table which will then hold the other nine image links?

You could build the table to be 600x140 so the background image would fit. and the image links would take the top half of the table.
(or you could center the links...whatever)

Does this make any sense?

i hope it helps you <=(

User Tag List

Thread: fancy a CSS challenge?

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions