image bug Twenty Ten – how to fix in child theme

  • Resolved Michael

    (@alchymyth)


    14 years, 5 months 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 ?

Viewing 6 replies - 1 through 6 (of 6 total)

  • Does:

    #content img {width:99%;}`

    work?

    Thread Starter Michael

    (@alchymyth)

    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.

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

    mtwelve

    (@mtwelve)

    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?

    Thread Starter Michael

    (@alchymyth)

    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.

    Chip Bennett

    (@chipbennett)

    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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘image bug Twenty Ten – how to fix in child theme’ is closed to new replies.