Layout problem with forms

Hi im having a problem at the bottom of my form pages with buttons being outside of the .centercolumn div.

I have a margin of 10px which should mean a 10px gap between the .centercolumn and the footer.

There is no padding at the bottom of this element.

With the Mozilla Web Developer tool bar. It shows the border in the correct placement but the background colour and the border colour are not.

Anyone got any ideas?

http://adelaidehillswinecellar.com.au/catalog/index.php?main_page=contact_us

Check the link to see what i mean.

(Same problem in IE 7)

You can add a <br class="clearBoth" /> below the row with the buttons in your templates.

Kim:

You can add a <br class="clearBoth" /> below the row with the buttons in your templates.

No quite sure what you mean by templates? This is happening pretty much on any page with a form.

Hi im having a problem at the bottom of my form pages with buttons being outside of the .centercolumn div.

I have a margin of 10px which should mean a 10px gap between the .centercolumn and the footer.

There is no padding at the bottom of this element.

With the Mozilla Web Developer tool bar. It shows the border in the correct placement but the background colour and the border colour are not.

Anyone got any ideas?

http://adelaidehillswinecellar.com.a...age=contact_us

Check the link to see what i mean.

(Same problem in IE 7)

This problem occurs on pretty much all form pages

You've got a whole new page inside the page and that's driving html crazy.> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>shipping info</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="contact_us.css" /> </head>

<body>
<div id="main">
    <p>Adelaide Hills wine Cellar is located in the Old Onkaparinga Wool Mills in Lobethal.<br/><br/>Open Thursday through to Suis sitting inside your form:shocking:

Moderator's Note - Your 2 threads have been merged. Please do not repost.

Have managed to fix the Contact us page with some modification to the css code. But the checkout pages are still creating the same problems.

Have worked out the problem now all i need is a solution.

Any page with with .buttonrow used eather back or forward. Causes them to hang over the edge of the centrecolumn div

Please need help with this its doing my head in.

Natural Tone:

http://adelaidehillswinecellar.com.au/catalog/index.php?main_page=contact_us
I see this in the coding.

<div id="contactUsNoticeContent" class="content">
	<body>
	<div id="main">
		<p>Adelaide Hills wine Cellar is located
...
</p>
	</div>
       <br class="clearBoth" /> 

</body></div>

Remove the 'body' tags.

Not sure if it will solve the problem but I'm sure that leaving it in will cause problems of some kind. :smile:

Website Rob:

Remove the 'body' tags.

Not sure if it will solve the problem but I'm sure that leaving it in will cause problems of some kind. :smile:

Thanks for the that. Removed them wasnt the problem but keeping things right is important also.

The problem is not visible now unless you sign up and see the checkout pages.

try adding the following to your css> #shoppingCartDefault {

background-color:#FFFFFF;
border:1px solid #4A5D2A;
margin:10px;
padding:10px 5px 50px;
}

That should change the bottom padding on the checkout to include the buttons.

It's similar to the .centercolumn call but, if you change that one, it will change all instances of the center column.

dbltoe:

try adding the following to your css

That should change the bottom padding on the checkout to include the buttons.

It's similar to the .centercolumn call but, if you change that one, it will change all instances of the center column.

Awsome thanks this put me on the right track

what i did was remove the .centercolumn code. and added this

#productGeneral, #contactUsDefault, #indexProductList, #indexDefault, #checkoutShipping, #checkoutPayment, #checkoutConfirmDefault, #shoppingCartDefault {
background-color:#FFFFFF;
border:1px solid #4A5D2A;
margin:10px;
padding:10px 5px 50px;
}

Thanks again

#productGeneral, #contactUsDefault, #indexProductList, #indexDefault, #checkoutShipping, #checkoutPayment, #checkoutConfirmDefault, #shoppingCartDefault, #timeoutDefault, #checkoutSuccess, #newProductsDefault, #allProductsDefault, #accountDefault, #accountEditDefault, #addressBookDefault, #accountPassword, #acctNewslettersDefault, #accountNotifications, #loginDefault, #logoffDefault, #privacy, #siteMap, #shippingInfo {
background-color:#FFFFFF;
border:1px solid #4A5D2A;
margin:10px;
padding:10px 5px 50px;
}

found some more

Life would be so much easier if IE worked...

All these DIV elements i have changed work fine in Mozilla.

All but 2 in IE work fine also. The 2 that dont work in IE the bottom margin is completely stuffed.

#indexProductList and #account Default

what could be impacting on these 2 and not the rest in IE?

Firefox is very forgiving and able to understand that we really meant to close that div.

Take the time after each change to review your site in some html validator. The rewards will be great.

Confused now.

Uploaded this address to W3C validator.

http://adelaidehillswinecellar.com.au/catalog/index.php?main_page=account

got a clear pass no errors. But still the page margins are not working correctly.