View Full Version : CSS relative height positioning not working properly in IE

07-16-2007, 05:47 PM
I'm trying to use CSS combined with a regular HTML form that accepts input values from the user, one width value and two height values. I use the form values gathered to modify two different CSS classes. Both get the same width value and each class gets a unique height value. (AddlAge and AddlWeight are the modified versions of these values)

These are the CSS classes:
img.crosshairs {
left: <%=35 + AddlAge %>px;
bottom: <%=2 + AddlWeight %>px;
img.crosshairsHT {
left: <%=60 + AddlAge %>px;
bottom: <%=16 + AddlHeight %>px;

Then, I have the following cell in my table with images of the two classes beside each other:
<td valign="bottom"><img src="crosshair_purple.gif" width="21" height="21" class="crosshairsHT">
<img src="GrowthChart_crosshairs.gif" width="21" height="21" class="crosshairs"></td>

In Firefox, Safari and Opera, the images will appear in the proper spots corresponding to the values that the user submits. However, in IE, the two images appear at the proper width values but appear far above the table height-wise or completely off the page depending on what values are submitted. I've searched the net for a solution to my problem, but so far out of everything I've tried nothing works! Please help!

07-16-2007, 10:22 PM
Can you please set up a page that shows the problem? It sounds like a rendering issue not related to the form submission or ASP stuff.

07-17-2007, 06:58 PM
Well I did find a solution, although it was just a work-around. I found IE always put the image 457 pixels higher than what was in the bottom: setting.. so I use <!--[if IE]> with a CSS class that subtracts 457 pixels from the height.