No replies
akalan
Offline
newbie
Last seen: 12 years 2 days ago
Joined: 2009-12-01
Posts: 1
Points: 2

Hi I am working on this website which uses CSS tabs to display the content. It works but I want to have the tabs which are divs, set to auto height to change with the content. I have tried height:auto but this doesn't. Can anyone please help me. Thanks Alan

HTML:

<div id="wraptab">
<ul id="flyout">
<li><a href="" class="inter"><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<b class="inter"></b>
<ul style="visibility:visible;">
<li><h3>Interested?</h3>
	<p>If you're interested in studying one or more of our subjects, there are a few things that you may need to know to get the process rolling:
 </p>
 
 
  <table id="points" width="300" border="0">
    <tr>
      <td width="145" class="whtunder"><p>A Level Grade</p></td>
      <td width="145" class="whtunder"><p>UCAS Points</p></td>
    </tr>
    <tr>
      <td><p>A Grade</p></td>
      <td><p>120 UCAS Points</p></td>
    </tr>
    <tr>
      <td><p>B Grade</p></td>
      <td><p>100 UCAS Points</p></td>
    </tr>
    <tr>
      <td><p>C Grade</p></td>
      <td><p>80 UCAS Points</p></td>
    </tr>
    <tr>
      <td><p>D Grade</p></td>
      <td><p>60 UCAS Points</p></td>
    </tr>
    <tr>
      <td><p>E Grade</p></td>
      <td><p>40 UCAS Points</p></td>
    </tr>
  </table>
 
  <p>We would recommend that you check out our prospectus for information on the TARIFF (UCAS) POINTS required for each course. <a href="http://prospectus.ulster.ac.uk" target="_blank">These are available online</a> if you do not have a print version.</p>
 
  <h3>Eddie's Jargon Buster</h3>
  <p><span class="emph">Lecture:</span> The term used for group teaching in a large class. Your main aim here will be to listen and take notes.</p>
  <p><span class="emph">Seminar:</span> A small group discussion around the theme of that week's lecture. Here you can ask questions and it is a lot more interactive than a lecture.</p>
 
</li>
 
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="" class="degree"><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<b class="degree"></b>
<ul>
<li><h3>Choosing a degree...</h3>
 
<p>Here is a brief guide to help you while choosing your degree. </p>
   <p>There are <span class="emph2">2 types of degree</span>:
   <span class="emph">SINGLE AWARDS</span> and <span class="emph"> COMBINED PROGRAMMES</span>. Before you enrol you will have to choose your course based on the tariff points you have gained by leaving school. If you have chosen a <span class="emph">SINGLE AWARD</span> (eg. BA Hons Media Studies) then you can proceed to Enrolment process below. <span class="emph">A COMBINED PROGRAMME</span> allows you to study more than one subject on your degree.</p>
   <p>The following 3 diagrams explain what it means if you choose a <span class="emph">COMBINED PROGRAMME.</span> </p>
 
 
    <table id="combo" width="602">
    <tr>
   <td width="272" class="whtunder">
 
  <img src="images/100.png" alt="Degree Choice Diagram MAIN" width="250" height="145" align="left" class="stdpad" /></td>
 
  <td width="330" class="whtunder">
  <dl id="combomain">
  <dd>A <span class="emph">MAIN</span> degree is a programme involving 2 subjects that are taught and assessed <span class="emph">EQUALLY</span>.</dd>
  <dd>eg. English <span class="emph">AND</span> History.</dd>
  <dd><span class="emph">50%</span> of the teaching and assessment will go to each subject.</dd>
  </dl>
 
  </td>
   <tr>
   <td width="272" class="whtunder">
 
  <img src="images/5050.png" alt="Degree Choice Diagram MAIN" width="250" height="145" align="left" class="stdpad" /></td>
 
  <td width="330" class="whtunder">
  <dl id="combomain">
  <dd>A <span class="emph">MAIN</span> degree is a programme involving 2 subjects that are taught and assessed <span class="emph">EQUALLY</span>.</dd>
  <dd>eg. English <span class="emph">AND</span> History.</dd>
  <dd><span class="emph">50%</span> of the teaching and assessment will go to each subject.</dd>
  </dl>
 
  </td>
 
 
  <tr>
  <td>
 
  <img src="images/6733.png" width="250" height="145" alt="Degree Choice Diagram MAJOR/MINOR" class="stdpad"/>
 
 
 
  </td>
 
  <td><dl id="combomain">
  <dd>A <span class="emph">MAJOR/MINOR</span> degree would be a degree involving 2 subjects that are taught and assessed <span class="emph">UNEQUALLY</span></dd>
  <dd>eg. English <span class="emph">WITH</span> History.</dd>
  <dd>The subject that takes up most of the degree time is known as the <span class="emph">MAJOR</span>...</dd>
  <dd>...and the subject that takes up the least degree time is called the <span class="emph">MINOR</span>
 
  </dl>
 
 
 
  </td>
 </tr>
 <tr><td><img src="images/3367.png" width="250" height="145" alt="Degree Choice Diagram MINOR/MAJOR" class="stdpad"/></td>
 <td><dl id="combomain">
  <dd>This also works in reverse eg. History <span class="emph">WITH</span> English.</dd>
  <dd>One subject is taught and assessed MORE than the other.</dd>
  <dd>The <span class="emph">MAJOR</span> subject takes up <span class="emph">67%</span> of the degree time...</dd>
  <dd>...and the <span class="emph">MINOR</span> takes up <span class="emph">33%</span> of the time.
 
  </dl>
  </td>
 
 
 </tr>
  </table>
  </li>
 
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="" class="enroll"><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<b class="enroll"></b>
<ul>
<li><h3>Enrolment process</h3>
 
 <div class="checklist">
 <p>Before attempting this process <span class="emph">YOU WILL NEED:</span></p>
 
 <dl id="combomain2">
 <dd>A pen.</dd>
 <dd>Enrolment form.</dd>
 <dd>Photographic ID.</dd>
 <dd>Passport photographs.</dd>
 <dd>Fees OR Financial Assessment Form from Education and Library Board or a similar grant awarding body.</dd>
 
 </dl>
 
 </div>
 
 <div class="en">
   Proceed to the <span class="emph">SUBJECT DESKS</span> of your chosen <span class="emph">SINGLE</span> or <span class="emph">COMBINED</span> programme.
 </div>
 
  <div class="en1">
 Visit the other tables of subjects that might interest you and find out more from the members of staff concerned.</div>
 
 <div class="en">
 When you have chosen 6 MODULES (or a total of 120 credit points) the, COURSE DIRECTOR will check your modules, sign and date enrolment form.</div>
 
  <div class="en1">
    <h4>FACULTY DESK</h4>
 
      Faculty staff will check ID, take one passport photograph, stamp and date enrolment form. You will then be allocated an ADVISER OF STUDY.  </div>
 
  <div class="en">
<h4>ONLINE ENROLMENT (DO THIS AT THE BEGINNING OF EACH ACADEMIC YEAR)</h4>
 Proceed to the LRC (Learning Resource Centre) aka Library, check all personal details and modules are correct and log on.
 
 If details are incorrect (particularly your PROGRAMME CODE, please refer to a member of Registry staff BEFORE online enrolment.</div>
 
 <div class="en1">
 <h4>FINCANCE</h4>
 Proceed to the Diamond.
 Your enrolment form will be stamped upon receipt of payment AND/OR Financial Assessment Form from Education and Library Board or other Grant Awarding Authority.</div>
 
  <div class="en">
<h4>REGISTRY</h4>
 Remain in the Diamond to have your form checked and to collect your ID card.</div>
 
  <div class="en1">
<h4>WELCOME!</h4>
 You are now a fully registered student of the Univeristy of Ulster.
 </div>
  <p><img src="images/pdfsm.png" width="15" height="15" alt="Download Enrolment Guide PDF" />
 <img src="images/word_doc_icon.png" width="15" height="15" alt="Download Enrolment Guide WORD" /><br />
 Download</p>
 
	</li>
 
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="" class="money"><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<b class="money"></b>
<ul>
<li><h3>Grants, loans &amp; payments</h3>
	<p>
 <a href="http://prospectus.ulster.ac.uk/geninfo/tuition-fees.html">Tuition Fees</a><br />
 <a href="http://prospectus.ulster.ac.uk/geninfo/grants.html">Grants</a><br />
 <a href="http://prospectus.ulster.ac.uk/geninfo/uu-bursaries.html">Bursaries</a><br />
 <a href="http://prospectus.ulster.ac.uk/geninfo/scholarships.html">Scholarships</a><br />
 </p>
 
	</li>
 
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="" class="international"><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<b class="international"></b>
<ul>
<li><h3>International Students</h3>
	<a href="http://international.ulster.ac.uk/" target="_blank"><img src="images/intl.png" alt="Link to International Students site" width="90" height="99" align="left" class="stdpad"/></a>
 
 <p>For information on studying at Ulster as an international student, please log on to <a href="http://international.ulster.ac.uk/" target="_blank">http://international.ulster.ac.uk</a> Here you can find testimonials from other international students, informaiton on fees specific to your country of origin and tips on what to expect from living and learning in Northern Ireland.</p>
 
 <p>Take this opportunity to inform yourself how best to enjoy your stay and your own personal quest for excellence.</p>
 
	</li>
 
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="life.php" class="life"><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<b class="life"></b>
<ul>
<li><h3>Life @ Ulster</h3>
	<p>If you're interested in studying one or more of our subjects, there are a few things that you may need to know to get the process rolling:
 </p>
 
 <p>We would recommend that you check out our prospectus for information on the TARIFF (UCAS) POINTS required for each course. <a href="http://prospectus.ulster.ac.uk" target="_blank">These are available online</a> if you do not have a print version.</p>
 
	</li>
 
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

CSS:

#wraptab {width:572px; position:relative; height:800px; margin:21px 12px; padding:0px 30px; }
#wraptab p {margin-left:0;}
 
#flyout {padding:0; margin:0; list-style:none; width:30px; height:600px; position:absolute; left:0px;}
#flyout ul {padding:0; margin:0; list-style:none;}
#flyout li {display:block; width:30px; height:120px; }
#flyout li a {display:block; width:30px; height:450px; text-indent:-999px; text-decoration:none;}
#flyout li a.inter {position:relative; background:url(../images/inter.png); top:47px; width:30px; height:107px; z-index:6;}
#flyout li a:hover.inter {position:relative; background:url(../images/interover.png); top:47px; width:30px; height:107px; z-index:6;}
#flyout li a.degree {position:relative; background:url(../images/degree.png); width:30px; height:204px; margin-top:-74px; z-index:5;}
#flyout li a:hover.degree {position:relative; background:url(../images/degreeover.png); width:30px; height:204px; margin-top:-74px; z-index:5;}
#flyout li a.enroll {position:relative; background:url(../images/enroll.png); width:30px; height:305px; margin-top:-196px; z-index:4;}
#flyout li a:hover.enroll {position:relative; background:url(../images/enrollover.png); width:30px; height:305px; margin-top:-196px; z-index:4;}
#flyout li a.money {position:relative; background:url(../images/money.png); top:-31px; width:30px; height:116px; z-index:3;}
#flyout li a:hover.money {position:relative; background:url(../images/moneyover.png); top:-20px; width:30px; height:107px; z-index:3;}
#flyout li a.international {position:relative; background:url(../images/international.png); width:30px; height:204px; margin-top:-141px; z-index:2;}
#flyout li a:hover.international {position:relative; background:url(../images/internationalover.png); width:30px; height:204px; margin-top:-141px; z-index:2;}
#flyout li a.life {position:relative; background:url(../images/life.png); width:30px; height:305px; margin-top:-262px; z-index:1;}
#flyout li a:hover.life {position:relative; background:url(../images/lifeover.png); width:600px; height:305px; margin-top:-262px; z-index:1;}
 
#flyout table {
	position:absolute;
	border-collapse:collapse;
	top:0;
	left:0;
	z-index:100;
}
#flyout li {float:left; margin-bottom:1px;}
#flyout li ul {visibility:hidden; position:absolute; top:0; left:24px; width:572px; height:607px;}
#flyout li ul li {display:block; display:inline; width:572px; height:22px; border:0; margin:0 10px;}
#flyout li ul li a {text-indent:0; display:inline; width:500px; height:22px;  text-decoration:none;}
#img { border:none; outline:none; }
#flyout li b.inter { display:block; width:588px; height:800px; position:absolute; top:-5px; left:30px; background:#133741; -moz-border-radius: 1.2em 0em;	-webkit-border-top-left-radius: 1.2em;	-webkit-border-bottom-right-radius: 1.2em;	border-radius: 1.2em 0em;}
#flyout li b.degree {visibility:hidden; display:block; width:588px; height:800px; position:absolute; top:-5px; left:30px; background:#184754; -moz-border-radius: 1.2em 0em;	-webkit-border-top-left-radius: 1.2em;	-webkit-border-bottom-right-radius: 1.2em;	border-radius: 1.2em 0em;}
#flyout li b.enroll {visibility:hidden; display:block; width:588px; height:800px; position:absolute; top:-5px; left:30px; background:#186277; -moz-border-radius: 1.2em 0em;	-webkit-border-top-left-radius: 1.2em;	-webkit-border-bottom-right-radius: 1.2em;	border-radius: 1.2em 0em; }
#flyout li b.money {visibility:hidden; display:block; width:588px; height:645px; position:absolute; top:-5px; left:30px; background:#bd6926; -moz-border-radius: 1.2em 0em;	-webkit-border-top-left-radius: 1.2em;	-webkit-border-bottom-right-radius: 1.2em;	border-radius: 1.2em 0em;}
#flyout li b.international {visibility:hidden; display:block; width:588px; height:645px; position:absolute; top:-5px; left:30px; background:#664830; -moz-border-radius: 1.2em 0em;	-webkit-border-top-left-radius: 1.2em;	-webkit-border-bottom-right-radius: 1.2em;	border-radius: 1.2em 0em;}
#flyout li b.life {visibility:hidden; display:block; width:588px; height:645px; position:absolute; top:-5px; left:30px; background:#663333; -moz-border-radius: 1.2em 0em;	-webkit-border-top-left-radius: 1.2em;	-webkit-border-bottom-right-radius: 1.2em;	border-radius: 1.2em 0em; }
#flyout li:hover.inter {position:relative;}
#flyout li:hover.degree {position:relative;}
#flyout li:hover.enroll {position:relative;}
#flyout li:hover.money {position:relative;}
#flyout li:hover.international {position:relative;}
#flyout li:hover.life {position:relative;}
#flyout li:hover b,
#flyout li a:hover b {
visibility:visible;
}
#flyout li:hover ul,
#flyout li a:hover ul {
visibility:visible;
}
 
#points{ margin-top:150px; margin-left:145px;
}
#pointsmain dd{ padding-left:20px; padding-bottom:2px;  background:url(../images/bullet.png) 5px 5px no-repeat; padding-right:10px; padding-top:2px;}
#points td{ vertical-align:top;}