Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS relative height positioning not working properly in IE

    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 {
    position:relative;
    left: <%=35 + AddlAge %>px;
    bottom: <%=2 + AddlWeight %>px;
    }
    img.crosshairsHT {
    position:relative;
    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!

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •