Question

I’ve got some HTML that renders just fine if it’s in a browser window by itself. However, if I try bringing it up in a “lightbox” embedded inside another page using some Javascript magic, it renders incorrectly: the images I have inside table cells wind up expanding horizontally (but not vertically) to fill their table cells, despite the fact that I’ve got their correct widths and heights specified right in the IMG tag. The behavior is pretty consistent across browsers, so I’m assuming this is somehow “correct” behavior, and that there must be some way to prevent it and keep the images displaying at their natural sizes regardless of the encompassing HTML.

The problematic HTML itself is very simple…basically like this:

<table style='border-collapse:collapse;margin-bottom:10px;margin-left:20px'>

  <tr style=''>
    <td style='text-align:right;'>
      <a href='/master_page/distance_biked_page?simple=1'><img style='border:1px solid #B9B9B9;' src='/user_image/image1.jpg' width='50' height='35'/></a>
    </td> 
    <td style='height:50px;padding-left:10px'> 
      <a href="/master_page/distance_biked_page?simple=1">distance biked page</a> 
    </td> 
  </tr>

  <tr style=''> 
    <td style='text-align:right;'> 
      <a href='/master_page/timetracker_9_page?simple=1'><img style='border:1px solid #B9B9B9;' src='/user_image/image2.jpg' width='42' height='50'/></a> 
    </td> 
    <td style='height:50px;padding-left:10px'> 
      <a href="/master_page/timetracker_9_page?simple=1">time-tracker #9 page</a> 
    </td> 
  </tr> 

</table>

(Note that while the narrower image expands horizontally to fill its cell when this HTML is rendered in the problematic “lightbox” context, the shorter image doesn’t expand vertically to fill its cell.)

Not being a HTML or CSS expert, I’m pretty baffled by this behavior. Any ideas what might be causing it, or how I might go about stopping it?

Answer 1

Check your CSS for overriding styles for width and height, such as:

table img {}
table a {}
tr img {}
tr a {}
td img {}
td {}
a img {}
a {}

You have an overriding height & width set for a parent element somewhere. Parent element CSS can override image width and height set in HTML, but NOT if it is set this way:

<img src="x.gif" style="width: 50px;"/>

There’s your fix.