2 Replies - 23816 Views - Last Post: 10 August 2011 - 04:08 PM

#1 raybur   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 09-August 11

relative and absolute positioning not working in ie9

Posted 09 August 2011 - 11:31 PM

I'm just figuring out how to use absolute inside a relative element to shift an image without changing the flow of the rest of the html. It's working for Firefox 4, but not IE 9.

In firefox the div element doesn't cause a hole in the flow. The div and the image inside is simply moved over to where they should be. But in IE, the image is sitting there as part of the flow bumping down the next things (the text and span tags) and the image isn't moving over to the right at all.

I've tried wrapping the div in an another div but that made no difference. Am I crazy to think this is supposed to work?

I'm inserting the div and image tags dynamically in the client in javacript.
    
    var ports = getPortsNeeded();

    if (isNaN(ports) || ports < 10) {
        return;
    }
    var dataDrives = ports - 1;
    var prevTB = dataDrives * 2;
    var newTB = dataDrives * 3;
    var imageTB = prevTB.toString() + '-' + newTB.toString();
    var imagePath = "assets/templates/v30011/" + imageTB + ".png";


    
    
    var spantag = document.getElementById('product_id');
    var pos = getPos(spantag);
    var newdiv = document.createElement("div");
    newdiv.setAttribute("id", "terabytesDiv");
    newdiv.setAttribute("style", "width:0;height:0; top: -60px;left: 230px;position:relative;z-index: 1; visibility: hidden;");
    //spantag.parentNode.lastChild.appendChild(newdiv);
    //spantag.appendChild(newdiv);
    // Stick the newdiv in the tb but before the spantag .
    //spantag.parentNode.parentNode.insertBefore(newdiv, spantag.parentNode);
    var imgtag = document.createElement("img");
    imgtag.setAttribute("id", "terabytes_img");
    imgtag.setAttribute("src", "assets/templates/v30011/" + imageTB + ".png");
    imgtag.setAttribute("style", "position:absolute;z-index: 2;visibility: hidden;width:200px;height:146px;left:0;top:0");
    newdiv.appendChild(imgtag);
    var aNode = spantag.parentNode;
    for (var i = 0; i < 10; i++) {
        if (aNode.tagName.toLowerCase() == 'td') {
            aNode.insertBefore(newdiv, aNode.firstChild);
            break;
        }
        aNode = aNode.parentNode;
    }   
    //document.body.appendChild(newdiv);
    //if the image actually exists then show it.
    $('#terabytes_img').load(function() {
        // ... loaded
        $('#terabytes_img').css('visibility', 'visible');
        $('terabytesDiv').css('width', '200');
        $('terabytesDiv').css('height', '146');
        $('terabytesDiv').css('left', '+200');
    }).error(function() {
        // not loaded
        return;
    });





This bit I copied from firebug.
  <table cellspacing="0" cellpadding="0" border="0">
    <tbody>
      <tr>
        <td>
          <div id="terabytesDiv" style=
          "width:0;height:0; top: -60px;left: 230px;position:relative;z-index: 1; visibility: hidden;">
          <img id="terabytes_img" src="assets/templates/v30011/38-57.png" style=
          "position: absolute; z-index: 2; visibility: visible; width: 200px; height: 146px; left: 0pt; top: 0pt;"
          name="terabytes_img"></div><strong>Item Id:&nbsp;<span id="product_id" style=
          "display: inline; visibility: visible;">420-20-18</span></strong>
        </td><!--START: totalrating-->

        <td style="padding: 0px 0px 0px 25px;"><img alt="review" src=
        "assets/templates/common/images/star5.png"></td><!--END: totalrating-->
      </tr>
    </tbody>
  </table>



Is This A Good Question/Topic? 0
  • +

Replies To: relative and absolute positioning not working in ie9

#2 BetaWar   User is offline

  • #include "soul.h"
  • member icon

Reputation: 1513
  • View blog
  • Posts: 8,290
  • Joined: 07-September 06

Re: relative and absolute positioning not working in ie9

Posted 10 August 2011 - 07:16 AM

This may not be the problem in this particular case, but I find that IE requires that the position left and top attributes have a unit (like px) at the end to work properly and FF requires that there is no unit. This may be your problem, though I haven't ever tried positioning things with jQuery so it may be a non-issue here.

(I can't test it at the moment because my work machine is running ArchLinux)
Was This Post Helpful? 0
  • +
  • -

#3 raybur   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 09-August 11

Re: relative and absolute positioning not working in ie9

Posted 10 August 2011 - 04:08 PM

Solved. I left some notes in the code below.
Note to self: don't use the setAttribute method to add style information when using createElement.

    var ports = getPortsNeeded();

    if (isNaN(ports) || ports < 10) {
        return;
    }
    var dataDrives = ports - 1;
    var prevTB = dataDrives * 2;
    var newTB = dataDrives * 3;
    var imageTB = prevTB.toString() + '-' + newTB.toString();
    var imagePath = "assets/templates/v30011/" + imageTB + ".png";
    /*
        Working in IE9 and Firefox v4.
        Working example of an image set to position absolute inside of a div tag
        that is set to position relative and the size of the div tag is width=0 height=0
        so it won't interfer with the page flow.  It doesn't leave any hole in the flow.
         
        Nasty gotcha:  took me a full day to figure this out.  
        When creating new elements, don't use setAttribute to add style information.
        Apparently in IE, the setAttribute method is somewhat broken.
        So add the style information in a separate CSS file and use #id.
        IE seems to ignore any style info added using setAttribute.  Of course it works in firefox.

        Also noticed:
        With IE you can add a complete tag with attributes in the createElement method, 
        making it seem like that is an ok way to add html but it's not and firefox will ignore
        any elements created that way.
        Firefox expects that only the tagName be in the createElement('tagname') method so stuff
        like the id has to be added to it afterwards using the setAttribute method.
    */
    var spantag = document.getElementById('product_id');
    var pos = getPos(spantag);
    var newdiv = document.createElement("div");
    newdiv.setAttribute("id", "terabytesDiv");
    var imgtag = document.createElement('img');
    imgtag.setAttribute("id", "terabytesImg");
    imgtag.setAttribute("src", imagePath);
    imgtag.setAttribute("style", 'visibility:hidden;');
    newdiv.appendChild(imgtag);
    var aNode = spantag.parentNode;
    for (var i = 0; i < 10; i++) {
        if (aNode.tagName.toLowerCase() == 'td') {
            var newNode = aNode.insertBefore(newdiv, aNode.firstChild);
            break;
        }
        aNode = aNode.parentNode;
        //this will skip over spaces in some firefox version.
        while (aNode.nodeType == 3) {
            aNode = aNode.parentNode;
        }
    }
    //This checks if image loads and set visibility.  
    $('#terabytesImg').load(function() {
        // ... loaded
        $('#terabytesImg').css('visibility', 'visible');
    }).error(function() {
        // not loaded
        return;
    });



Was This Post Helpful? 0
  • +
  • -

Page 1 of 1