z-index Image moving other content 1

[ralphonzo]

I'm trying to place an image above an image rotator, but it just moves the rotator content down:

<table width="920" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
    <img src="phpimages/LXY_Store_sticker.png" alt="LXY Online Store" class="hoverimg" />
    <div class="fadein">
      <img src="phpimages/LXY_trans1.jpg">
      <img src="phpimages/LXY_trans2.jpg">
      <img src="phpimages/LXY_trans3.jpg">
      <img src="phpimages/LXY_trans4.jpg">
    </div>
    </td>
  </tr>
</table>

How can I get it not to interfere with the lower content?

Live:

http://lxyltd.com/news.php

html, body {
	background-color: #23002C;
    padding: 0;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
}
a:link,
a:visited {
	text-decoration:none;
	color:#666;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
}
a:hover,
a:active {
	text-decoration:none;
	color:#FF0000;
}
.oddtext{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #000; text-decoration: none;
	text-align: left;
}
.oddwhitetext{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	color: #fff; text-decoration: none;
	text-align: left;
}
.noddtext{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #fff; text-decoration: none;
	text-align: left;
}
.footerHeader{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 20px;
	color: #000; text-decoration: none
	text-align: left;
}
.fadein { position:relative; width:920px; height:461px; }
.fadein img { position:absolute; left:0; top:0; }
.hoverimg
{
	position:relative;
	left: 400px;
	top:400px;
	z-index:10;
}

Apologies for the tables - as you can see, I've not fully embraced CSS!!

 

[vacunita]

Position:relative does not remove the element from the document flow, so it still takes up space, and has an effect on other elements. If you want to pull it out of the document flow and have to not affect anything else, give the <td> it's in the position relative, and give the img a Position: absolute. Then the z-index becomes more useful.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web &amp; Tech

 

[ralphonzo]

Surprisingly, that worked. Surprising because I actually understand the reason. I wish I could give you two stars, thank you.

 

[ralphonzo]

There's a tiny gap now under the menu bar that I can't shift and wasn't there before I started messing with this issue. Any ideas?

 

[vacunita]

Glad I could help.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web &amp; Tech

 

[darryncooke]

I started to take a look to help but I'm not even going to venture a try.

you built the site entirely out of tables, which is completely 100% non standard compliant. It takes more time to figure out solution to these problems when you do so plus is just incorrect for websites.

I havent used tables in almost 5 years so I'm not going to rack my brain over something that should have taken me about 60 seconds to solve had it been done the right way.

All I can tell you is that the problem most likely lies within EITHER an elements padding OR margin.

which element I do not know. Because you could have also built your navigation with HTML and css and cut down on the code by about 50 %

<ul>
<li>home</li>
<li>company</li>
<li>products</li>
<li>education</li>
<li>news</li>
<li>contact</li>
<li>shopping</li>
</ul>

That's all the HTML you need for that menu. the rest is CSS.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[ralphonzo]

Wow, thanks for that.

 

[vacunita]

Can't seem to pinpoint the reason for the gap, looks like the links are adding some unwanted pixels there, but I have to agree to Darryn, tables just make these things harder than they need to be.
To remove the gap, you could change the height of the div around the menu table, and give it an overflow of hidden. But that just covers up the problem, it doesn't really fix it.

Your already using divs to wrap your tables, not sure why you decided to fall back on tables then.

Like Darryn points out, a list would have been all the markup needed, rather than a convoluted table.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web &amp; Tech