WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] image bug Twenty Ten - how to fix in child theme (7 posts)

  1. alchymyth
    Forum Moderator
    Posted 3 years ago #

    there is this known 'bug' in style.css of twenty ten which can lead to problems after resizing images -

    caused by the line:

    width: auto;

    in this style:

    #content img {
    	margin: 0;
    	height: auto;
    	max-width: 640px;
    	width: auto;
    }

    does someone know a way to remedy this in a child theme's style sheet -

    other than editing the main theme and hoping for a fix with the next upgraded version of twenty ten ?

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    Does:

    #content img {width:99%;}`

    work?

  3. alchymyth
    Forum Moderator
    Posted 3 years ago #

    i think i tried it all:
    in style.css of the child theme:
    any width in % values, such as width: 90%;, would stretch a free image to that percentage of the content width;
    with a caption, the image would shrink percentual to the caption div width. width: 100%; will make it still cover the right border.

    width: inherit; does not change anything for free images, and only makes a small change to images with caption (the images still streches onto the right border, similar to width:100%;)

    i really don't think that it can be done.

  4. esmi
    Forum Moderator
    Posted 3 years ago #

    Can you add some extra specificity - such as '#content .hentry img?

  5. mtwelve
    Member
    Posted 3 years ago #

    Anybody had any luck with this...

    Extra specificity doesn't work... in fact its quite odd whats happening.

    Using Chrome's tools you can see that it is apparently taking the properties specified in the image tag and that it is 'ignoring' the child stylesheet which I had set to:

    #main #content .hentry img {
    	height: inherit;
    	width: inherit;
    }

    But that is also 'ignoring' the parent stylesheet which is:

    #content img {
    	height: auto;
    	width: auto;
    }

    However when you uncheck the struck out style properties the images resize as set by the img tag.... odd!

    I can't see a way out of this without editing the parent (no thanks) or with other bits off css... ideas?

  6. alchymyth
    Forum Moderator
    Posted 3 years ago #

    recently, there was a suggestion by @ipstenu:

    - not to import the style.css of the parent theme, i.e. not to use this code in style.css of the child theme:
    @import url("../twentyten/style.css");

    - but to copy the whole style.css of the parent theme into the style.css of the child theme, and to make the edit there.

  7. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    Properties applied to the IMG tag (i.e. inline) will always override anything defined in a stylesheet. Inline style declarations always take precedence in the cascade.

Topic Closed

This topic has been closed to new replies.

About this Topic