1

I have a page with text, and a div with image and short text about the image in the right.

I want to set only the max-width of the image (and not the width) and I want the text of the image to be limited to the width of the image. I used one of the answers here: Limit text to the width of sibling image / auto width in CSS - and set the right div: display:table and width:1px. But now I have a problem in ie8, because ie8 has a bug described here: http://bytes.com/topic/html-css/answers/870359-ie8-display-table-cell-max-width-bug - It gives wrong width to element when the child's max-width is smaller than intrinsic width.

In the link above there is a solution - to set table-layout:fixed, but it causes my div to be in width 1px.

Does anyone have a solution?

Thank you!

PS I have pictures that illustrate the problem, but I am a new user so I can not post them...

Community
  • 1
  • 1
banana
  • 1,186
  • 4
  • 14
  • 26
  • Can you make a [jsFiddle](http://jsfiddle.net/) demo of the problem? – thirtydot Feb 14 '12 at 14:55
  • 1
    @thirtydot - Yes. Here: http://jsfiddle.net/ftUcF/ - there is an image that is smaller than the max-width and everything is fine, And here: http://jsfiddle.net/VCCcK/ - there is an image that is larger than the max-width and in ie8 it does not look good. Thank you. – banana Feb 15 '12 at 07:53
  • I can't find a way to fix this :( – thirtydot Feb 15 '12 at 14:13

1 Answers1

0

You can use the CSS letter-spacing property in combination with font-size for starters...

you_selector {letter-spacing: 2px;}

Looking at the jsFiddle code here are the changes you should make...

Add this CSS...

.ImageTextPanel {float: none;}
.ImageTextPanel span {letter-spacing: 0px;}

Keep all text inside of paragraph and span elements. While it is technically valid to put text directly in to division elements it's very poor practice.

<DIV class="ImageTextPanel"><span>Text about the image, may be multiple lines.</span></DIV>

Also don't use uppercase letters for HTML, that's junky. If you REALLY want to excel learn to program XHTML served as application/xhtml+xml (you can use XHTML5 too) as it's stricter rules make debugger much easier and you'll end up flying threw basic stuff much faster.

John
  • 1
  • 13
  • 98
  • 177
  • Hi @John. First, thanks for your advices. Did you try what you suggest and it worked for you in IE8? (For the large image) Because I added the css and the span - and got the same bug. :( Here the jsFiddle with the changes, where I went wrong? http://jsfiddle.net/MEb6n/3/ – banana Feb 19 '12 at 06:43
  • The image and span elements should each be in their own division element, those two respective division elements should be inside of a grandparent division element which you have as DescriptionImgDIV. The problem is that you're not enforcing an actual width, only a maximum width. You could try the word-wrap property (only CSS3 IE8 actually supports) or the CSS2 white-space or property however after doing some fiddling I just do not see you getting what you want using max-width. The width of text and the max-width of an image is too subjective. – John Feb 20 '12 at 07:19
  • Hi @John, Thank you again, but word-wrap and white-space didn't solve my problem. So you think I have to use JS to make it work in ie8? :( Why it works perfectly in Firefox, Chrome and Safari? – banana Feb 20 '12 at 08:57
  • Looking at http://jsfiddle.net/MEb6n/3/ I see it DOES render differently in IE8's IE8/standards mode. I don't have a copy of IE9 though IE10 preview 4 in VirtualBox (albeit at a smaller resolution) seems to render as desired. You can use IECCSS (look it up and you'll come across my tutorial) to adjust the CSS just for IE8 though to be frank I'm not sure what you can do up-front. It definitely looks like an inconsistent behavior. – John Feb 20 '12 at 10:08