Forums

WordPress › Support » How-To and Troubleshooting

[resolved] CSS applied to page. Unwanted padding appears. (15 posts)

  1. jkcal436
    Member
    Posted 10 months ago #

    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

  2. vtxyzzy
    Member
    Posted 10 months ago #

    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.

  3. jkcal436
    Member
    Posted 10 months ago #

    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.

  4. Sho-Down
    Member
    Posted 10 months ago #

    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.

  5. Sho-Down
    Member
    Posted 10 months ago #

    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.

  6. jkcal436
    Member
    Posted 10 months ago #

    @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>...

  7. vtxyzzy
    Member
    Posted 10 months ago #

    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.

  8. jkcal436
    Member
    Posted 10 months ago #

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

  9. jkcal436
    Member
    Posted 10 months ago #

    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?

  10. alchymyth
    The Sweeper
    Posted 10 months ago #

    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.

  11. vtxyzzy
    Member
    Posted 10 months ago #

    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.

  12. jkcal436
    Member
    Posted 10 months ago #

    @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!

  13. jkcal436
    Member
    Posted 10 months ago #

    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?

  14. jkcal436
    Member
    Posted 10 months ago #

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

  15. alchymyth
    The Sweeper
    Posted 10 months ago #

    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 { .... }

Reply

You must log in to post.

About this Topic

Tags