#1
  1. No Profile Picture
    Self-banned
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Feb 2004
    Location
    http://middle.nowhere.com
    Posts
    2,288
    Rep Power
    3606

    IE is weird... (div issue)


    Hey gang, quick question. I'm tring to make a "Thermometer" of sorts for my site, and instead of making lots of images in photoshop, I figured I could do it a little more dynamicly using divs and css. I was right, as Firefox displays my code perfectly, however, IE messes up the whole thing by keeping the allocated space for the one div in the place where its positioned in the code. Dumb thing. I figure it has something to do with the display property, but I'm not sure which to use. Any suggestions? Thanks!

    PHP Code:
    <div style="height: 500px; width: 100px; padding: 0px; margin: 0px; border: 0px black solid; background: url('meter_color.jpg');">
      <
    div style="position: relative; top: 0px; left: 0px; height: 125px; width: 100px; padding: 0px; margin: 0px; background: #FFFFFF; z-index: 1;"></div>
      <
    div style="position: relative; top: -125px; left: 0px; height: 500px; width: 100px; padding: 0px; margin: 0px; background: url('mask.gif'); z-index: 2;"></div>
    </
    div
    (images attached)

    -Jim
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    try to use absolute position instead of relative.
    remember to set position relative to the parent element.

    Code:
    <div style="position: relative;
    	    height: 500px;
    	    width: 100px;
    	    padding: 0px;
    	    margin: 0px;
    	    border: 0px black solid;
    	    background: url('meter_color.jpg');">
    
    		<div style="position: absolute;
    	    	    	    top: 0px;
    			    left: 0px;
    			    height: 125px;
    			    width: 100px;
    			    padding: 0px;
    			    margin: 0px;
    			    background: #FFFFFF;
    			    z-index: 1;">
    		</div>
      		<div style="position: absolute;
    			    top: 0px;
    			    left: 0px;
    			    height: 500px;
    			    width: 100px;
    			    padding: 0px;
    			    margin: 0px;
    			    background: url('mask.gif');
    			    z-index: 2;">
      		</div>
    </div>
    Last edited by Akh; June 1st, 2004 at 08:24 PM.
  4. #3
  5. No Profile Picture
    Self-banned
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Feb 2004
    Location
    http://middle.nowhere.com
    Posts
    2,288
    Rep Power
    3606
    Originally Posted by Akh
    try to use absolute position instead of relative.
    remember to set position relative to the parent element.
    OK, I thought relative positioning WAS "relative" to the parent element. I must have misread w3c. That worked, so I'll keep it in mind. Thanks!

    -Jim

IMN logo majestic logo threadwatch logo seochat tools logo