Grow your CSS skills. Land your dream job.

Bonus points for being a ‘Padding-Margin Crusher-Ninja”

  • # April 18, 2013 at 2:22 pm

    I can’t figure out what’s creating the padding at the top of the main content area above the Latest News Ticker.

    http://tinyurl.com/bv45hdu

    Wordpress Twenty Twelve theme has a bit of Class-itis me thinks, but it’s the theme plugged in at the moment (not a fan).
    Trying to eliminate the space above and below the ticker, besides the ticker itself having padding properties, etc. I think it’s the theme attributes giving me troubles though.

    I’ve tried 20 or more smackdown methods, nothings working. :(

    # April 18, 2013 at 2:42 pm

    line 579

    .site-content {
    margin: 1.71429rem 0 0;
    }

    # April 18, 2013 at 2:43 pm

    @Crssp, my first guess is the empty `p` tags and line breaks you have in the page.

    # April 18, 2013 at 2:46 pm

    @ChrisP hit the nail on the head. There’s an empty `

    ` tag sitting there: http://cl.ly/image/0q2B3h0J2r2W

    # April 18, 2013 at 2:48 pm

    Oh man, that’s what I get for editing my bosses work, and he’s got extra p tags… nice…
    there’s always p: dislay: none;
    thanks guys.

    # April 18, 2013 at 2:50 pm

    It could be the ditty news scroll plugin tossing in the p tags, if it’s even that tough.
    Thanks again.

    # April 18, 2013 at 2:50 pm

    @Crssp, giving your `

    ` tags a `display: none;` value will leave you with 0 content..aside from that, @TheDoc‘s screenshot shows that the problem is your ticker is _inside_ a `

    ` tag, which would make your ticker disappear completely.

    > It could be the ditty news scroll plugin tossing in the p tags, if it’s even that tough. Thanks again.

    It’s someone getting “return happy” in the visual editor of WP..just switch it to HTML and delete excess `p` and `br` tags.

    # April 18, 2013 at 2:57 pm

    Aware of the p display none it was a joke.
    although I was stoked when I took down a site today with an awesome wildcard line of code:
    * { display:none }

    # April 18, 2013 at 2:59 pm

    Actually the only thing in the editor, sitting at the very top is the shortcode:
    [ditty_news_ticker id="315"]
    Getting a little bit trickier, for css-tricks fans, :)

    # April 18, 2013 at 2:59 pm

    > Aware of the p display none it was a joke.

    Glad to hear it..lol sarcasm is hard to read

    # April 18, 2013 at 3:00 pm

    It was a great help Chris, I was so busy looking at all the ID’s and .classes, it totally got by me, when looking at the code.
    Fresh eyes are good :)

    # April 18, 2013 at 3:03 pm

    Anybody have a suggested fix for WordPress adding P tags, especially when it’s the first thing in the editor?
    First google brought me to this functions file snippet:

    http://sww.co.nz/solution-to-wordpress-adding-br-and-p-tags-around-shortcodes/

    Really not sure now.

    # April 18, 2013 at 3:16 pm

    Never had a use for:

    p:first-child rule
    …but that’s a thought, even though the p tag shouldn’t be there.

    # April 18, 2013 at 3:30 pm

    @ChrisP> It’s someone getting “return happy” in the visual editor of WP..just switch it to HTML and delete excess p and br tags.
    The P tags are not there, in the html view, they are getting parsed in some how, whether it’s js of the plugin or just WP auto P’s….

    # April 18, 2013 at 3:36 pm

    @Crssp, I think the link you had earlier is the ticket.

    > http://sww.co.nz/solution-to-wordpress-adding-br-and-p-tags-around-shortcodes/

    I don’t really make much use of shortcodes so I don’t have much experience..

    I think your `:first-child` option could be a possibility too. The only problem is the pages that _don’t_ have a shortcode would be affected too. You could always add a body class..like `.home` for this page, then target the shortcode using `.home .entry-content p:first-child { margin: 0 }`

    That would definitely be a hack-y solution though..

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".