Can't align submit button in wordpress widget

[NextGenWriter]

Hi there,
I'm having trouble aligning the Submit button in wrodpress widget - silly?

I want it centred but it won't listen to my commands and just stay left aligned :(

Here is the code: (though I've tried several other things also)


<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=WriterBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><b>

<font color="#CC0000">Grab your FREE Report: </font> <a href="http://example.com/headlines.htm" rel="nofollow">Secret Ingredients</a></b></p><p><input type="text" style="width:140px" name="email"/></p><input align="middle" type="hidden" value="TheWriter" name="uri"/><p><input type="hidden" name="loc" value="en_US"/></p>

<div align="center">

<input type="submit" value="Send It to my inbox!" /></p>
</div>

<br>
<i><font size="2">I promise to respect your privacy.</font></i></form>

Other info:

Current Theme: Plateform 1.4.2 by Pagelines
Wordpress version: 3.3.1.

Look forward to your kind replies. Have a good Monday.

Many thanks,
Ali.

[edited by: alt131 at 7:35 am (utc) on Mar 5, 2012]
[edit reason] Thread Tidy [/edit]

[Sub_Seven]

Hey NextGenWriter,

It looks pretty much centered for me (at least in Chrome), but any ways why don't you change this:

<div align="center">

for this:

<div style="text-align:center;">

And see what happens

[rocknbil]

The align attribute is deprecated (as is <font>, ugh :-) ), and what it does is centers the element in the page, not it's contents. It's entirely possible some other selector is affecting the div: if it's floated left, for example, or if some selector has assigned a width of 100% (of the parent.)

The text-align attribute will likely work **unless** the submit button has been assigned display: block (which is often the case with graphic background images on buttons.) In this case you'd need to do something like

<div id="submit-row"><input type="submit" value="submit"></div>

#submit-row input { margin: auto; }

Best is to see what's happening before changing anything - put it back where it was (without the align attribute) and install the FireFox extension Firebug. Right-click on the element and in the right pane of Firebug you can see all of the selectors affecting that element. Knowing Wordpress, there will be many.

[NextGenWriter]

Hi sub_seven,

Yes, it’s centred if you execute the code in your browser and even in my earlier theme. But in my new theme i.e. Platform, it STAYS left aligned :(

And <div style="text-align:center;"> didn’t work.

Thanks a lot for your kind response.

Hello rocknbil,

Unfortunately, I’m a copywriter, not a hardcode programmer. But since I have graduated in Computer Science, I can poke around a little.

I installed firebug, and I think “float: left;” might be the culprit?

I had posted a link to my blog but was removed by the moderator (I think that wasn’t allowed in the first place).
Should I post here the CSS code generated by firebug?

I look forward to your usual response.

Many thanks.
Sincerely,
Ali.

[NextGenWriter]

If I disable the float left through firebug, the last line ‘I promise to respect your privacy’ (which is also out of place) gets centre aligned :) ... but it doesn’t have any effect on Submit :(

[alt131]

Hi Ali and welcome to WebmasterWorld :)

Yes please to posting the css from firebug - we like code here and the sticky mail I sent gives more detail about why the original post was edited.

I think there is more going on than we have in the posted code. All elements are nicely centered for me, and while I think you are probably right that float will be causing problems there isn't one in the posted code - time to dig a bit more.

Have you validated the html and css? The reason I ask is that the posted code closes a <p> that isn't open. Loose ends happen when cut/pasting into posts, but sometimes the problem is in the original code as well. Odd open/closes crequires browsers to guess where to open/close elements and that can be the source of layout issues - which is another reason the code snippet may be performing differently to the complete document.

[NextGenWriter]

Hi alt131,

Thanks for your kind response.

I think that <p> tag was missed while I was copy/pasting :) As I said, I've updated my theme whose code is messing up with it otherwise the button was already centered. I've also tried copying the code from Feedburner again but to no avail.

Here is the code from Firebug:


.button:active, input[type="submit"]:active, .submit:active {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: url("./images/button-grey-down.png") repeat-x scroll left bottom transparent;
border-color: #BBBBBB #DDDDDD #DDDDDD #BBBBBB;
border-right: 1px solid #DDDDDD;
border-style: solid;
border-width: 1px;
color: #000000;
}
style....2133629 (line 262)
input[type="submit"], .submit, input[type="button"], .button, input[type="reset"], .reset {
background: url("./images/button-grey-up.png") repeat-x scroll left bottom transparent;
cursor: pointer;
}
style....2133629 (line 257)
a.pagelines-blink, a.soapbox_link, #feature_slider .fcontent a.post-edit-link, .button, input[type="submit"], input[type="button"], input[type="reset"], .submit {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #EEEEEE;
border-color: #E1E1E1 #D1D1D1 #D1D1D1 #E1E1E1;
border-right: 1px solid #D1D1D1;
border-style: solid;
border-width: 1px;
color: #333333;
display: block;
float: left;
font-size: 12px;
line-height: 12px;
margin-right: 0.8em;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
style....2133629 (line 228)
.font2, .font-sub, ul.main-nav li a, #secondnav li a, .metabar, .subtext, .subhead, .widget-title, .post-comments, .reply a, .editpage, #pagination .wp-pagenavi, .post-edit-link, #wp-calendar caption, #wp-calendar thead th, .soapbox-links a, .fancybox, .standard-form .admin-links, #featurenav a, .pagelines-blink, .ftitle small, .button, input[type="submit"], input[type="button"], input[type="reset"], .submit {
font-family: "Lucida Grande","Lucida Sans","Lucida Sans Unicode",sans-serif;
letter-spacing: 0.1em;
text-transform: uppercase;
}
style....2133629 (line 66)
input[type="submit"], .submit, input[type="button"], .button, input[type="reset"], .reset {
padding: 3px 6px;
}
common.css (line 38)
blockquote, input, textarea, .searchform .searchfield, .wp-caption, .widget-default, #buddypress-page div.activity-comments form .ac-textarea, #buddypress-page form#whats-new-form #whats-new-textarea, #grandchildnav.widget, fpost .post-thumb img, .clip .clip-thumb img, .author-thumb img {
border-top-color: #DDDDDD;
}
/blog/ (line 33)
blockquote, input, textarea, .searchform .searchfield, .wp-caption, .widget-default, #buddypress-page div.activity-comments form .ac-textarea, #buddypress-page form#whats-new-form #whats-new-textarea, #grandchildnav.widget, fpost .post-thumb img, .clip .clip-thumb img, .author-thumb img {
border-left-color: #DDDDDD;
}
/blog/ (line 33)
ul.sf-menu ul li, .post-nav, .current_posts_info, .post-footer, blockquote, input, textarea, .searchform .searchfield, .wp-caption, .widget-default, #buddypress-page div.activity-comments form .ac-textarea, #buddypress-page form#whats-new-form #whats-new-textarea, #grandchildnav.widget, .fpost .post-thumb img, .clip .clip-thumb img, .author-thumb img, #carousel .content ul li a img, #carousel .content ul li a:hover img, #feature-footer {
border-color: #E9E9E9;
}
/blog/ (line 33)
#feature-footer, .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a, #wp-calendar caption, #buddypress-page #subnav, #buddypress-page .activity .activity-inner, #buddypress-page table.forum th, #grandchildnav.widget, blockquote, input, textarea, .searchform .searchfield, .wp-caption, .widget-default, .commentlist .alt, #wp-calendar #today, #buddypress-page div.activity-comments form .ac-textarea, #buddypress-page form#whats-new-form #whats-new-textarea, .post-nav, .current_posts_info, .post-footer, #twitterbar, #carousel .content-pad, .success, .sf-menu li li, .sf-menu li li, .sf-menu li li li, .content-pagination a .cp-num, .hentry table .alternate td {
background: none repeat scroll 0 0 #F7F7F7;
}
/blog/ (line 33)
blockquote, input, textarea, .searchform .searchfield, .wp-caption, .widget-default, #buddypress-page div.activity-comments form .ac-textarea, #buddypress-page form#whats-new-form #whats-new-textarea, #grandchildnav.widget {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #DDDDDD #E9E9E9 #E9E9E9 #DDDDDD;
border-right: 1px solid #E9E9E9;
border-style: solid;
border-width: 1px;
}
style....2133629 (line 189)
#feature-footer, .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a, #wp-calendar caption, #buddypress-page #subnav, #buddypress-page .activity .activity-inner, #buddypress-page table.forum th, #grandchildnav.widget, blockquote, input, textarea, .searchform .searchfield, .wp-caption, .widget-default, .commentlist .alt, #wp-calendar #today, #buddypress-page div.activity-comments form .ac-textarea, #buddypress-page form#whats-new-form #whats-new-textarea, .post-nav, .current_posts_info, .post-footer, #twitterbar, #carousel .content-pad, .success, .sf-menu li li, .sf-menu li li, .sf-menu li li li, .content-pagination a .cp-num, .hentry table .alternate td {
background-color: #F7F7F7;
}
style....2133629 (line 123)
body, .font1, .font-primary, .commentlist, input {
font-family: Georgia,'Times New Roman',Times,serif;
}
style....2133629 (line 56)
input {
font-size: 110%;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: normal;
padding: 5px 3px 3px 5px;
}
common.css (line 28)
Inherited fromform mailverify
element.style {
text-align: center;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromdiv.textwidget
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromdiv.widget-pad
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromli#text-11.widget_text
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromul#list_sidebar_primary.sidebar_widgets
ul.sidebar_widgets {
list-style-type: none;
}
style....2133629 (line 787)
ul {
list-style: disc outside none;
}
common.css (line 18)
ol, ul {
list-style: none outside none;
}
common.css (line 6)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromdiv.copy-pad
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromdiv#sidebar_primary.copy
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromdiv.scolumn-pad
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromdiv#sidebar1.scolumn
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromdiv#sidebar-wrap.fix
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromdiv#pagelines_content.one-sidebar-right
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromdiv.content-pad
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromdiv.content
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromdiv.texture
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromdiv#maincontent.container
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromdiv#dynamic-content.outline
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromdiv#page-main.container-group
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromdiv#page-canvas
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromdiv#page
#page, .tcolor1, #subnav ul li a:active, .commentlist cite a, #breadcrumb a, .metabar a:hover, .post-nav a:hover, .post-footer a, #buddypress-page #object-nav ul li a, #buddypress-page table.forum .td-title a, #buddypress-page #subnav a:hover, #buddypress-page #subnav li.current a, #twitterbar a, #carousel .carousel_text, #site #dsq-content .dsq-request-user-info td a, #pagination .wp-pagenavi a:hover, #pagination .wp-pagenavi .current, #featurenav a.activeSlide, .content-pagination a:hover .cp-num {
color: #000000;
}
/blog/ (line 33)
#page, .tcolor1, #subnav ul li a:active, .commentlist cite a, #breadcrumb a, .metabar a:hover, .post-nav a:hover, .post-footer a, #buddypress-page #object-nav ul li a, #buddypress-page table.forum .td-title a, #buddypress-page #subnav a:hover, #buddypress-page #subnav li.current a, #twitterbar a, #carousel .carousel_text, #site #dsq-content .dsq-request-user-info td a, #pagination .wp-pagenavi a:hover, #pagination .wp-pagenavi .current, #primary-nav .main-nav li a:hover, #featurenav a.activeSlide, .content-pagination a:hover .cp-num {
color: #000000;
}
style....2133629 (line 89)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromdiv#site.one-sidebar-right
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited frombody.home
body, .font1, .font-primary, .commentlist {
font-family: Georgia,"Times New Roman",Times,serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 0;
text-transform: none;
}
/blog/ (line 33)
body {
color: #FFFFFF;
}
style....2133629 (line 82)
body, .font1, .font-primary, .commentlist, input {
font-family: Georgia,'Times New Roman',Times,serif;
}
style....2133629 (line 56)
body {
font-size: 87.5%;
line-height: 1.6em;
}
style....2133629 (line 47)
body {
line-height: 1;
}
common.css (line 6)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)
Inherited fromhtml
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
common.css (line 6)

[alt131]

Hi Ali,

As Rocknbil referred, one issue with wordpress is that there are usually there are a lot of rules affecting elements which makes it harder to find the ones causing the problem. Also I understand it you've managed to separate the issues so you can centre the submit, but not the italicised text.

For the submit button I think the relevant ruleset is the third down:
a.pagelines-blink, a.soapbox_link, #feature_slider .fcontent a.post-edit-link, .button, input[type="submit"], input[type="button"], input[type="reset"], .submit {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #EEEEEE;
border-color: #E1E1E1 #D1D1D1 #D1D1D1 #E1E1E1;
border-right: 1px solid #D1D1D1;
border-style: solid;
border-width: 1px;
color: #333333;
display: block;
float: left;
font-size: 12px;
line-height: 12px;
margin-right: 0.8em;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}

The issue is how best to fix that. Easiest is to remove the selector input[type="submit"] from the ruleset, but that will also remove the other styles you probably want applied. One approach would be to code a new rule for the submit. But as this is wordpress and as you are a little new to this, I'm inclined to think the safest way would be to use an inline style to set that specific submit input to float:none. (I don't like suggesting inline styles, but in this case it keeps you in control and avoids any domino affects around the rest of the site.)

The italicised text is still an interesting mystery. Once again, check the element in firebug. Don't post all the code from firebug ;) , but are there any rules that make it float, set it to block or apply margins/padding that are affecting layout?