Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Can't get DIV height in IE6 to set appropriately (IE7 works fine)

Reply
Thread Tools

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

 
 
Richard.Gohs@pa-tech.com
Guest
Posts: n/a
 
      09-23-2008
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;heigh t:
12px;width:284px;">
<div class="e2" >
<img src="lookup.gif" />
<input type="text" />
</div>
</div>


</form>
</body>
</html>
 
Reply With Quote
 
 
 
 
Adrienne Boswell
Guest
Posts: n/a
 
      09-24-2008
Gazing into my crystal ball I observed http://www.velocityreviews.com/forums/(E-Mail Removed) 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/.../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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Checking for valid date input and convert appropriately Ferrous Cranus Python 40 02-22-2013 05:39 PM
Using size_t clearly (appropriately?) Mark Odell C Programming 40 07-13-2006 06:19 AM
Return appropriately by value, (smart) pointer, or reference Neal Coombes C++ 5 09-22-2005 10:22 PM
Change height of DIV when div border set marco_giuliani_it@hotmail.com Javascript 0 09-21-2005 02:42 PM
How to tell height of div where height is not set? Don Vaillancourt Javascript 8 01-31-2005 11:32 AM



Advertisments