Member Avatar for godeny

Hello,

i have some inline images (keyboard keys) in a table cell near each other. Another cell in the row may be very long - fitting into several lines - so the browsers try to wrap every cell. Not using XHTML DTD everything is o.k - the two keyboard key images remain near each other. Switching to XHTML Firefox, Safari and Opera wraps the line between the two images (IE7 not).

As this is a dynamic content, generated from a wiki-like syntax, i am looking for a solution without generally disabling word wrapping in the table cells. Normal text should wrap, only consecutive <IMG> tags should remain always together (as it is the case without the XHTML DTD).

Placing a <nobr> between the images (placing <nobr> before or after all inline images - this is generated contents) solves the problem, but <nobr> is not an "official" tag.

Defining a style for the inline images with display: inline does not help.

Neither helps placing <SPAN> around each images. Placing a <SPAN> around the image groups is something i want to avoid, as that is not an easy step during the generation.

Any ideas to solve this XHTML-conform ?

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<head>
<style type='text/css'>
html,body {
  height: 100%;
  background: #EEE;
  margin: 0;
  padding: 0;
}

img {
  border: 0; 
  display: inline;
}

.spc {
  vertical-align: middle;
}

.td0 {
  vertical-align: top;
}

.tdr {
  vertical-align: top;
  text-align: right;
}

</style>
</head>
<body>
<table cellspacing='0' cellpadding='3' border='0' style='width:100%'>
  <tr>
    <td class='tdr'><img src='k24_ctrl.gif' class='spc'><img src='k24_d.gif' class='spc'></td>
    <td class='td0'>Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla</td>
  </tr>
</table>
</body>
</html>
  • 2 Contributors
  • 3 Replies
  • 180 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ko ko
Member Avatar for ko ko

Float your images. Put your images' attributes 'width' and 'height'.
Example:

<img src='k24_ctrl.gif' width="-" height="-" class='spc'>

And css like that:

img.spc {
      float: left;
     }
Member Avatar for godeny

Float your images. Put your images' attributes 'width' and 'height'.

Sorry, that does not functioning.
The second picture will be placed below the first - and the table cell remains narrow. The long text in the other table column forces the browser to make that column as wide as possible (and additionally aligns the pictures to the left of the table cell, when there is no long line in the other table column, but i would like to align the left column to right).

If there would be additional text before and after the keyboard key images, floating the images would be surely no good solution: the images should remain inside the normal text flow.

Zoltan

Edited by godeny because: n/a
Member Avatar for ko ko

Let me see your file, the code can't show me completely and I can't see your image. And type attributes' values with double quotes, because you used strict mode. And the image attribute width and height were still needed.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.