My form is not styled right, help! =)

Posted on 2011-04-20
Last Modified: 2012-06-22
I added a form to my side bar widget in Wordpress and the fields are over lapping and the Send button is at the top and not under the form. What can I do?
Question by:jbrashear72
    1 Comment
    LVL 70

    Accepted Solution

    Hi jbrashear72,

    In default.css there are the following entries:

    .aside input {
        background: url("../../images/bg-news.jpg") no-repeat scroll 0 0 transparent;
        border: medium none;
        height: 26px;
        padding-left: 5px;
        position: absolute;
        top: 25px;
        width: 200px;

    .aside, .aside input {
        font-size: 13px;
        line-height: 18px;
        margin-bottom: 6px;

    The position: absolute is what is causing the most visible issue.  Once you remove that, you'll still have some minor issues with the form, but those are also easily correctable via the CSS.

    Generally, when you use a plugin to create a widget with a form, the widget is going to inherit styles from both the theme and the form plugin specific stuff.  This can cause a CSS conflict in the widget with the results you saw.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Join & Write a Comment

    I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
    The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…

    733 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

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now