4

So I have a table with only two columns and one row. The second td holds an image, and the first holds text. I would like the td containing the image to be at the minimum size possible with that image inside, and the first td to fill the remaining space. The following works in every browser except IE7 (we are not doing IE6):

<table> <tr><td style="width:100%;">TEXT</td><td><img src="jpg" alt="jpg" /></td></tr> </table>

What happens is this: The page renders correctly, then when you mouse over the table, the first td expands to fill the entire table, pushing the image off the edge.

I could fix this with some jQuery to measure the width of the image and calculate remainder for the first td; but that solution is full of LAME!

Please help. I do not understand why IE7 feels the need to redraw the way it does.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Fresheyeball
  • 29,567
  • 20
  • 102
  • 164
  • Let me be more clear. IE7 reflow is caused by mouseover, sometimes recalculating dom incorrectly, sometimes correcting problems. This occurs in a vanilla environment. Since I posted this I have seen it happen many more times. This CANNOT only be happening to me. Even in flat html css instances. – Fresheyeball Jul 26 '11 at 23:15
  • 1
    can you give an example in http://jsfiddle.net/ for better understanding. – sandeep Jul 27 '11 at 04:28
  • 2
    You need to provide a [jsFiddle](http://jsfiddle.net/) or [JS Bin](http://jsbin.com/) demo showing the problem in action. Once you've done that, we can throw our ideas at it and see if anything helps. – thirtydot Jul 27 '11 at 09:31
  • feel free to fork this fiddle and get a jsfiddle account... http://jsfiddle.net/biznuge/x7Gya/2/ Your problem doesn't seem to be exhibited just by plonking this code into a page, so it might be there are issues elsewhere in your code resulting in the issue with the mouseover... Good Luck! – BizNuge Jul 27 '11 at 20:22
  • 1
    Can you post (pastebin perhaps) the entire page of HTML and any css/js linked file you might have as no matter what i do with your code IE7 does not change or alter at all. – White Dragon Aug 02 '11 at 05:44

5 Answers5

2

Try the following code instead. Instead of explicitly declaring too much width, try explicitly declaring too little (because the image will push the width beyond 1% anyway.)

I am writing this off the top of my head without actually having looked in IE7, but I have IE7 in a Virtual Machine at home and so I'll comment back later if I find a different solution.

<table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>TEXT</td>
<td width="1%" style="width: 1%;"><img src="http://www.google.com/intl/en_com/images/srpr/logo2w.png" alt="Google Logo" /></td>
</tr>
</table>
JD Smith
  • 1,764
  • 15
  • 17
1

There are a couple of things that you could try:

  1. Make sure you're using a reset.css stylesheet to reset all of the browser defaults and accommodate any browser quirks. That's especially important with Internet Explorer.
  2. Only use tables for tabular data — I'm not sure what the rest of your table contains, but unless there's going to be rows of data, it would be much easier to use a container div with a p and img floated.
  3. Set the width and height on the img.
  4. Use CSS position: relative; float: left; to see if it helps with positioning issues on hover. I see hover issues a lot with jQuery scripts and browser hacks like CSS3 PIE — if you're using those, try removing them.
Tony Webster
  • 71
  • 1
  • 1. I am using a reset. 2. Yes the data is tabular. 3. I cannot set width and height of the image, the whole point is that the image size can be different. 4. Tried that. I am not actually telling the browser to do anything regarding hover. Not in css or js, which is why I am confused. Any other ideas? Those are pretty good so far. – Fresheyeball Jun 23 '11 at 04:04
1

Try setting the style="zoom:1" on the element.

Andrew
  • 13,757
  • 13
  • 66
  • 84
climboid
  • 6,932
  • 14
  • 44
  • 71
0

I am not sure but looking at 

<table> <tr><td style="width:100%;">TEXT</td><td><img src="jpg" alt="jpg" /></td></tr> </table>

from what I can see is that there is no table width on this, so IE does not know how to scale the td appropriately.

Another guess is because you're are declaring width as 100% on the first one IE interprets this to shove it off. Which is my guess, you can not have a width of 100% on the first cell because it means to take up 100% of the full table width.

Travis Pessetto
  • 3,260
  • 4
  • 27
  • 55
0

clear you browser cache, specify a width and height on your image

i have seen the most weird stuff on ie7, like pagebreaks \n and such causing this effect, ie:

<a href="#>
<img src="jpg" />
</a>

to fix just put everything on the same line and without spaces (like your table with a space on the right)

also avoid using inline style, use a stylesheet (css)

braindamage
  • 2,226
  • 4
  • 24
  • 33