Web Analytics Made Easy -
StatCounter Problem with IE shifting Divs - CodingForum


No announcement yet.

Problem with IE shifting Divs

  • Filter
  • Time
  • Show
Clear All
new posts

  • Problem with IE shifting Divs


    I setup a basic page to give you an idea of what I have. I am working on a page that will loop through a query result and print image thumbnails, 3 at a time in a row, on the page. Beside each name is an icon to edit the name. When you click on this icon, the name and the icon are then hidden and the form to edit this name appears in its place. You hit cancel, and the reverse happens.

    This works fine in Firefox but in IE, as you will see, shifts the fourth element over as you click on the icons.

    A working example of this is located here Go here

    Now when the page comes up, just click on any of the top three results' edit icon to see the shift (in IE).

    I assume that I needed to post this here because I am not getting JS errors and this is a positioning problem. I am also aware of the CSS errors on the page that are due to an IE hack for a form style I found. These errors are due to css calls like

    /*  ----------------------------------------------------------------------------------
     *  Internet Explorer Bug Fixes
     *  ----------------------------------------------------------------------------------  
    /* IE Pick-a-boo bug fix */ 
    form {
    	height: expression('1%'); 
    /* Fixes IE problem with fieldset+legend boundaries */
    form fieldset {
    	position: expression('relative'); 
    	margin-top: expression('1.5em');
    	padding-top: expression('1.75em');
    form legend {
    	position: expression('absolute'); 
    	top: expression('-.5em');
    	left: expression('.5em');
    I am pretty sure this is not the cause of my issue though. Anyway, any help with this would be greatly appreciated. If you would like to see how it should work, just open this is firefox

    Thank you for your time

  • #2
    The effect does not work at all for me in Internet Explorer. Additionally, I get a notice that a cookie has been blocked and none of the images display. In Firefox, when I click “save”, the page is reloaded to no effect.

    While I understand the invalidity caused by using proprietary CSS, your code also has invalid XHTML, including invalid ID names. Normally, I believe it's Firefox that's more strict about things like that but you should probably fix that stuff just in case it's contributing to the problem. Not sure if it's relevant, but the error console in Firefox is also producing a number of JavaScript warnings.


    • #3
      hmmmm, I just tested it in IE 6 and it works. I mean the shift still exists of course but the hide of the name and icon and showing of the form works for me. As far as the save feature, that is posting to itself because this is a test page for you to view so you do not have to login to my site. So it is not necessary for you to save. THe important thing is the positioning when you click on the edit icon.

      As far as the invalid IDs, I needed them to be unique and dynamic since each result is from a DB query. I do see that I am not supposed to start off the IDs with numbers so I reworked that. I now only have 4 errors on the validation. I believe these are coming from the fact that I have divs inside an unordered list. Not sure how to get around that as I need this to contain each item from the query.

      OUtside of this, I am not sure why you are not getting any results when you click on the edit icon....actually, if you see a save button then it has to be working for you. THe page loads with only the names and the edit icon below each result. In order for you to see the form to edit the name, it has to be working for you...

      So when you click on the top left edit icon(beside the name), which would be for 'Elliott Pictures' does the container for 'Pictures of Diggler' not shift over? This is the issue I am trying to remedy.

      Thank you for your reply and your time.


      • #4
        I'm still getting no images in Internet Explorer 6. I tried visiting in Internet Explorer 7 RC1 and the images loaded fine, however. It's a bit different than what was described though as things are offset before I touch anything; the box has scroll-bars for the overflowing content.

        I don't believe that it's valid to contain any block-level element within a list-item element. You can fix that by using a display: block declaration on the list-item element itself; if you need more containers, use that declaration on an inline element like span; this will allow you to mimic the behavior of a div while using elements that are actually permitted. You also can't have block-level elements in paragraphs (like div) and it doesn't make sense to put form elements in a paragraph either (forms are not paragraphs). If you want your CSS to be valid you can always use conditional comments to target Internet Explorer.

        Anyway, I went through the code a bit and besides the above errors didn't see anything stand out that would cause what you described. From IE7's point of view, It looks to me that you just need to make the boxes slimmer and shorter. I'd go through everything except that you have a massive script and five stylesheets. I should also point out that the hasLayout exploit you're utilizing (height: 1%) doesn't work in IE7, resulting in your floats not being cleared in that browser.