Accordion Error

HTML & CSS
1

Hi

I have an accordion on my website whih works ok but not perfect

See Here: http://www.togganet.co.uk/huddersfield-and-district.html down the page to the left hand side named Tables/Fixtures/Results

1 - My accordion is 3 tabs. When I click the furthest right one it moves below the rest and doesn’t come back. How do I stop this?

2 - Between my league tables is a huge gap, how do I change this (each league table is a separate div). How do I remove this huge gap?

Example HTML:

 <div id="accordion2">
    <ul>
        <li>
            <h1>Fixtures</h1>
            <div>
                <span>

         <h4>Premier Division</h4>

<p>	
<div id="lrep195196557" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=403288927">click here for Division One</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
<script language="javascript" type="text/javascript">
var lrcode = '195196557'
</script>
<script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
</p>		

       <h4>Division 1</h4>

<p>	
<div id="lrep195196557" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=403288927">click here for Division One</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
<script language="javascript" type="text/javascript">
var lrcode = '195196557'
</script>
<script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
</p>
	
		
                </span>
            </div>
        </li>
        <li>
            <h1>Tables</h1>
            <div>
                                <span>

         <h4>Premier Division</h4>
		
<div id="lrep716502288" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=481650819">click here for Premier Division</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
<script language="javascript" type="text/javascript">
var lrcode = '716502288'
</script>
<script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>		

       <h4>Division 1</h4>
		
<div id="lrep313940496" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=403288927">click here for Division One</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
<script language="javascript" type="text/javascript">
var lrcode = '313940496'
</script>
<script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>

		
                </span>
            </div>
        </li>
        <li>
            <h1>Results</h1>
                            <span>

         <h4>Premier Division</h4>
		
<div id="lrep245446854" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=481650819">click here for Premier Division</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
<script language="javascript" type="text/javascript">
var lrcode = '245446854'
</script>
<script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>		

       <h4>Division 1</h4>
		
<div id="lrep737249595" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=403288927">click here for Division One</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
<script language="javascript" type="text/javascript">
var lrcode = '737249595'
</script>
<script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
		
	
		
                </span>

CSS:

/*##VERTICAL ACCORDION##*/
.accordion-ver>ul , .accordion-hor>ul{
  margin: 0 auto;
  padding: 0;
  list-style:none;
}
.accordion-ver>ul>li {
  display:block;
  margin: 0;
  list-style:none;
  clear: left;
  position: relative;
  width: 600px;
  border-bottom:#f0f0f0 1px solid;
  background:#cccccc;
  *margin-bottom: -4px; /* IE6 e IE7 */
}
.accordion-ver>ul>li:hover {
  cursor:pointer;
}
.accordion-ver>ul>li.last {
  border: 0;
}
.accordion-ver>ul>li>h1 {
  position: absolute;
  display:block;
  float:left;
  margin: 0;
  padding: 0 0 0 10px;
  top: 0;
  left: 0;
  font-size: 15px;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration:none;
  text-transform:uppercase;
  color: #000;
}
.accordion-ver>ul>li>h1:hover {
  cursor:pointer;
}
.accordion-ver>ul>li>div {
  display:none;
  background: #666;
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
}
.accordion-ver:hover>ul>li:hover>div {
  cursor: default;
}
.accordion-ver>ul>li>div>span {
  padding:10px;
  display: block;
  text-align: left !important;
  line-height: normal;
}
.accordion-ver>ul>li>span.numericTab {
  position: absolute;
  display:block;
  top: 0;
  padding: 0 10px 0 0;
  float:right;
  margin: 0;
  right: 0;
  font-size: 15px;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration:none;
  color: #000;
  background:#cccccc;
}
.accordion-ver>ul>li>i {
  position: absolute;
  display:block;
  top: 0;
  right: 0;
  padding: 0 10px 0 0;
  float:right;
  margin: 0;
  font-size: 18px;
  text-decoration:none;
  color: #000;
}

Tiny bit of Javascript too

</div>   <!-- End of Accordion2 Div -->
    <script src="jquery-1.8.2.min.js"></script>
    <script src="jquery.accordion.js"></script>
    <script>
    $("#accordion2").awsAccordion({
    type:"horizontal",
    cssAttrsVer:{
        ulWidth:"responsive",
        liHeight:50
    },
    cssAttrsHor:{
        ulWidth:"responsive",
        liWidth:50,
        liHeight:1000
    },
    startSlide:2,
    openCloseHelper:{
        openIcon:"ok-circle",
        closeIcon:"ok-sign"
    },
    openOnebyOne:true,
    classTab:"active",
    slideOn:"click"
})
    </script>
      </section>
2

Have I rambled here:)

3

If I need to explain further I will

Would REALLY appreciate some help if anybody knows please?

4

Hi,

1 - My accordion is 3 tabs. When I click the furthest right one it moves below the rest and doesn’t come back. How do I stop this?

Well it looks like the div (lrep-blahblah) doesn’t see the bar in the way. You have position settings like left: 40px but those don’t mean anything to the browser because the div is not positioned (position: relative or position: absolute). You’ll find you can set “left” to something ginormous like 500px but it won’t move the box. But try a margin-left. That will move the box. margin-left: 45px moves the box just far enough away in my browser. I don’t know how this accordion works though so I dunno if that means you’ll have to change other margins too.

I suspect the original accordion code set positioning on those divs somewhere, if it also had the left: stuff. Also, you can see the white text part actually is on top of the div correctly, it’s just hard to see because the grey background isn’t behind it. So it’s just a matter of pushing that div away from the left.

2 - Between my league tables is a huge gap, how do I change this (each league table is a separate div). How do I remove this huge gap?

It’s actually not a gap. Give those divs with id=“lrep-blahblah” a fugly background colour and you’ll see they’re just that tall. You have an explicit height:500px set in your css… I think you can just remove that, or if you needed height somewhere, change it to min-height and set it to something smaller so your tables get closer together.

You’re also likely being hit with a lot of HTML errors, because some of the code is not nice.
Probably not causing your current problem(s) but you never know what a browser might do with invalid HTML. Don’t do this


 [b]<span>[/b]
 
         [color=lightgray]<h4>Premier Division</h4><p>	   
<div id="lrep195196557" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=403288927">click here for Division One</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
<script language="javascript" type="text/javascript">
var lrcode = '195196557'
</script><script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
</p>		 
<h4>Division 1</h4><p>	   
<div id="lrep195196557" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=403288927">click here for Division One</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
<script language="javascript" type="text/javascript">
var lrcode = '195196557'
</script>
<script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
</p>[/color]
	
                [b]</span>[/b]

spans are inline elements, which means trying to stuff a block element (like a div, p, h1, h4) inside isn’t allowed. If you need a box there, you can make it another div.

or for example here, we do know what the browser will do here: close the p and leave a little gap:


//browser sees this
[color=lightgray]<h4>Premier Division</h4>[/color]<p>	   
<div id="lrep195196557" style="width: 350px;">[color=lightgray]Data loading....<a href="blah">click here for Division One</a><br/><br/><a href="blah">FULL-TIME Home</a>[/color]</div>

//and will do this to "fix" it:
<h4>Premier Division</h4>
[color=red]<p></p>[/color]	   
<div id="lrep195196557" style="width: 350px;">Data loading....<a href="blah">click here for Division One</a><br/><br/><a href="blah">FULL-TIME Home</a></div>

This is because you can’t put blocks like divs inside p’s, so the browser tries to close the p’s first. But then the <p></p> leaves a little gap if you have margins, padding, or default line-height/font-size on your p’s.

You’re loading a script of javascript after each div. Can you just load it once at the bottom of all the divs?

I also happened to notice, maybe because I enlarge my fonts to read stuff, that the main title of the page wraps and gets lost:

<div id=“forumbanner”> <h9><a href=“blah”>CLICK HERE TO DISCUSS THIS LEAGUE ON OUR FORUM</a> </h9> </div>

The last word “forum” wraps to the next line, but the next line is covered by the boxes with the League Bio in it. It might not be wrapping for you, but there are probably as many computers that think they need to wrap that text as not. Also there is not such tag as h9, they only go up to h6. I think “Huddersfield & District Association” would be a good h1, since that seems to be the “title” of the page, and I would just use a normal p for the CLICK HERE and use CSS to make it look all big, since I wouldn’t call it a header.

I can’t see “Huddersfield” without thinking of that Maiden song “sheriff of huddersfield”, sorry :stuck_out_tongue:

5

Wow what a fantastic post! I’ll have a good read this evening when I’m back from the office

I really appreciate our time!