Support » Themes and Templates » Need help with image borders (css)

  • Resolved artifice-design

    (@artifice-design)


    I am trying to add a custom CSS image border to certain images on a WordPress site I am building, however, I have run into a problem that I cannot solve.

    When I add the border to my stylesheet, it seems to add the border to the whole paragraph that the images sits in, rather than just the image itself!

    http://andrewgough.co.uk/test/interviews_hancock/

    I have only selected certain images to have this border applied, and the style is:

    .picborder {
    	line-height: 110%;
    	margin-top: 0px;
    	margin-bottom: 12px;
    	padding-top: 0px;
    	padding-bottom: 0px;
    	border: 25px solid #6c340b;
    
    }

    I then apply this style to the images I want the border added to – but as you can see the border goes way past the image boundaries. What else is affecting the border size?

    Thanks for any help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • the CSS class is indeed added to a paragraph tag (from the html code of your site as seen in the browser):

    <p align="center" class="picborder"><img src="http://andrewgough.co.uk/hancock.jpg" width="500" height="298"></p>

    have only selected certain images to have this border applied

    how are you doing this?

    as this might be a theme related issue, please also contact your theme’s developer for support; http://codex.wordpress.org/Forum_Welcome#Commercial_Products

    Thread Starter artifice-design

    (@artifice-design)

    Maybe it is a theme issue then – haven’t seen this problem before with any of my non-wordpress sites, usually when I apply this style to an image the border goes JUST around the image, it doesn’t stretch right across the whole containing paragraph.

    And to clarify, I am running the style I mentioned above:

    .picborder {
    	line-height: 110%;
    	margin-top: 0px;
    	margin-bottom: 12px;
    	padding-top: 0px;
    	padding-bottom: 0px;
    	border: 25px solid #6c340b;
    
    }

    Then I call that style down on individual images with:

    <p align="center" class="picborder">

    Doing it this way, I only get the borders on these selected images. However, something else is interfering and stretching the border right across the paragraph! Very odd.

    if you add the .picborder class to the paragraph, but are aiming at the image within that paragraph, your CSS should be:

    .picborder img { .... }

    Thread Starter artifice-design

    (@artifice-design)

    That’s it…that worked a treat, many thanks for your help. 🙂

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Need help with image borders (css)’ is closed to new replies.