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

R

Richard.Gohs

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>
 
A

Adrienne Boswell

Gazing into my crystal ball I observed (e-mail address removed) writing
in 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>
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top