WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] CSS applied to page. Unwanted padding appears.

[Resolved] CSS applied to page. Unwanted padding appears.

  • I finally got CSS atrtributes to work in the home page. But now, an unwanted padding of about 50px is showing up. I have tried using a CSS attribute like {padding-top:-50px;} but that doesnt work. It is on the home page of sitedrawings.com Any ideas?

    http://www.sitedrawings.com

Viewing 14 replies - 1 through 14 (of 14 total)
  • You have a paragraph containing a break tag <br> just above the line that saya ‘Register for this site’.

    You may have to edit in HTML mode to see this and delete it. Beware though, switching to HTML and back to Visual can totally trash a post. Best to copy to a temporary post and try it there first.

    I dont see it in Chrome or Edit Page. Where did you see it? I cant see it to edit it. I appreciate the heads up.

    Are you talking about the padding above “1.Register For This Site – OR – Login” or the padding on the top and sides of your site?

    The gap above register for this site is caused by <p><br></p> which is probably in your index.php file.

    And just so you know…

    In Chrome you can open your website and right click anywhere and go to Inspect Element, then click the little magnifying glass in the bottom and you can click on anything on your website and see the code.

    @sho-down The padding above “1.Register For This Site – OR – Login”

    Here are the first bits of code from Edit Page

    [please read http://codex.wordpress.org/Forum_Welcome#Posting_Code about posting code in the forum]

    <style type=”text/css”>body{font-family:”Helvetica Neue”,Arial,Helvetica,”Nimbus Sans L”,sans-serif;line-height:18px;border:0;margin:0;padding:0;vertical-align:baseline;}
    h3{color:#222;display:block;font-size:1.17em;font-weight:bold;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0px;-webkit-margin-end: 0px;}
    hr{background-color:#000;border:none;height:4px;}p{color:#666;font-size:12px;font-weight:normal;}</style></head><body><h3>1.Register For This Site – OR –  Login</h3>
    <h3>2.Upload your sketches, artwork, or other documents to be used in the creation of your CAD drawings.</span></h3>
    <h3>3.Order the type and quantity of CAD drawings you need.</h3>
    <p>Need help? Contact Us.</p>

    <hr>

    <h3>The Sightdrawings.com Difference</h3>…

    Look at the source code for the page.

    1. Open the page in Chrome.
    2. Press CTRL-U to view the source.
    3. Press CTRL-F to open the Find bar.
    4. Enter ‘register for’ in the search box.
    5. Press Enter.

    You should see this on the line before the ‘Register for’:

    <p></head><body><br />

    The break tag is causing the extra space. I am not an HTML expert, but it doesn’t seem right to have the ending head tag inside a paragraph like that.

    I see it now…but how do I get it out? Thanks for all this help!

    WordPress is changing some of my code. For instance around the horizontal line I have < br > tags before and aft. But in Chrome they show up as <p></p>.
    Why is it adding this stuff? Is there somewhere that I can “hard code” the HTML?

    Michael

    @alchymyth

    Forum Moderator

    none of this ‘style’ ‘head’ ‘body’ etc stuff is valid or allowed in this context;

    some ideas to tidy the section:

    http://pastebin.com/kDnvK7Yk

    use this with the html setting of the page editor; don’t change to visual.

    the editor does change some things;
    if you want to get the html exactly as you input it, you would need to use a page template.

    You have multiple problems with the HTML. The end head tag is a ‘stray’. You open a body tag but the body tag is already open. There are other errors as well.

    @alchymyth THANKS! I dont understand how to add div tags externally. Any where you could refer me on that? Would that be the preferred method or can I use the code you generated? Thanks again guys!

    So in the style.css of my child theme, create a new div class for the css I want in this page? For instance div=home?

    You guys ROCK! You fixed my stuff and taught me some cool tricks. I am closing this topic. It is fixed!

    Michael

    @alchymyth

    Forum Moderator

    how to add div tags externally

    if you refer to my suggestion, this div would be added in the page editor, before your other code of the ‘contact-us’ section (and the corresponding </div> obviously needs to be added after the section)

    So in the style.css of my child theme, create a new div class for the css I want in this page? For instance div=home?

    yes, just don’t use the css class .home, as it is one of the automatically generated ones.

    for instnace, if you added a
    <div class="contact-us">
    then in style.css you would use
    .contact-us { .... }

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘[Resolved] CSS applied to page. Unwanted padding appears.’ is closed to new replies.
Skip to toolbar