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

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

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

Try removing the 10px top margin from #mainbody.

Like this post
beynac

Likes # 0

Thank you for your comment!

Like this post
Forum Editor

Likes # 0

An excellent example of someone sticking with a problem until a solution is found. Thank you for your perseverance - a credit to our forum.

Like this post
beynac

Likes # 0

You're welcome! I'm glad that we got it sorted out.

Like this post
lonemascot

Likes # 0

It was the submit button and that extra script causing all the trouble. I took the table out and cleaned up the code and hey presto it was back to normal again.

I really appreciate your help. Thank you.

Like this post
beynac

Likes # 0

It looks as if this has sorted out the problem. However, I have just run the page through the W3 Markup Validation and it shows a few errors. You seem to have something wrong with the code in the 'submit' part of the form:

<p>
<label>
<div align="center">
<div align="center">
<input type="submit" name="submit" id="submit" value="Submit" />
</div>
</label>

The <p> tag hasn't been closed (do you need this tag?) and you seem to have duplicated the <div> and therefore one of them is unclosed. It could be this which caused the original problem. Because you have now contained the form in a table, it has not caused the same effect.

Like this post
lonemascot

Likes # 0

I got it!!!

I went through my coding looking at div closers to make sure i hadn't missed anything. Both pages had the same code before and after the editable region but for some reson the form code was causing dreamweaver to think that the footer image was within the main body tag (which it isn't).

It then occured to me if the form was causing a problem then i should try and 'contain' the problem. so i put the form and all the associated spry html in a table cell and voila it seems to have sorted it, sort of....

it hasn't changed the fact that the footer image is still within the mainbody tags but at least everything looks right.

Have i bodged it? or is this a workable solution?

thanks for all your help beynac.

Like this post
lonemascot

Likes # 0

ah getting somewhere now.

i have verified that footer main is inside the main body tag on the dodgy pages and is outside on the others.

The problem i have now is that in the form pages i cannot edit the footer main tags because they are outside the editable region.

My template controls all positioning of layout images on the page and within 'rightpan' i have an editable region which is the only place i can make changes on pages derived from my template. In new pages' code view all layout coding is greyed out and unchangable.

So in theory i could do what i want within that editable region and it should not be possible to alter the rest of the coding.

Somehow my footermain images have been incorporated with the mainbody tag as you said. i don't understand how this could have happened.

Like this post

Reply to this topic

This thread has been locked.



IDG UK Sites

Best Christmas 2014 UK tech deals, Boxing Day 2014 UK tech deals & January sales 2015 UK tech...

IDG UK Sites

Apple's 2014 highlights: the most significant Apple news of 2014

IDG UK Sites

2015 creative trends: 20 leading designers & artists reveal the biggest influences & changes coming)......

IDG UK Sites

Ultimate iOS 8 Tips: 35 awesome and advanced tips for using iOS 8 on iPhone and iPad