Sidebar screwed by <form> only in IE

[ramsayeg]

Hello,

I'm currently working on a new layout and I'm testing it using IE & FF. Today I tried adding a newsletter form to my right sidebar, and it breaked in IE using the following code (in FF it works just fine!):


<h2>NEWSLETTER</h2>
Subscribe to our mailing list to hear about all the latest news, get exclusive info about Square Enix,<br />and know first about our competitions!
<div class="newsletter">
<form method="get" action="include/newsletter/final-fantasy-newsletter.php">
<input name="address" size="10" /><input type="submit" class="newsbutton" value="Go" />
</form>
</div>


Ever since I inserted the code my table breaks for some reason:

http://i36.tinypic.com/eqvvat.jpg

Not only that, but the final-fantasy-newsletter.php page that the user is being sent to is, for some reason, totally destroys the right sidebar. This is the code as it appears:


<div align="center"><form method="get" action="/include/newsletter/final-fantasy-newsletter.php"><strong>Insert your Email Address:</strong>
<font color="#ff0000"><strong></strong></font><br /><br />
<input name="address" size="20" value="xxx" /><select name="action">
<option value="subscribe" selected="selected">Subscribe</option>
<option value="unsubscribe">Unsubscribe</option></select><input type="submit" value="Go" /><br /><br /></form>
</div>


Result:

http://i34.tinypic.com/27yzomo.jpg

I will thank anyone that helps. The full page that is currently in development can be viewed in full over at http://version-three.forever-fantasy.net.

[ohgod]

can you post the css for that sidebar?

one thing i noticed with a quick look is that you have padding difference between that side bar and the bottom right img. ie might just be handling the padding differently.

[ramsayeg]

can you post the css for that sidebar?


I am guessing you are talking about <input type="submit" class="newsbutton" value="Go" />. If so, this is it:

.newsletter input.newsbutton {padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:100%;}
.newsletter input.newsbutton:hover {cursor: pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}

The table padding is fine when I remove the entire form so... I really don't know if that's whats causing the problem.

[ramsayeg]

sorry for the bump, but can anyone help?

[VIPStephan]

Snippets of code don’t really help because in most cases the issue is actually occurring in some completely different place than where it’s becoming obvious. Please post your entire page’s code – or even better would be a link to that page – and it’ll be much easier to help.

[ramsayeg]

Snippets of code don’t really help because in most cases the issue is actually occurring in some completely different place than where it’s becoming obvious. Please post your entire page’s code – or even better would be a link to that page – and it’ll be much easier to help.

I guess I should've placed it higher - http://version-three.forever-fantasy.net/ is the full page, it was posted in the OP.

[ramsayeg]

Still didn't solve it myself, can anyone help?

[VIPStephan]

You know why nobody wants to help you? Because your code sucks so bad it hurts my eyes. But you’re probably just copy/pasting this together and I understand that it can’t be good that way.

Anyway, you should really look into semantic HTML (http://boagworld.com/technology/semantic_code_what_why_how/) and create a layout that doesn’t abuse tables (http://bonrouge.com/3c-hf-fixed.php) because they aren’t meant for what you use them.

As to your problem, it’s not caused by adding that newsletter code but by the content in the middle column which is too wide and stretching it for that matter. For now, applying table-layout: fixed; to your main table should do the trick (but really, that’s not the final solution; you should look into CSS layouts).

[ramsayeg]

You know why nobody wants to help you? Because your code sucks so bad it hurts my eyes. But you’re probably just copy/pasting this together and I understand that it can’t be good that way.

Anyway, you should really look into semantic HTML (http://boagworld.com/technology/semantic_code_what_why_how/) and create a layout that doesn’t abuse tables (http://bonrouge.com/3c-hf-fixed.php) because they aren’t meant for what you use them.

As to your problem, it’s not caused by adding that newsletter code but by the content in the middle column which is too wide and stretching it for that matter. For now, applying table-layout: fixed; to your main table should do the trick (but really, that’s not the final solution; you should look into CSS layouts).

Wow, you didn't have to bash me so hard. I never said anywhere that I'm a pro coder, in fact, I'm trying to learn which is why I posted here. I am learning as time goes on, and perhaps one day I'll become as good as I want to be.

Your temporary solution does work, thank you very much.