We use cookies to provide you with a better experience. If you continue to use this site, we'll assume you're happy with this. Alternatively, click here to find out how to manage these cookies

hide cookie message
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.

Tech Helproom


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


 

CSS layout changes when form is made


lonemascot

Likes # 0

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

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
beynac

Likes # 0

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

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

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
lonemascot

Likes # 0

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

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

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

Reply to this topic

This thread has been locked.



IDG UK Sites

Where to buy iPhone 6 and iPhone 6 Plus in the UK: Launch day price, deals and contracts

IDG UK Sites

Is Apple losing confidence in itself?

IDG UK Sites

Professional photo and video techniques for perfect colours

IDG UK Sites

How (and where) to buy an iPhone 6 or iPhone 6 Plus in the UK. Plus: What to do if you pre-ordered...