SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member MaiZey's Avatar
    Join Date
    Dec 2001
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute Positioning with dynamic content/hidden divs in IE

    Hi,

    I have a website that is using what I call dynamic content/hidden divs. For example, when you click a checkbox another div pops down.

    The problem I'm having is that in IE6 (Firefox/IE7/Opera etc are fine) the absolute positioning does not move after a hidden div is shown. This is an issue as I have some classes that have a background image to provide a gradient border effect. The classes are absolute positioned at the bottom of the page as follows:

    Code:
    .contentarea .lbb { background: url(../images/wrapper/content_borderlb.gif); position: absolute; bottom: 34px; height: 134px; left: 0; } /*for the left gradient border*/
    
    .contentarea .rbb { background: url(../images/wrapper/content_borderrb.gif); position: absolute; bottom: 34px; height: 134px; right: 0px; width: 5px;} */for the right gradient border*/
    When you expand the DIV in IE, the page expands, but those absolute positioned divs stay in exactly the same place! The result can be seen in this comparison screen shot (the problem issue is hilighted with an arrow):
    http://joshsphotos.com/absolute/comparison.gif

    Does anyone have any suggestions?

    FYI, the page is available here so you can see yourself. If you test it on Firefox/IE7 vs IE6 you should see what I'm talking about:

    http://joshsphotos.com/absolute/star...withicons.html
    http://joshsphotos.com/absolute/css/style.css

    Thanks!
    Josh

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    All for that slight gradient..
    You could include the bottom left gradients in the background image you can simply add the background image to the div .inside

    .contentarea .inside {
    background: white url(../images/wrapper/left_right_bottom edges.gif) no-repeat bottom left;
    }
    Then you can do away with the bottom left and right divs that are giving you the hastle.

    You should really be using more divs with id's, wrapper shouldn't be a class name.


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
  •