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 5 of 5
  1. #1
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    160
    Thanks
    40
    Thanked 0 Times in 0 Posts

    Wierd elements shift with hidden element in IE

    Hi All,

    This is a strange one and I am having some trouble figuring out what is causing this. I have a form that is conditionally hidden with some PHP code, although I don't think my issue PHP related:

    Code:
    <form <?php if (isset($_SESSION['MM_Username'])) { echo "style='display: none'"; }else{ echo "style='display: block'";}?> class="login" action="<?php echo $loginFormAction; ?>" method="POST" name="frmLogin" id="frmLogin" >
    Some of my pages do not have this form and if the form is hidden on my page and I move to a page that doesn't have the form, the elements beneath it all shift up about 1 line. AFAIK style='display: none' should effectively render as if the form were not there, right?

    This only happens in IE. Safari and Firefox behave as expected with all of the elements staying in the same place. Also, in IE compatibiity mode the issue goes away.

    If anyone can help me figure out why this happens please help. The only way I can avoid this in IE is to copy the form to all of my pages (which it is not needed in some).

    Thanks in advance for any help.

    Kind regards,

    Ken
    Last edited by MaDmiX; 07-27-2012 at 09:34 PM.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Do you have a proper !DOCTYPE statement on your page? IE also uses visibility: hidden and visibility: visible for older versions.

  • #3
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    160
    Thanks
    40
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    Do you have a proper !DOCTYPE statement on your page? IE also uses visibility: hidden and visibility: visible for older versions.
    Hi DrDOS,

    Thanks for your reply. I had thought about that but from the w3schools site:

    "The visibility property specifies whether or not an element is visible.

    Tip: Even invisible elements take up space on the page. Use the "display" property to create invisible elements that do not take up space!"

    My goal is for the form to not take up any space when it is hidden so I went with the Display property.

    I will look at the !DOCTYPE statement and post back, though.

    Kind regards,

    Ken

  • #4
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    160
    Thanks
    40
    Thanked 0 Times in 0 Posts
    Hi DrDOS,

    I checked the !DOCTYPE statement and this is what I have:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    It matches the statements on my other pages too.

    Ken

  • #5
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    160
    Thanks
    40
    Thanked 0 Times in 0 Posts

    Solved

    Got this one figured out. It was a <p> tag in my index.php that was pushing everything down.


  •  

    Posting Permissions

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