Resolve Problem With Absolute Positioning Nested Inside Relative [Archive]

View Full Version : Resolve Problem With Absolute Positioning Nested Inside Relative

johnywhy

03-11-2010, 07:04 PM

Why does GOOD VERSION, below, work perfectly, but the BAD VERSION fails (all browsers)?

The only difference is the order of TOPIMAGE and BOTTOMIMAGE in the 2nd IMAGEBUTTON.

How can I adjust my CSS so both versions work?

GOOD VERSION

<style>
a.IMAGEBUTTON img.TOPIMAGE { z-index:1; position:absolute; }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; }
a.IMAGEBUTTON img {width:150px; }
</style>

<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>

<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>

BAD VERSION

<style>
a.IMAGEBUTTON img.TOPIMAGE { z-index:1; position:absolute; }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; }
a.IMAGEBUTTON img {width:150px; }
</style>

<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>

<a class="IMAGEBUTTON" href="http://google.com" >
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
<img class="TOPIMAGE" src="pics\pic2.jpg" />
</a>

THANKS

Josephbm91

03-15-2010, 09:25 AM

Could I see a print screen of what it should look like?

stringcugu

03-15-2010, 10:01 AM

your BAD VERSION
had the image wrong place
-----------------
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
<img class="TOPIMAGE" src="pics\pic2.jpg" />
</a>
----------TO------------top on top-----BOTTOM on--BOTTOM-
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>
<style>
a.IMAGEBUTTON img.TOPIMAGE { z-index:1; position:absolute; }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; }
a.IMAGEBUTTON img {width:150px; }
</style>

<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="usa9.gif" />
<img class="BOTTOMIMAGE" src="usa.gif" />
</a>

<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="usa9.gif" />
<img class="BOTTOMIMAGE" src="usa.gif" />
</a>
<style>
a.IMAGEBUTTONx img.TOPIMAGEx { z-index:1; position:absolute; }
a.IMAGEBUTTONx:hover img.TOPIMAGEx { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; }
a.IMAGEBUTTONx img {width:150px; }
</style>

<a class="IMAGEBUTTONx" href="http://google.com" >
<img class="TOPIMAGEx" src="usa9.gif" />
<img class="BOTTOMIMAGEx" src="usa.gif" />
</a>

<a class="IMAGEBUTTONx" href="http://google.com" >
<img class="TOPIMAGEx" src="usa9.gif" />
<img class="BOTTOMIMAGEx" src="usa.gif" />
</a>

johnywhy

03-15-2010, 08:41 PM

i'm trying a new, simpler, better-performing approach:

Both images are combined side-by-side into a single image, like a sprite.
Double-pic is displayed in a div large enough to see only one of the images
Hide the overflow.
On hover, move the image sideways, revealing the hidden region.

But it has some issues:

Pics are laid out vertically instead of side-by-side. I want side-by-side.
hover does not work in IE

here's a working version:
http://root.inyourear.org/hover-overflow.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Overflow Rollover Method</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<style type="text/css">

div.PICDIV
{
width:200px; height:140px; overflow:hidden;
}

img.DOUBLEPIC
{
position:relative;
}

div.PICDIV:hover img.DOUBLEPIC
{
left:-305px;
}
</style>
</head>
<body>

<div class="PICDIV" width:160px; height:225px;>
<a href="#" class="PICLINK">
<img class="DOUBLEPIC" src="pics/doublepic.png" />
</a>
</div>

<div class="PICDIV" width:160px; height:225px;>
<a href="#" class="PICLINK">
<img class="DOUBLEPIC" src="pics/doublepic.png" />
</a>
</div>

<div class="PICDIV" width:160px; height:225px;>
<a href="#" class="PICLINK">
<img class="DOUBLEPIC" src="pics/doublepic.png" />
</a>
</div>

</body>
</html>

simcomedia

03-15-2010, 11:34 PM

Here's an uncomplicated and cross-browser hover method. This is set up for vertical sprites but just change the positioning and the dimensions and it will work for your horizontal stuff as well:

.viewbutton {
display:block;
height: 40px;
width: 200px;
background:url('../images/view-sprite.jpg') no-repeat;
background-position:0 0;
cursor: pointer;
margin-left: 30px;
float: left;
}
.viewbutton span {
display: none;
}

.viewbutton:hover {
background-position: 0 -40px;
}

Then use it like this:

<a href="blahblah.html" class="viewbutton"><span>Link Text Here</span></a>

The <span> is hidden so it won't show anywhere but gives you some flexibility in SEO stuff by having the text in place.

johnywhy

03-16-2010, 01:06 AM

thanks, but your method doesn't do what i'm trying to achieve. check out this page, to see what i need:

http://root.inyourear.org/hover-overflow.htm

i don't want to put any url's in the stylesheet.

traq

03-16-2010, 01:35 AM

Try:
<style type="text/css">

div.PICDIV
{
width:200px; height:140px; overflow:hidden; border: 1px solid blue; display: -moz-inline-stack; display: inline-block;
}

img.DOUBLEPIC
{
position:relative; border: 0;
}

div.PICDIV:hover img.DOUBLEPIC
{
left:-305px;
}
</style>
As for the :hover, IE just doesn't do that well. You might try whatever:hover (http://www.xs4all.nl/~peterned/csshover.html), which is a javascript solution.

stringcugu

03-16-2010, 02:26 AM

don't use to much white space in the page
<style type="text/css">
div.PICDIV
{width:200px; height:140px; overflow:hidden; }
img.DOUBLEPIC
{position:relative;}
div.PICDIV:hover img.DOUBLEPIC
{left:-305px;}
#cc0
{position:relative;left:221;top:220;}
#cc
{position:absolute;left:2;top:220;}
#cc1
{position:absolute;left:822;top:220;}
</style>
</head>
<body bgcolor = "#ffffff" text="#000000" link="#ee6ee6" alink="#f5cac7" vlink= "#666666">
<div id=cc0 class="PICDIV" width:160px; height:225px;>
<a href="#" class="PICLINK">
<img class="DOUBLEPIC" src="http://root.inyourear.org/pics/doublepic.png" />
</a>
</div>
<div id=cc class="PICDIV" width:160px; height:225px;>
<a href="#" class="PICLINK">
<img class="DOUBLEPIC" src="http://root.inyourear.org/pics/doublepic.png" />
</a>
</div>
<div id=cc1 class="PICDIV" width:160px; height:225px;>
<a href="#" class="PICLINK">
<img class="DOUBLEPIC" src="http://root.inyourear.org/pics/doublepic.png" />
</a>
</div><style>#slideoutSidebar1r {position:absolute; left:1; top:0; width:200; height:170; clip:rect(0,200,170,0); background-color:red; layer-background-color:red;}</style>
<style>#slideoutSidebar1r0 {position:absolute; left:220; top:0; width:200; height:1700; clip:rect(0,200,170,0); background-color:green; layer-background-color:green;}</style>
<style>#slideoutSidebar1r00 {position:absolute; left:520; top:0; width:200; height:170; clip:rect(0,200,170,0); background-color:yellow; layer-background-color:yellow;}</style>
<style>#slideoutSidebar1r000 {position:absolute; left:820; top:0; width:200; height:170; clip:rect(0,200,170,0); background-color:blue; layer-background-color:blue;}</style>
<DIV ID="slideoutSidebar1r"class="PICDIV"><P ALIGN=CENTER><a href="#" class="PICLINK"><img class="DOUBLEPIC" src="http://root.inyourear.org/pics/doublepic.png" /><A HREF="javascript:slideout(slideout1)">Link 1</A></P></DIV>
<DIV ID="slideoutSidebar1r0"class="PICDIV"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout1)">Link 1</A><a href="#" class="PICLINK">
<img class="DOUBLEPIC" src="http://root.inyourear.org/pics/doublepic.png" /> </P></DIV>
<DIV ID="slideoutSidebar1r00"class="PICDIV"><P ALIGN=CENTER><a href="#" class="PICLINK">
<img class="DOUBLEPIC" src="http://root.inyourear.org/pics/doublepic.png" /><A HREF="javascript:slideout(slideout1)">Link 1</A></P></DIV>
<DIV ID="slideoutSidebar1r000"class="PICDIV"><P ALIGN=CENTER>
<A HREF="javascript:slideout(slideout1)">Link 1</A>
<a href="#" class="PICLINK"><img class="DOUBLEPIC" src="http://root.inyourear.org/pics/doublepic.png" /> </P></DIV>
</body>
</html>

simcomedia

03-19-2010, 12:15 AM

i don't want to put any url's in the stylesheet.

????? I don't understand. You have to have a src="" somewhere. My method works perfectly and in all browsers. Your problem is that a rollover sprite uses a single image as a background and you're trying to make a standard image do a rollover. That's why IE doesn't like it. It's treating it like an image, which is what it is when you use src="" instead of the url('background.jpg') method in the CSS.

My code works. Try it, you'll like it :)

stringcugu

03-19-2010, 12:27 AM

you can also put it a table
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Overflow Rollover Method</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
div.PICDIV
{width:200px; height:140px; overflow:hidden; }
img.DOUBLEPIC
{position:relative;}
div.PICDIV:hover img.DOUBLEPIC
{left:-305px;}
</style>
</head>
<body>
<STYLE TYPE="text/css">

</STYLE>
<table border="0" cellspacing="0" cellpadding="0" width=0 height=0>
<tr>
<td>
<div class="PICDIV" width:160px; height:225px;ALIGN=CENTER>
<a href="#" class="PICLINK">
<img class="DOUBLEPIC" src="http://root.inyourear.org/pics/doublepic.png" />
</a>
</div></td><td>
<div class="PICDIV" width:160px; height:225px;ALIGN=CENTER>
<a href="#" class="PICLINK">
<img class="DOUBLEPIC" src="http://root.inyourear.org/pics/doublepic.png" />
</a>
</div></td>
<td>
<div class="PICDIV" width:160px; height:225px;ALIGN=CENTER>
<a href="#" class="PICLINK">
<img class="DOUBLEPIC" src="http://root.inyourear.org/pics/doublepic.png" />
</a>
</div></td>
<td>
<div class="PICDIV" width:160px; height:225px;ALIGN=CENTER>
<a href="#" class="PICLINK">
<img class="DOUBLEPIC" src="http://root.inyourear.org/pics/doublepic.png" />
</a>
</div>
</td>
<td>
<div class="PICDIV" width:160px; height:225px;ALIGN=CENTER>
<a href="#" class="PICLINK">
<img class="DOUBLEPIC" src="http://root.inyourear.org/pics/doublepic.png" />
</a>
</div></td>
</tr>
</table>

BLiZZaRD

03-19-2010, 02:17 AM

Dude.. Stringcugu... wrap in code tags man... seriously..

traq

03-19-2010, 03:56 AM

^seconded

also, "too much whitespace" is good for making code human-readable.

Your suggestions have a lot of depreciated elements ("bgcolor", "align", etc.), unnecessary javascript (image positioning is better handled in css, as seen in simcomedia's suggestions, or even with a simple onclick=whatever), and other poor practices (multiple <style> sections mixed in with markup in the <body>, using tables for layout, etc.).

I don't mean to belittle your efforts, and I hope I don't offend you by saying this. If you straighten out your markup and learn more about current best practices, your code will be simpler, stronger, and more forward-compatible.