Wierd elements shift with hidden element in IE

MaDmiX

07-27-2012, 08:56 PM

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:

<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

DrDOS

07-28-2012, 01:16 AM

Do you have a proper !DOCTYPE statement on your page? IE also uses visibility: hidden and visibility: visible for older versions.

MaDmiX

07-28-2012, 02:33 AM

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

MaDmiX

07-30-2012, 08:01 PM

Hi DrDOS,

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

<!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

MaDmiX

08-08-2012, 06:43 PM

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