JQuery Accordion Hieght Problem

[Primalscientist]

Hi All,

I am having some problems with my jQuery Accordion. It contains a checkbox, a small image and a line of text enclosed in a paragraph tag.

The issue I am having is that I am having to set a height for the UI Accordion in order to see the icons. If I dont set a height, then the Accordion starts to fail by just showing the top line, and even then half of it is missing.

Here is my HTML:

<div class="ui-accordion" id="jQueryUIAccordion">


<h3><a href="#">My Accordion</a></h3>

<div>
    
<ul class="badList">
     
<li class="list1">

<input class="accord1" value="layer1" id="check1" type="checkbox" />
<img class="accord" src="img/blue/img1.png" width="33" height="37"></img> 
<p class="list"> Transport 1</p>

</li>
                
<li class="list2">
	
<input class="accord1" value="layer2" id="check2" type="checkbox"  />
<img class="accord2" src="img/blue/img2.png" width="33" height="37"></img>  
<p class="list"> Transport 2</p>

</li>
            
<li class="list3">
<input class="accord1" value="layer1" id="check1" type="checkbox" />
<img class="accord2" src="img/blue/img3.png" width="33" height="37"></img>  
<p class="list"> Transport 3</p>
</li>
            
<li class="list4">

<input class="accord1" value="layer1" id="check1" type="checkbox" />
<img class="accord2" src="img/blue/img4.png" width="33" height="37"></img>  
<p class="list"> Transport 4</p>

</li> 

<li class="list5">

<input class="accord1" value="layer6" id="check6" type="checkbox"  />
<img class="accord2" src="img/blue/img5.png" width="33" height="37"></img> 
<p class="list"> Transport 5</p>

</li>
            
</ul>
</div>


<script type="text/javascript">
jQuery("#jQueryUIAccordion").accordion({ 
		event: "click",
		collapsible: true,
		autoHeight: true
	});
</script>

Here is my CSS:

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
	font-size: small;
}
.ui-helper-hidden-accessible {
	position: absolute;
	left: -1e+008;
	font-size: small;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: small;
	list-style: none;
}
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix {
	height: auto;
}
.ui-helper-clearfix {
	display: block;
	width: 250px;
}
/* end clearfix */
.ui-helper-zfix {
	width: 250px;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter: Alpha(Opacity=0);
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
}



/* Component containers
----------------------------------*/
.ui-widget { font-family: Verdana, Arial, sans-serif; font-size: 1.1em; border: 2px solid #334A6F; margin: 0 20px 20px 0; background-color: #CCCCCC; }
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
	font-family: Verdana, Arial, sans-serif;
	font-size: 1em;
	
}
.ui-widget-content a {
	color: #334A6F;
	width: 250px;
	font-size: small;
}
.ui-widget-header a {
	color: #334A6F;
	width: 250px;
	font-size: small;
}

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	border: 1px solid #334A6F;
	font-weight: normal;
	width: 250px;
	font-size: small;
	background-color: #001D4B;
}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
	color: #e3e3e3;
	text-decoration: none;
	width: 250px;
	font-size: small;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
	border: 1px solid #334A6F;
	font-weight: normal;
	color: #ffffff;
	width: 250px;
	font-size: small;
	background-color: #334A6F;
}
.ui-state-hover a, .ui-state-hover a:hover {
	text-decoration: none;
	width: 250px;
	font-size: small;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
	border: 1px solid #cccccc;
	background: #ffffff;
	font-weight: normal;
	color: #FFFFFF;
	width: 250px;
	font-size: small;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
	color: #334A6F;
	width: 250px;
	font-size: small;
}

----------------------------------*/
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix {

}
.ui-accordion .ui-accordion-header-active {
	border-bottom: 0 !important;
	background-color: #F00;
}
.ui-accordion .ui-accordion-header a {
	display: block;
	font-size: 1em;
	padding: .5em .5em .5em .7em;
	width: 250px;
}
/* IE7-/Win - Fix extra vertical space in lists */
.ui-accordion a {
	zoom: 1;
}
.ui-accordion .ui-accordion-header .ui-icon {
	position: absolute;
	left: 0.5em;
	top: 50%;
	margin-top: 24px;
	background-color: #F00;
}
.ui-accordion .ui-accordion-content {
	padding: 1em 1em;
	border-top: 0;
	margin-top: 1px;
	position: relative;
	top: 1px;
	margin-bottom: 1px;
	overflow: hidden;
	display: none;
	zoom: 1;
	background-color: #F00;
	
}
.ui-accordion .ui-accordion-content-active {
	display: block;
	background-color: #CCC;
	height: 125px;
}
----------------------------------*/

ul.badList {
	  list-style-type: none;
	  padding-left:20px;
	  float: left;
}

ul.badList1 {
	  list-style-type: none;
	  padding-left:20px;
	  float: left;
	  position:absolute;
}

LI.list1 { float: left; left: 5px; top: 1px;  height: 35px;line-height: 45px; list-style-position: outside; padding-left: 20px; position: absolute; width: 200px; }
   
p.list { margin-left: 45px; margin-top: 6px; padding-bottom: 2px;}

.accord1 { top:8px; left: 4px; position: absolute;}
.accord2 { top:8px; left: 4px; position: absolute;}

img.accord  { border: 0 none; float:left; padding-right:10px; background-repeat: no-repeat; background-position: 0px 2px 0px 35px; margin-top: 2px; }
img.accord2 { border: 0 none; float:left; padding-right:10px; background-repeat: no-repeat; top: -3px; left: 20px; margin-top: 6px; }

Can anyone see where I am going wrong?
If anyone has any experience in this area please help!
I have tried amending the height from auto to a certain height but I just want the lines to show that are in that section of Accordion.
I have only shown part of the code, there are another 5 parts of the accordion that slide up and down.
When I set a height, then that height is set for all parts of the Accordion. I do not want this. I want the height to be automatic so that the slide up or slide down displays all content within that particular slide if you know what I mean?

Anyway, any help is greatly appreciated.

Daz.