|
BeTheBall -> Help with form controls not staying put in <div> (5/21/2009 23:39:04)
|
I have been dealing with this issue off an on for months. Am hoping someone has seen it before and knows the fix. My code is below. What happens is this: In IE, if you open the page and then narrow the window eventually the dropdown menu will fall down the page so that it is below the left side div. I would really like to figure out a way to make it stop doing that. Here is what it does in Firefox, which is what I want. Here is what it does in IE, which has driven me nuts for weeks. Any help would deeply appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Heavy Highway Vehicle Use Tax</title>
<style type="text/css">
BODY {
FONT-SIZE: 85%; MARGIN: 0px; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.attribute_id {
display: none;
}
TABLE {
MARGIN: 7px; BORDER-COLLAPSE: collapse
}
TD {
PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; VERTICAL-ALIGN: top; PADDING-TOP: 2px;
}
TH {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; VERTICAL-ALIGN: top; COLOR: #ffffff;
PADDING-TOP: 5px; BACKGROUND-COLOR: #009900;
}
H2 {
FONT-SIZE: x-large; MARGIN-BOTTOM: 0px; COLOR: #009900
}
H3 {
MARGIN-TOP: 5px; FONT-SIZE: large; COLOR: #009900
}
H4 {
FONT-WEIGHT: bold; FONT-SIZE: medium; MARGIN-BOTTOM: 0px
}
P {
MARGIN: 10px 0px 5px
}
#top-menu {
MARGIN-BOTTOM: 20px
}
.Button {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #000000
1px solid; COLOR: #ffffff; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #009900
}
.qmatic {
MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 90%; COLOR: #cc0000
}
.center {
TEXT-ALIGN: center
}
.bold {
FONT-WEIGHT: bold
}
.italic {
FONT-STYLE: italic
}
.error {
COLOR: #ff0000
}
.disabled {
BACKGROUND-COLOR: #f7f7f7
}
.enabled {
BACKGROUND-COLOR: #ffffcc
}
#rh-col {
PADDING-LEFT: 210px; PADDING-TOP: 20px;
}
#hdr {
BORDER-RIGHT: #333333 0px solid; PADDING-RIGHT: 5px; BORDER-TOP: #333333 0px solid; PADDING-LEFT: 5px;
BACKGROUND: #eeeeee; PADDING-BOTTOM: 5px; MARGIN: 0px; BORDER-LEFT: #333333 0px solid; WIDTH: 100%; COLOR:
#333333; PADDING-TOP: 5px; BORDER-BOTTOM: #333333 2px solid; TEXT-ALIGN: center
}
#lh-col {
PADDING-LEFT: 15px; FLOAT: left; WIDTH: 150px; COLOR: #eeeeee; PADDING-TOP:
20px;background-color:green;
}
#question-bg {
BORDER-RIGHT: green 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: green 1px solid; PADDING-LEFT: 5px;
PADDING-BOTTOM: 5px; MARGIN: 0px auto; BORDER-LEFT: green 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: green 1px
solid; BACKGROUND-COLOR: #ffffcc
}
#lh-col A:link {
COLOR: #cccccc; TEXT-DECORATION: none;
}
#lh-col A:visited {
COLOR: #cccccc; TEXT-DECORATION: none;
}
#lh-col A:active {
COLOR: #ffffff; TEXT-DECORATION: underline;
}
#lh-col A:hover {
COLOR: #ffffff; TEXT-DECORATION: underline;
}
.answer {
TEXT-ALIGN: left;
}
</style>
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="canvas">
<div id="hdr">
<h2>Test Heading </h2>
<br>
<p class="qmatic">subheading1</p>
<p class="bold">subheading2</p>
</div>
<div id="lh-col">
<h4 class="center">Resources</h4>
<p> <a href="www.google.com" target="ref" type="pop">Test Link </a></p>
<p> <a href="www.google.com" target="ref" type="pop">Test Link </a></p>
<p> <a href="www.google.com" target="ref" type="pop">Test Link </a></p>
<p> <a href="www.google.com" target="ref" type="pop">Test Link </a></p>
<p> <a href="www.google.com" target="ref" type="pop">Test Link </a></p>
<p> <a href="www.google.com" target="ref" type="pop">Test Link </a></p>
<p> <a href="www.google.com" target="ref" type="pop">Test Link </a></p>
</div>
<div id="rh-col">
<div id="content">
<br>
<div id="question-bg">
<h3>Content Heading </h3>
<form name="investigationForm" action="/HeavyHighwayVehicleUseTax/app/investigate.action"
method="post" target="_top">
<input type="hidden" name="factId" value="interview_complete"/>
<input type="hidden" name="entity" value="global"/>
<input type="hidden" name="entityInstanceName" value="global"/>
<input type="hidden" name="screenId" value="s37@Screens_Screens_xint"/>
<input type="hidden" name="screenEntity" value="global"/>
<input type="hidden" name="screenEntityInstanceName" value="global"/>
<label for="OverrideSelectionAttributeControl0">
Select one of the following? </label>
<select id="OverrideSelectionAttributeControl0"
name="OverrideSelectionAttributeControl0" class="">
<option value="uncertain">Select One</option>
<option>Dropdown option #1</option>
<option>Dropdown option #2</option>
<option>Dropdown option #3</option>
</select>
<br><input name="action" type="submit" class="Button" value="Continue" alt="Continue" />
<br>
<br>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
|
|
|
