Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Resolve Problem With Absolute Positioning Nested Inside Relative

  1. #1
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Resolve Problem With Absolute Positioning Nested Inside Relative

    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

    Code:
    <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
    Code:
    <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

  2. #2
    Join Date
    Feb 2010
    Location
    Texas
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

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

  3. #3
    Join Date
    Aug 2009
    Posts
    92
    Thanks
    0
    Thanked 9 Times in 9 Posts

    Default

    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>

  4. #4
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default New Method, New Issues

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

    1. Both images are combined side-by-side into a single image, like a sprite.
    2. Double-pic is displayed in a div large enough to see only one of the images
    3. Hide the overflow.
    4. 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

    Code:
    <!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>

  5. #5
    Join Date
    Sep 2008
    Location
    Seattle, WA
    Posts
    135
    Thanks
    1
    Thanked 11 Times in 11 Posts

    Default

    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:

    Code:
    .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:

    Code:
    <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.

  6. #6
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Try:
    Code:
    <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, which is a javascript solution.

  8. #8
    Join Date
    Aug 2009
    Posts
    92
    Thanks
    0
    Thanked 9 Times in 9 Posts

    Default

    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>

  9. #9
    Join Date
    Sep 2008
    Location
    Seattle, WA
    Posts
    135
    Thanks
    1
    Thanked 11 Times in 11 Posts

    Default

    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

  10. #10
    Join Date
    Aug 2009
    Posts
    92
    Thanks
    0
    Thanked 9 Times in 9 Posts

    Default

    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">
    <!--
    #computeworldshop-01ll {
    position:absolute;
    //left:230px;
    top:80px;width:677px;height:155px;}
    #computeworldshop-01 {
    position:absolute;
    left:0px;top:0px;width:677px;height:155px;}
    #computeworldshop-02 {
    position:absolute;left:0px;top:155px;width:86px;height:22px;}
    #computeworldshop-03 {
    position:absolute;left:86px;top:155px;width:87px;height:22px;}
    #computeworldshop-04 {position:absolute;left:173px;top:155px;width:88px;height:22px;}
    #computeworldshop-05 {position:absolute;left:261px;top:155px;width:83px;height:22px;}
    #computeworldshop-06{
    position:absolute;left:344px;top:155px;width:333px;height:736px;}
    #computeworldshop-07 {position:absolute;left:0px;top:177px;width:344px;height:714px;}
    -->
    </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>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •