Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2012-12-27
4
Medium Priority
?
314 Views
Last Modified: 2013-01-03
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
Comment
Question by:Amanda Watson
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 18

Accepted Solution

by:
Matthew Kelly earned 2000 total points
ID: 38725719
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
 
LVL 11

Author Comment

by:Amanda Watson
ID: 38725769
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
 
LVL 11

Author Comment

by:Amanda Watson
ID: 38725770
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
 
LVL 11

Author Closing Comment

by:Amanda Watson
ID: 38741987
Thank you
0

Featured Post

Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows the steps required to install WordPress on Azure. Web Apps, Mobile Apps, API Apps, or Functions, in Azure all these run in an App Service plan. WordPress is no exception and requires an App Service Plan and Database to install
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question