CSS Mind bender perhaps for LISSA? SPAN IMAGE [Archive] - Lissa Explains it All: Web Design Forums

View Full Version : CSS Mind bender perhaps for LISSA? SPAN IMAGE

Photodaddy

01-02-2006, 02:05 AM

I am trying to get the image in the center from the right side text as well as the left.. I want the hover over text to be absolute posision same as the one on the left.. I also want this code to work on myspace as well as IE.. I know I ask alot.. I also am crash course in css learning to make matters more fun.. I will be tinkering with that code some more.. I modified a bunch of this code.. http://www.lissaexplains.com/forum/showthread.php?t=42826&highlight=span+image+absolute
and then found it faulty in my version of IE. I use Opera and Firefox but then I am also feeling realy dumb right now! Please help me if you have advanced knowledge of span imaging..

MY CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style><endnote><head>
<style><endnote><head>
<style></style>
<title></title>
</head>
<body>
<style type="text/css">a, a.man, a:link, a:visited
{font-family:verdana, arial, times new roman;color:990033; font-size:10pt; font-weight:normal; text-decoration:none; font-style:normal}
a:active, a:hover
{font-family:verdana, arial, times new roman;color:990033; font-size:10pt; font-weight:normal; text-decoration:none; font-style:normal;}
a img {border-color:transparent}
a span{display:none;}
a:hover span{
display:block;
position:absolute;
top:285px;
left:235px;
width:450px;
height:450px;
padding:5px;
margin:10px;
z-index:2;
filter:none;
font-size:10px;
font-family:arial;
text-align:center;
text-decoration:none;}
body{
font-family:verdana, arial, times new roman;
scrollbar-face-color:990033;
scrollbar-highlight-color:990033;
scrollbar-3dlight-color:000000;
scrollbar-darkshadow-color:000000;
scrollbar-shadow-color:990033;
scrollbar-arrow-color:000000;
scrollbar-track-color:990033;}
.chrispix2 {
background-color:black;
background-image:url("");
left:170px;top:120px;
z-index:2;
overflow:none;
border-style:ridge;
border-width:2px;
border-color:990033;}
.chrispix3 {
background-color:black;
background-image:url("");
left:900px;top:120px;
z-index:2;
overflow:none;
border-style:ridge;
border-width:2px;
border-color:990033;}
</style>
<div style="position: absolute; z-index: 2; top: 110px; left: 4px;">
<table
style="text-align: left; z-index: 2; background-color: rgb(0, 0, 0); width: 185px; height: 400px;">
<tbody>
<div class="chrispix2"
style="z-index: 2; margin-left: 10px; margin-top: 170px; width: 170px; color: rgb(197, 0, 0); top: 100px; left: 5px;"><a
href="http://www.noflash.com">TEST
WITH TABLE!!<span><img
src="http://img.photoamp.com/i/MOQh6Xg.gif" width="400"></span></a>
</div>
</tbody>
</table>
</div>
<div style="position: absolute; z-index: 2; top: 119px; left: 780px;">
<table
style="text-align: left; z-index: 2; background-color: rgb(0, 0, 0); width: 185px; height: 400px;">
<tbody>
<div
style="z-index: 2; margin-left: 10px; margin-top: 10px; width: 170px; color: rgb(197, 0, 0); top: 100px; left: 3px;"
class="chrispix2"><a href="http://www.noflash.com">TEST
WITH TABLE!!<span><img
src="http://img.photoamp.com/i/MOQh6Xg.gif" width="400"></span></a>
</div>
</tbody>
</table>
</div>
</body>
</html>

----This is for myspace----
----I have no URL am editing locally----
#Should I be using tables?
#SHould I be using ID tages for each link? If so will that work in IE?

Photodaddy

01-02-2006, 02:13 AM

Here is some more code this was not working in IE.. Does it work in your browser? No absolutes here.. i was just testing it.. Looks fine in Opera and FFox.. I wondered if I could css space the div's by 3px somehow IF I get this working in IE 6.0..

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo to test</title>

<style type="text/css">a, a.man, a:link, a:visited
{font-family:verdana, arial, times new roman;color:990033; font-size:10pt; font-weight:normal; text-decoration:none; font-style:normal}

.chrispix2 {
background-color:black;
background-image:url("");
left:500px;top:500px;
z-index:2;
overflow:none;
style="margin-left: 10px;
margin-top: 10px;
width: 150px;
border-style:ridge;
border-width:2px;
border-color:990033;}
.chrispix3 {
background-color:black;
background-image:url("");
left:170px;top:120px;
z-index:2;
overflow:none;
style="margin-left: 10px;
margin-top: 10px;
width: 150px;
border-style:ridge;
border-width:2px;
border-color:990033;}
</style>
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);" alink="#000099" link="#000099" vlink="#990099">

<div class="chrispix3" id="link1"><a href="#">RIP
IN HEAVEN
<span><img src="http://image.imbase.nl/users/chris_anda_photography/umbar_furnace.gif" width="350"></span></a></div>

<div class="chrispix3" id="link2"><a href="#">RIP
IN HEAVEN
<span><img src="http://image.imbase.nl/users/chris_anda_photography/umbar_furnace.gif" width="350"></span></a></div>

<div class="chrispix2" id="link3"><a href="#">RIP
IN HEAVEN
<span><img src="http://image.imbase.nl/users/chris_anda_photography/umbar_furnace.gif" width="350"></span></a></div>

<div class="chrispix2" id="link4"><a href="#">RIP
IN HEAVEN
<span><img src="http://image.imbase.nl/users/chris_anda_photography/umbar_furnace.gif" width="350"></span></a></div>

</body>
</html>

Photodaddy

01-02-2006, 04:31 PM

I figured it out.. dead post. I used my tables wrong somehow! Sorry for the bother.. It took me 6 more hours to figure it out though.