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