Solved

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

Posted on 2012-12-27
4
312 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 500 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

751 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