Image captions break with hyperlinked images

  • Images with captions where the image is NOT hyperlinked appear normal

    View post on imgur.com

    As soon as the image is hyperlinked in any way (either to open the full image on click or to link to somewhere else) the caption styling breaks

    View post on imgur.com

    This is shown using alignnone. Even without a hyperlink, alignleft, aligncenter, and alignright cause similar issues. Alignnone without a hyperlink shows the correct border padding with a captioned image as long as the image is NOT hyperlinked.

    I cannot for the life of me figure out what is going on. I’ve tried doing some custom CSS on wp-caption img, img a, etc. and it does this every time.

    • This topic was modified 5 years, 11 months ago by ticktickatick.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter ticktickatick

    (@ticktickatick)

    Here is the style.css classes. Currently in their original form.

    
.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}
.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}
.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}
.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

.alignnone {
    margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}
.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}
.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}
a img.alignnone {
    margin: 5px 20px 20px 0;
}
a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}
    • This reply was modified 5 years, 11 months ago by keesiemeijer.
    • This reply was modified 5 years, 11 months ago by keesiemeijer. Reason: Fix code formatting

    Hi @ticktickatick this sounds like it might a specificity issue in your CSS. It is possible that somewhere else in your stylesheet you have some additional padding / margin that is being applied to an <a> tag.

    Depending on how specific that styling is, it could be overwriting your styles. For example:

    a img.alignnone {
    margin: 5px 20px 20px 0;
}

    Is less specific than:

    .post-entry figure a .alignnone {
    margin: 5px 50px 50px 0;
}

    The first example is nested 3 levels deep, but the second is 4 levels deep which makes it more specific. Or additional padding / margins could be applied to the <a> tag as well. For example:

    .post-entry a {
    margin: 5px 50px 50px 0;
}

    Would also apply to your image.

    In these cases you probably need to make your CSS slightly more specific to make sure your styles override any others written in the stylesheet.

    There is a couple of ways you can check what is being applied and what is not. In Chrome you could use Chrome devtools to right click on the image, select inspect from the menu and then in the elements panel click the <img /> tag and the <a> tag to see what styles are being applied to each html element in the styles panel. Often you will see your styles further down the list and crossed out, at the top is whatever is overwriting them.

    Next to Styles on the second panel is a tab for Computed. This will show you exactly what is being applied so this is where you can see exactly what the browser is using. Firefox’s inspector is also really here if you prefer that.

    If neither of these work, I like to try to do a reduced test case in codepen.io or jsFiddle to try to recreate the error there without all of the rest of the theme styles affecting it. That way you can often find a fix more easily.

    I hope that helps! ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Image captions break with hyperlinked images’ is closed to new replies.

Tags