Help with a curved image appearing in wrong spot on page?

Amanda Watson
Amanda Watson used Ask the Experts™
on
Hi there,
I am having a problem with this page here http://cisrd.com/contact-us/
Basically you can see my curved image is appearing in the middle section of the page.
On other pages like here http://cisrd.com/2013-conference/call-for-submissions/ you can see the page has the curved edges in the correct spot.

The problem is, in the code, it shows that the page is ending at the end of the </section> tag, however the contact form appears after this but I can't format it?
Please help?
Thanks,
A
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
The problem is caused by the "float: left;" in this css on the ol.forms and li tags of the "contact-page" id element: http://cisrd.com/wp-content/themes/athena/style.css?ver=3.4.2

It only happens on the contact page, because I am assuming the id "contact-page" is only used here.

First remove the "float:left;" from the "#contact-page ol.forms" and "#contact-page ol.forms li"
#contact-page ol.forms {
    clear: both;
    float: left;
    list-style: none outside none;
    width: 100%;
}

#contact-page ol.forms li {
    clear: both;
    float: left;
    margin-bottom: 1.618em;
    position: relative;
    width: 48%;
}

Open in new window


Then add the floats to the li tags individually (feel free to add id's and then do it in css if you wish), so that the Name has a left float, Email a right float, and Message a clear:both:
<ol class="forms">
<li style="float:left;">
<label for="contactName">Name</label>
<input id="contactName" class="txt requiredField" type="text" value="" name="contactName">
</li>
<li style="float:right;">
<label for="email">Email</label>
<input id="email" class="txt requiredField email" type="text" value="" name="email">
</li>
<li class="textarea" style="clear:both;">
<label for="commentsText">Message</label>
<textarea id="commentsText" class="requiredField" cols="30" rows="20" name="comments"></textarea>
</li>

Open in new window

Amanda WatsonWeb Developer

Author

Commented:
Well done!  Thanks so much for this!
I actually don't think there is any need to add the float lefts to the individual li tags....it looks good to me!

What do you think?
Amanda WatsonWeb Developer

Author

Commented:
By the way...there is another issue with this theme that i have another question for
http://www.experts-exchange.com/Web_Development/Blogs/WordPress/Q_27976261.html

Do you think you could solve that problem too?
Amanda WatsonWeb Developer

Author

Commented:
Thank you

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial