BLOGGER – Add black frame around photo AND remove margin under photo

  • # February 12, 2013 at 1:15 pm

    I really appreciate the help. How can I add a thin black border around IMG tag and also, how can I remove the margin that’s under a photo?

    Here’s HTML:

    <a style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;" imageanchor="1" href="http://simeonhendrix.com/images/boogeyman-poster-movie.jpg"><img width="320" height="218" border="0" src="http://simeonhendrix.com/images/boogeyman-poster-movie.jpg"></a>Check out this Pen!

    Here’s CSS:

    element.style {
    clear: right;
    float: right;
    margin-bottom: 1em;
    margin-left: 1em;
    }
    Check out this Pen!

    THANK YOU SO MUCH!!!

    # February 12, 2013 at 1:16 pm

    I realize that all I need to do is remove the ‘MARGIN-BOTTOM’ from the CSS and that will remove the margin, HOWEVER, when I go into the HTML/CSS for my blogger, ‘ELEMENT.STYLE’ is not able to be found.

    # February 12, 2013 at 1:22 pm

    This reply has been reported for inappropriate content.

    @hendrix940, when you see ‘element.style’ in the inspector, it means it’s an inline style, which means either a) editing the html itself, or b) editing the javascript that’s creating that inline style…

    OR add margin: 0 !important to your css to override the inline style.

    The border is border: 1px solid black so…to add to an img tag it would be:

    img {
    border: 1px solid black;
    }

    # February 12, 2013 at 1:32 pm

    Awesome! Thank you @chrisp I very much appreciate your explanation sir!!

    # February 12, 2013 at 1:36 pm

    @chrisp , so if I wanted to remove a margin-bottom attribute

    element.style {
    clear: right;
    float: right;
    margin-bottom: 1em;
    margin-left: 1em;
    }
    Check out this Pen!

    # February 12, 2013 at 1:37 pm

    on only the IMG tags … then, I would write it like this:

    img {
    border: 1px solid black;
    margin-bottom: 0em;
    }
    Check out this Pen!

    # February 12, 2013 at 1:37 pm

    correct? THANK YOU SO MUCH!!

    # February 12, 2013 at 1:40 pm

    This reply has been reported for inappropriate content.

    @hendrix940, no, don’t put element.style in your css, as it’s not really calling anything..what you need to do is find out what ID or class that element is using, and override it through that class or ID. For example, if you have a div with class of main-div and in the inspector tool you see

    element.style {
    clear: right;
    float: right;
    margin-bottom: 1em;
    margin-left: 1em;
    }

    for div.main-div, you need to put in your CSS:

    .main-div {
    margin: 0 !important;
    }

    that way, the margin in your CSS will override the inline style of margin-bottom: 1em; that you see in ‘element.style’

    Does that make sense?

    # February 12, 2013 at 2:01 pm

    Okay, yes I think I understand. I’m trying it out right now sir.

    # February 12, 2013 at 2:17 pm

    @chrisp , I’m doing something wrong. Here’s the HTML:

    <div class="separator" style="clear: both; text-align: center;">
    <a style="clear: right; float: right; margin-left: 1em; margin-bottom: 1em;" imageanchor="1" href="http://simeonhendrix.com/images/boogeyman-poster-movie.jpg">
    </div>
    Check out this Pen!

    And this is the CSS that blogger automatically is generating. You’ll also notice I tried to implement your instructions but it didn’t remove the margin-bottom.

    element.style {
    clear: right;
    float: right;
    margin-bottom: 1em;
    margin-left: 1em;
    }

    The above code is what blogger is automatically generating for me.

    I tried:

    .separator {
    margin-bottom: 0 !important;
    }

    But this doesn't remove the 'margin-bottom'
    Check out this Pen!

    # February 12, 2013 at 2:29 pm

    Furthermore, when I got into the HTML/CSS of the blogger, I can’t edit and modify ‘ELEMENT.STYLE’

    # February 12, 2013 at 3:08 pm

    This reply has been reported for inappropriate content.

    @hendrix, you almost have it.. .separator has no margin-bottom, but the child a does, so it should look like this:

    .separator a {
    margin-bottom: 0 !important;
    }

    # February 12, 2013 at 4:21 pm

    AH!! Thanks so much dude!!

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed