Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE display:none problem

    Has anyone ever ran into a situation where IE would display something twice when something shortly after it has its display set to none?

    I built a script that allows you to click on a certain div in a row to create another row of divs. Another div in each row runs a script that sets display to block another row of divs that goes between each row that's already visible.

    So it's like this
    Code:
    <div id="row1" class="row">
    <div class="cell"></div>
    <div class="cell" onClick="unHide(1)">UnHide</div>
    <div class="cell" onClick="addNewRow(2)">Add New</div>
    </div>
    <div id="hiddenrow1" class="row" style="display:none">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    </div>
    <div id="addToMe">
    <div id="row2" class="row">
    <div class="cell"></div>
    <div class="cell" onClick="unHide(2)">UnHide</div>
    <div class="cell" onClick="addNewRow(3)">Add New</div>
    </div>
    <div id="hiddenrow2" class="row" style="display:none">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    </div>
    </div>
    So at first there's just row1 and hiddenrow1, but when you click on the last cell of row1 it adds in row2 and hiddenrow2 (in bold). It also disables using that button again, but you can now click on the last cell of row2 to add row3 and hiddenrow3, and so forth.

    In Moz it works great, but I'm getting some very strange behavior in IE. It's adding in extra things. For example if I click on Add New twice then suddenly there's a blank row between rows 2 and 3. a third click makes it so 2 and 3 are next to each other, but there's an even bigger gap betwen 3 and 4.

    As I've tried to fix it I tried blanking out the content of the hiddenrows. so it's simply:
    Code:
    <div id="row1" class="row">
    <div class="cell"></div>
    <div class="cell" onClick="unHide(1)">UnHide</div>
    <div class="cell" onClick="addNewRow(2)">Add New</div>
    </div>
    <div id="hiddenrow1" class="row" style="display:none">
    </div>
    <div id="addToMe">
    <div id="row2" class="row">
    <div class="cell"></div>
    <div class="cell" onClick="unHide(2)">UnHide</div>
    <div class="cell" onClick="addNewRow(3)">Add New</div>
    </div>
    <div id="hiddenrow2" class="row" style="display:none">
    </div>
    </div>
    then it did some different weird stuff. It would put the blank row on the bottom and it would have some of the text from the end of the visible row in it. The more times I click the more text it has, but once it should have all the text from the cell it goes empty and then starts showing text from the next to last cell, and so forth.

    One thing that is weird about it is that if I click on unhide then it undoes the effect.

    I also tried just taking out the hidden rows. Then it worked like it should, but I no longer had the use of the hidden rows.

    What I finally came up with is that for some reason if the div after a div with display:block or without a display setting has display:none then IE freaks out and creates "pseudo-divs" on top of the div with display:none that it fills with data from the div before it. Pseudo-divs also have some weird properties (like they don't like you to select the text in them, if you try it acts like your selecting the text it's a copy of). To get around this problem I added <div></div> after the visible row and before the hidden row for each added row. In Moz this still displays correctly. In IE it fixes this problem, but it can cause other problems, like I had to tweak my borders a little bit to make it so you couldn't tell the extra div was there.

    If anyone else has had this problem here's the way I fixed it, and I'd love to hear if you've got a better way or an explanation of why IE does that.

    Brett Bretterson

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Right if you expect us to help you we need to see your script as well.

  • #3
    New Coder
    Join Date
    Aug 2005
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The scripts are way simple. Unhide just takes the hidden row with that number and sets its display to block. addNewRow just appends the bolded stuff to the addToMe div, increasing the number by 1 each time. That's all they do. I already checked them out in other situations and verified that there's nothing wrong with them.

    I gave you all the relevant information. If you have an idea on another way to fix this problem (all of which you see before you, there is nothing else to the problem) then feel free to share it, otherwise my only suggestion is to improve your manners. Also I said that I figured out a fix, meaning that if anyone else runs into this problem my solution is here for them to use, I only posted this so if someone runs into this same problem and does a search they might find my solution without having to create a new thread.

    Brett Bretterson


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •