SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need helping getting divs to work in IE

    Hi all,

    I posted this in the general development forum but wasn't getting any responses so I thought I'd see if I could get some help here.

    I programed a little rails web-based game to keep my wife entertained at work, but I can only get it to display properly in Firefox. The part I'm having problems with is a sort of complicated CSS layout that overlays some divs on top of a picture to obscure the picture and then uses RJS to remove one div at a time. The only way I could get the divs to line up right was to use relative positioning and have the code specify the position on the fly. This works great in FF but in IE the divs don't position properly or something (however they seem to be covering the picture properly, which is really confusing). I'd really appreciate it if someone could help me get this working in IE (Safari support would be cool too but I can live without for the time being : )

    The link is:

    http://rubyman.texxors.com

    Thanks,
    Bryan
    E-card for those weird situations -
    www.uncomfortablesituations.com

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I know nothing about the other code but if you want the css to place the divs on top of the picture then you should use absolute positioning and not relative positioning because relative positioning preserves the original space the element occupied.

    To cover up the image you would simply place the divs on top with absolute positioning.

    e.g.
    Code:
    <div id="picture" style="text-align: center;clear:both; margin:10px auto;background-color: transparent; background-repeat: no-repeat; background-image: url('http://mud.mm-a5.yimg.com/image/1447042505'); position: relative; z-index: 0; opacity: 1; width: 100px; height: 135px;">
     <div id="picture_cover0" style="text-align: left; background-color: #f0f; position: absolute; top: 0px; left: 0px; z-index: 1; width: 20px; height: 135px; opacity: 1;">0</div>
     <div id="picture_cover1" style="text-align: left; background-color: #ff0; position: absolute; top: 0; left: 20px; z-index: 2; width: 20px; height: 135px; opacity: 1;"> 1</div>
     <div id="picture_cover2" style="text-align: left; background-color: #333; position: absolute; top: 0; left: 40px; z-index: 3; width: 20px; height: 135px; opacity: 1;">2 </div>
     <div id="picture_cover3" style="text-align: left; background-color: white; position: absolute; top: 0; left: 60px; z-index: 4; width: 20px; height: 135px; opacity: 1;">3 </div>
     <div id="picture_cover4" style="text-align: left; background-color: #0ff;position:absolute; top: 0; left: 80px; z-index: 5; width: 20px; height: 135px; opacity: 1;"> 4</div>
    </div>
    Of course those inline styles should be changed to classes and removed to the external stylesheet as they are a nightmare to maintain when they are inline.

  3. #3
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    HI,

    because relative positioning preserves the original space the element occupied.
    Ahhhh...that's probably it, that would make the errors in IE make sense. I'll give that a shot. And hopefully I'll eventually get around to cleaning up the code (i.e the inline styles). I put this together quickly for the wife, who couldn't care less about inline styles : )

    Thanks for the help,
    Bryan

    Follow up:
    This works great now, thanks Paul.
    Last edited by choz; Aug 6, 2006 at 17:19.
    E-card for those weird situations -
    www.uncomfortablesituations.com


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
  •