Contact Forum Editor

Send an email to our Forum Editor:

PLEASE NOTE: Your name is used only to let the Forum Editor know who sent the message. Both your name and email address will not be used for any other purpose.

Web Design Help

It's free to register, to post a question or to start / join a discussion

View Forum Rules | Contact Forum Editor

 

CSS layout changes when form is made

1 next »

lonemascot

Likes # 0

Posted December 29, 2010 at 11:20AM

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.

Thanks

Jon

Like this post
beynac

Likes # 0

Posted December 29, 2010 at 1:12PM

Try removing the 10px top margin from #mainbody.

Like this post
lonemascot

Likes # 0

Posted December 29, 2010 at 2:03PM

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.

Like this post
beynac

Likes # 0

Posted December 29, 2010 at 2:56PM

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

Like this post
lonemascot

Likes # 0

Posted December 29, 2010 at 5:03PM

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.

Like this post
beynac

Likes # 0

Posted December 30, 2010 at 10:09AM

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

You have the code:

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

I think that this should be:

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

Like this post
lonemascot

Likes # 0

Posted December 30, 2010 at 10:29AM

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.

Like this post
beynac

Likes # 0

Posted December 30, 2010 at 10:59AM

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?

Like this post
beynac

Likes # 0

Posted December 30, 2010 at 11:03AM

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.

Like this post
beynac

Likes # 0

Posted December 30, 2010 at 11:34AM

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.

Like this post
beynac

Likes # 0

Posted December 30, 2010 at 11:37AM

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."

Like this post

1 next »

Reply to this topic

This thread has been locked.



Check out PC Advisor's other tech forums

Send to a friend

Email this article to a friend or colleague:

PLEASE NOTE: Your name is used only to let the recipient know who sent the story. Both your name and the recipient's name and address will not be used for any other purpose.