Text next to image in cell - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Text next to image in cell

IE6 pushes text down

Robert2

12:30 pm on Feb 17, 2006 (gmt 0)

10+ Year Member

I have a table cells which contains an image and text next to it in seperate divs. I float the image div and set margin-left on the text div.
In Firefox it works fine, but in IE6 the text div is pushed below the image when the cell is getting small.

To demonstrate the problem I have made the next example. Just make the window smaller and bigger to see the text jump down and up. Any way to fix this?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
 <title>White-Space Test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <style>
body {
 font-family: arial, sans-serif;
 font-size: 11pt;
}
table {
 border: 2px solid green;
 width: 50%;
}
td {
 border: 1px solid red;
 width: 100%;
 white-space: nowrap;
}
div.Image {
 float: left;
}
div.Text {
 white-space: nowrap;
 margin-left: 60px;
}
 </style>
 </head>
 <body>
 <table>
  <tr>
  <td>
   <div class="Image">
   <img src="back.gif" width="50" height="50" alt="image" border="1"/>
   </div>
   <div class="Text">
   text text text text text text
   </div>
  </td>
  </tr>
 </table>
 </body>
</html>

le_gber

11:06 am on Feb 19, 2006 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

hi there,

have a look at this and tell me if it's what you wanted to achieve.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>White-Space Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body {
font-family: arial, sans-serif;
font-size: 11pt;
}
table {
border: 2px solid green;
width: 50%;
}
td {
border: 1px solid red;
width: 100%;
}
img.imagefloatleft {
float: left;
margin: 0 5px 0 0
}

</style>
</head>
<body>
<table>
<tr>
<td>
<img src="back.gif" width="50" height="50" alt="image" border="1" class="imagefloatleft"/>
text text text text text text
</td>
</tr>
</table>
</body>
</html>

you don't have to create divs to apply the styles - in your case I simplified the code by putting the image and text together and just applying some style to the image.

I also removed the nowrap from the td as I think that's what cause the pb in IE

hope this helps.

Robert2

3:24 pm on Feb 21, 2006 (gmt 0)

10+ Year Member

Unfortunately this causes the text to flow below the image when the window gets too small (in both IE and Firefox). I want the text to stay in the same line as the image.
Thanks for trying to help me though.

le_gber

5:02 pm on Feb 21, 2006 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

ok how's this then

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>White-Space Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body {
font-family: arial, sans-serif;
font-size: 11pt;
}
table {
border: 2px solid green;
width: 50%;
}
td {
border: 1px solid red;
width: 100%;
}
img.imagefloatleft {
float: left;
margin: 0 5px 0 0
}

p.nowrap{
white-space: nowrap;
margin:0;
padding:0;
}

</style>
</head>
<body>
<table>
<tr>
<td>
<p class="nowrap"><img src="back.gif" width="50" height="50" alt="image" border="1" class="imagefloatleft"/>
text text text text text text</p>
</td>
</tr>
</table>
</body>
</html>