• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 319
  • Last Modified:

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

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
0
Amanda Watson
Asked:
Amanda Watson
  • 3
1 Solution
 
Matthew KellyCommented:
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

0
 
Amanda WatsonWeb DeveloperAuthor 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?
0
 
Amanda WatsonWeb DeveloperAuthor 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?
0
 
Amanda WatsonWeb DeveloperAuthor Commented:
Thank you
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now