CSS layout changes when form is made

  lonemascot 11:20 29 Dec 2010

I'm fairly new and self taught so forgive me if this is glaringly obvious.

This is what my layout is meant to look like: click here
and this is what it looks like when I put a spry validated form in the editable region:
click here
The style sheet can be found found here:
click here

The pages are created from the same template with the same style-sheet attached so I can't work out why the page would shift bits. I have another page with a form which is also affected the same so assume that its an issue with the form itself.

Any help is much appreciated and I would be grateful for any other feedback about the page design.



  beynac 13:12 29 Dec 2010

Try removing the 10px top margin from #mainbody.

  lonemascot 14:03 29 Dec 2010

Right i tried that and in doing so realised that the closing div tag for #mainbody was in the wrong place. I had to add 10px to the top padding so the text didn't sit too close to the top border.

Problem still persists though. I have updated the CSS file so if you could have another look and see if there is anything else that'd be great.

  beynac 14:56 29 Dec 2010

It's working OK for me in Firefox 3.6.13 and in IE8 (and in compatibility view). Where do you see a problem?

  lonemascot 17:03 29 Dec 2010

Im also using IE8. At the bottom of the large white text area i have an image to give the impression of curved edges. On the pages with the forms this image has shifted to the right and out of line.

Also I have an image which is supposed to be repeated along the x axis at the footer but this has been cropped from both sides.

It looks fine in dreamweaver until its previewed in a browser.

If you have changed code your end and its working could you post it so I can check against my own.

Thanks for your help.

  beynac 10:09 30 Dec 2010

The div "rightpanlower" is within the form. It should be outside and within the next div.

You have the code:

<div id="rightpanlower"></div>

I think that this should be:

<div id="rightpanlower"></div>

  lonemascot 10:29 30 Dec 2010

i'm not sure where you have got that code from. the form is within the editable region of 'rightpan' and 'rightpanlower' is after the form and 'rightpan' closing tags.

The positioning of 'rightpanlower' is controlled within the template page and is not editable at all from any of the pages on my site. This is why i can't work out why it looks fine on pages that don't have a form in them and off centre in those that do.

Maybe ive done something in the style sheet that defines a form badly and this is what is causing a conflict. im sure it has something to do with the form coding.

thanks for all your help.

  beynac 10:59 30 Dec 2010

Re. the bottom image:
The div "footerMain" is inside the "mainBody" for the Contact page and outside for the page that works correctly.

The code I posted is from the HTML code of your page. I don't know how your template works, but can assure you that the code is as I have shown. If the structure is set in the template, I cannot understand how it is different between the two pages. Can you not edit the HTML code directly for the Contact page?

  beynac 11:03 30 Dec 2010

Could it be a problem caused by the position, in the template, where you are inserting the form?

The form seems to wrap around the 'rightpanlower' div.

  beynac 11:34 30 Dec 2010

I've just had another look. I saved the page, using Firefox, in order to work on it. This did in fact change the code. This was probably in order to rationalise a problem with the code.

The problem seems to be that you have included the 'rightpanlower' div in the 'rightpantext' div, rather than in the 'rightPan' (ie on the same level as the 'rightpantext' div.

I will look into the bottom picture problem again.

  beynac 11:37 30 Dec 2010

The problem is as I have posted:

"The div "footerMain" is inside the "mainBody" for the Contact page and outside for the page that works correctly."

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

iMac Pro review

See iconic duo Smith and Foulkes' epic animation for the BBC's Winter Olympics coverage

iMac Pro review

Idées cadeaux pour geeks et tech addicts