Can't get DIV height in IE6 to set appropriately (IE7 works fine)

Discussion in 'HTML' started by Richard.Gohs@pa-tech.com, Sep 23, 2008.

  1. Guest

    Hello All,

    First - I hope I am posting this to the right place - if there is a
    better place - please let me know.

    Second - I hope somone can shed some light on this issue - I've been
    banging my head against the wall for several hours now - and can't
    seem to get what I would think is a "trivial" piece of HTML/CSS to
    work ...

    Now for the story ... the HTML I am working with is below ... I've
    also got this sample available at http://www.pa-tech.com/test.aspx if
    you want to see it in action ...

    This page will essentially render 4 input elements ... with a small
    image to the right of them. The image on the right is always a fixed
    size - and I want the INPUT element on the left to stretch to whatever
    space is left - this space is defined by the "outer" DIV (the one with
    the style defined in the HTML). This works perfectly in IE7 - but in
    IE6 - the red background is not what I would have expected (actually -
    I might have expected it knowing IE6 - but it isn't what I
    wanted :) ) ... my question to any HTML/CSS/IE gurus out there is ...
    do you know of a way that I can get this HTML/CSS to render correctly
    in both IE6 & IE7 (no other browsers matter for this application).

    For what it's worth ... my "perfect" solution would not require
    changing the HTML at all ... it would simply be CSS changes ... this
    is because there is a very large existing application that assumes the
    HTML is laid out as shown.

    Also - the two "e2" references are simply another approach I attempted
    - at first it seemed like this approach would be simpler - but I can't
    seem to get the INPUT element to stretch appropriately (basically I'd
    need to stretch to 100% "minus a few pixels").

    Thanks in advance for any and all help,
    Richard


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
    www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>

    <style type="text/css">
    .e1
    {
    position:absolute;
    left:0;
    top:0;
    right:1px;
    padding-right:21px;
    padding-bottom:-2px;
    height:19px;
    background-color:red;
    }

    .e1 input
    {
    height:14px;
    width:100%;
    position:relative;
    top:-2px;
    left:-1px;
    }

    .e1 img
    {
    float:right;
    position:relative;
    left:22px;
    top:-23px;
    padding:1px 1px 1px 2px;
    border-bottom:solid 1px #e3e9ef;
    border-right:solid 1px #e3e9ef;
    border-top:solid 1px #abadb3;
    }

    .e2 img
    {
    float:right;
    padding:1px 1px 1px 2px;
    border-bottom:solid 1px #e3e9ef;
    border-right:solid 1px #e3e9ef;
    border-top:solid 1px #abadb3;
    }

    .e2 input
    {
    height:14px;
    }
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <div style="position:absolute;left:20px;top:20px;height:
    12px;width:184px;">
    <div class="e1" >
    <input type="text" />
    <img src="lookup.gif" />
    </div>
    </div>


    <div style="position:absolute;left:20px;top:50px;height:
    12px;width:284px;">
    <div class="e1" >
    <input type="text" />
    <img src="lookup.gif" />
    </div>
    </div>


    <div style="position:absolute;left:20px;top:80px;height:
    12px;width:184px;">
    <div class="e2" >
    <img src="lookup.gif" />
    <input type="text" />
    </div>
    </div>

    <div style="position:absolute;left:20px;top:110px;height:
    12px;width:284px;">
    <div class="e2" >
    <img src="lookup.gif" />
    <input type="text" />
    </div>
    </div>


    </form>
    </body>
    </html>
    , Sep 23, 2008
    #1
    1. Advertising

  2. Gazing into my crystal ball I observed writing
    in news:64534408-ef3b-434b-b0f3-a7d3f5512af7@
    25g2000hsx.googlegroups.com:

    > Hello All,
    >
    > First - I hope I am posting this to the right place - if there is a
    > better place - please let me know.
    >
    > Second - I hope somone can shed some light on this issue - I've been
    > banging my head against the wall for several hours now - and can't
    > seem to get what I would think is a "trivial" piece of HTML/CSS to
    > work ...
    >
    > Now for the story ... the HTML I am working with is below ... I've
    > also got this sample available at http://www.pa-tech.com/test.aspx if
    > you want to see it in action ...
    >
    > This page will essentially render 4 input elements ... with a small
    > image to the right of them. The image on the right is always a fixed
    > size - and I want the INPUT element on the left to stretch to whatever
    > space is left - this space is defined by the "outer" DIV (the one with
    > the style defined in the HTML). This works perfectly in IE7 - but in
    > IE6 - the red background is not what I would have expected (actually -
    > I might have expected it knowing IE6 - but it isn't what I
    > wanted :) ) ... my question to any HTML/CSS/IE gurus out there is ...
    > do you know of a way that I can get this HTML/CSS to render correctly
    > in both IE6 & IE7 (no other browsers matter for this application).
    >
    > For what it's worth ... my "perfect" solution would not require
    > changing the HTML at all ... it would simply be CSS changes ... this
    > is because there is a very large existing application that assumes the
    > HTML is laid out as shown.


    Have you tried:
    ..el {
    width:30%;
    background-image: url(lookup.gif);
    padding-right:20px;
    background-repeat: no-repeat;
    background-position:right;
    }
    ..el input {
    width:100%}

    <div class="el">
    <input type="text" name="field" id="field" value="something">
    </div>

    Example is at:
    http://www.cavalcade-of-coding.info/usenet/testinput.php

    >
    > Also - the two "e2" references are simply another approach I attempted
    > - at first it seemed like this approach would be simpler - but I can't
    > seem to get the INPUT element to stretch appropriately (basically I'd
    > need to stretch to 100% "minus a few pixels").
    >
    > Thanks in advance for any and all help,
    > Richard
    >
    >


    <snip markup>



    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Sep 24, 2008
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. BillE
    Replies:
    4
    Views:
    557
    Christiano
    Jul 3, 2008
  2. Don Vaillancourt

    How to tell height of div where height is not set?

    Don Vaillancourt, Jan 28, 2005, in forum: Javascript
    Replies:
    8
    Views:
    133
    Dietmar Meier
    Jan 31, 2005
  3. Manfred

    Script works with IE6 but not with IE7

    Manfred, Feb 5, 2007, in forum: Javascript
    Replies:
    3
    Views:
    90
    Manfred
    Feb 7, 2007
  4. Steve Wright

    AJAX works in IE6 but not IE7 or Firefox

    Steve Wright, Mar 13, 2007, in forum: Javascript
    Replies:
    5
    Views:
    137
    Bart Lateur
    Mar 15, 2007
  5. Replies:
    1
    Views:
    101
Loading...

Share This Page