HELP!! Hidden text is still causing the page to lenghten.

Hi - please help, its the first time i've done anything on this size.

I'm designing a confirmation page for my site to display after payment has been received and my developer will be doing the bits to tie it up later but is there a way of keeping my page shorter when either the success or failed div is displayed as at the moment even though its hidden its still leaving enough space for both.


here's the css ive done and the page code is below that - THANKS !!

-------------------------------------------------------------------------

.finalheader-success { padding: 15px 0 0 20px; float: left; }

.finalheader-failed { padding: 15px 0 0 20px; float: left; }

.finaltext-success { font: 11px Verdana,sans-serif; color:Black; padding: 15px 0 0 45px; float: left; clear:both; width:700px; }
.finaltext-failed { font: 11px Verdana,sans-serif; color:Black; padding: 15px 0 0 45px; float: left; clear:both; width:850px; }

.finalicon { padding: 0 0 0 20px; float: left; }

.final-success
{
width: 100%;
text-align: left;
border:1px solid white;
background-color:#FFFFFF;
height:500px;
visibility:hidden;
}

.final-failed
{
width: 100%;
text-align: left;
border:1px solid white;
background-color:#FFFFFF;
height:300px;
visibility:hidden;
}


.finalbutton { font: 11px Verdana,sans-serif ; color: #ffffff; padding:5px 0 0 25px; margin :3px 0 0 16px; font-weight:900; background-image:url(images/site/btn-122-green.png); background-repeat:no-repeat; width:125px; height:25px; float: left; clear:both;}

.finalbutton a{
color:#FFFFFF;
text-decoration:none;
}

-----------------------------------------------------------------------


<div class="final-success">

<div class="finalheader-success"><img src="images/site/page-headers/finalconfirmation.jpg" alt="Lens Details" border="0"></div>

<div class="finaltext-success"><strong>Thank you for ordering.</strong>

<div class="finalicon">
<p><img src="images/site/success.jpg" alt="Lens Details" border="0">Your order has been received and should be delivered as detailed below.<br />

<br /><br />
An email confirmation has been sent to <strong>CUSTOMER EMAIL GOES HERE.</strong>
<br /><br /><br /><br />
<strong>YOUR ORDER DETAILS</strong><br /><br />

Total value of your order
including delivery: <strong>£ ORDER VALUE GOES HERE</strong><br /><br />

Your order should be delivered within 10-14 working days.<br /><br />

Delivery Address:<br />

<strong> ADDRESS GOES HERE </strong></p>
<p><div class="finalbutton"><a href="#">Home Page </a></div></p>
</div></div></div>




<div class="final-failed">

<div class="finalheader-failed"><img src="images/site/page-headers/orderfailed.jpg" alt="Lens Details" border="0"> </div>

<div class="finaltext-failed"><strong>Your order has been unsuccessful.</strong>

<div class="finalicon">
<p><img src="images/site/warning.jpg" alt="Lens Details" border="0">Unfortunately your order was not able to be processed at this time. Please feel free to call us on 0844 ??? ????? for further help.<br /> <br /><br /><br /></p>
<p><div class="finalbutton"><a href="#">Home Page </a></div> </p>
</div></div></div>

 

Have you thought of it maybe being a problem in the php or html file?

 

I just glanced at your code quickly, but could "display:none" work for you instead?

 

You're entire methodology for handling this is flawed, the biggest reason of which being the COMPLETE LACK of graceful degredation. User turns off CSS, they're going to see the failure messages. Search engines are going to INDEX your failure messages. Let me guess, you don't have a method for handling when javascript is turned off either, right?

IF you are using scripting, you should be writing those messages FROM the script into the DOM. Likewise your back end should have a handler for creating those messages IF scripting is disabled. What you should not be doing is wasting time trying to 'hide' that content in the markup.