Hello everyone and thank you for taking the time to read and respond.
I am trying to create a form with "spoiler" drop downs that expand a <ul> for people to select their specific subcategory. Some <ul>s are quite long and expand way past the parent container's limits. I do not want to make the containers massive and spread all of the contents out. When users press the 'expand/show' button, I would like the parent container to expand to the size of the <ul> without enabling a scroll bar.
I've played with all of the overflow settings and can't seem to get what I want. It worked in IE8 but not IE9, chrome, or FF.
Here's my code.
Code:
.h1 {
font-size: 60px;
color: #00ffff;
font-weight: bold;
text-align: center;
}
.h2 {
font-size: 20px;
color: black;
font-weight: bold;
text-align: center;
}
.h3 {
font-size: 40px;
color: black;
font-weight: bold;
text-align: center;
}
.h4 {
font-size: 15px;
color: black;
text-align: left;
}
body {
background: rgb(245,246,247);
}
#container {
width: 1200px;
height: 1000px;
margin: auto;
border: solid;
padding: 5px;
margin: auto;
background: white;
overflow: inherit;
}
#header {
width: 100%;
height: 100px;
text-align: center;
background: white;
margin-bottom: 5px;
}
#line {
width: 100%;
height: 160px;
margin: auto;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
background: rgb(245,246,247);
}
#box {
width: 200px;
height: 150px;
margin: auto;
padding: 5px;
margin-left: 10px;
margin-right: 20px;
text-align: left;
float: left;
}
and a sample of the mark up
Code:
<!DOCTYPE HTML>
<head>
<title>Sample Guy (using CSS)</title>
<link rel="stylesheet" type="text/css" href="primary.css">
</head>
<body>
<div id="container">
<div id="header"><span class="h1"> HEADER SAMPLE </span><br><span class="h2">Cardiac/Respiratory Arrest</span></div>
<div id="line">
<div id="box">
<p><DIV style="MARGIN: 5px 20px 20px">
<DIV class=quotetitle><STRONG><FONT size=5>Header 1<BR></FONT></STRONG><INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button></DIV>
<DIV class=quotecontent>
<DIV style="DISPLAY: none">
<UL>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A> </LI>
<LI><A title="" href="#" target="">sample</A> </LI>
<LI><A title="" href="#" target="">sample</A> </LI>
</UL>
</DIV></DIV></DIV> </p>
</div>
<div id="box">
<p><DIV style="MARGIN: 5px 20px 20px">
<DIV class=quotetitle><STRONG><FONT size=5>Header 2<BR></FONT></STRONG><INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button></DIV>
<DIV class=quotecontent>
<DIV style="DISPLAY: none">
<UL>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A> </LI>
<LI><A title="" href="#" target="">sample</A> </LI>
<LI><A title="" href="#" target="">sample</A> </LI>
</UL>
</DIV></DIV></DIV> </p>
</div>
<div id="box">
<p><DIV style="MARGIN: 5px 20px 20px">
<DIV class=quotetitle><STRONG><FONT size=5>Header 3<BR></FONT></STRONG><INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button></DIV>
<DIV class=quotecontent>
<DIV style="DISPLAY: none">
<UL>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">sample</A> </LI>
<LI><A title="" href="#" target="">sample</A> </LI>
<LI><A title="" href="#" target="">sample</A> </LI>
</UL>
</DIV></DIV></DIV> </p>
</div>
<div id="box">
<p><DIV style="MARGIN: 5px 20px 20px">
<DIV class=quotetitle><STRONG><FONT size=5>Header 4<BR></FONT></STRONG><INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button></DIV>
<DIV class=quotecontent>
<DIV style="DISPLAY: none">
<UL>
<LI><A title="" href="#" target="">sample</A></LI>
</UL>
</DIV></DIV></DIV> </p>
</div>
<div id="box">
<p><DIV style="MARGIN: 5px 20px 20px">
<DIV class=quotetitle><STRONG><FONT size=5>Header 5<BR></FONT></STRONG><INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button></DIV>
<DIV class=quotecontent>
<DIV style="DISPLAY: none">
<UL>
<LI><A title="" href="#" target="">sample</A></LI>
<LI><A title="" href="#" target="">Other</A></LI>
</UL>
</DIV></DIV></DIV> </p>
</div>
</div>
<div id="line">
<div id="box">
<p><DIV style="MARGIN: 5px 20px 20px">
<DIV class=quotetitle><STRONG><FONT size=5>Header 6<BR></FONT></STRONG><INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button></DIV>
<DIV class=quotecontent>
<DIV style="DISPLAY: none">
<UL>
<LI><A title="" href="#" target="">sample/sample</A></LI>
</UL>
</DIV></DIV></DIV> </p>
</div>
<div id="box">
<p><DIV style="MARGIN: 5px 20px 20px">
<DIV class=quotetitle><STRONG><FONT size=5>Header 7<BR></FONT></STRONG><INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button></DIV>
<DIV class=quotecontent>
<DIV style="DISPLAY: none">
<UL>
<LI><A title="" href="#" target="">sample</A></LI>
</UL>
</DIV></DIV></DIV> </p>
</div>
<div id="box">
<p><DIV style="MARGIN: 5px 20px 20px">
<DIV class=quotetitle><STRONG><FONT size=5>Header 8<BR></FONT></STRONG><INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button></DIV>
<DIV class=quotecontent>
<DIV style="DISPLAY: none">
<UL>
<LI><A title="" href="#" target="">sample</A></LI>
</UL>
</DIV></DIV></DIV> </p>
</div>
<div id="box">
<p><DIV style="MARGIN: 5px 20px 20px">
<DIV class=quotetitle><STRONG><FONT size=5>Header 9<BR></FONT></STRONG><INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button></DIV>
<DIV class=quotecontent>
<DIV style="DISPLAY: none">
<UL>
<LI><A title="" href="#" target="">sample</A></LI>
</UL>
</DIV></DIV></DIV> </p>
</div>
<div id="box">
<p><DIV style="MARGIN: 5px 20px 20px">
<DIV class=quotetitle><STRONG><FONT size=5>Header 10<BR></FONT></STRONG><INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button></DIV>
<DIV class=quotecontent>
<DIV style="DISPLAY: none">
<UL>
<LI><A title="" href="#" target="">sample</A></LI>
</UL>
</DIV></DIV></DIV> </p>
</div>
</div>
Thanks so much!
-BR