Bullet List Accordion menuheader width

[Kaptin]

1) Script Title: Bullet List Accordion menuheader width

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...enu-bullet.htm

3) Describe problem: Hello again ! I need your help once again with thw width of a menu (the nested bullet List Accordion). I already posted a thread about the glossy accordion (i had problem with the width), but I found on another post that I would not be able to do multi level with the glossy model, so I changed for the Bullet.
Again, I have problem with the width, but only the part where there are the red/black menu header. Everything else is fine. I removed the width from :

.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}

from the css stylesheet, but the menu header still is a problem.

Heres a printscreen (i cannot post the URL since it's in an Intranet):


Did I, again, do something wrong?

Thank you

Have a nice day.

[jscheuer1]

Same deal here again, in developer tools, if I delete the width, the menu, including the headers with the red and the dark gray background images, fills the width of the parent. Last time you had a parent that was narrow and you got the menu outside of that parent, I think by removing it. In this case, that may or may not be harder to do, and/or there could possibly be another problem or problems, because I see that the sub-menu items are wide, and this wasn't the case before. Perhaps you added a style to the header classes (.menuheader and/or .expandable), like, maybe display: inline; or display: inline-block;, etc., causing that. Or it could be browser specific. What browser are you using?

I can't really be much more specific without seeing the page.

I know you are doing this on an intranet and that makes it hard for you to publish an example. But if you really need more help, you could make a copy of the page and its assets, and put those up live somewhere to demonstrate the issue. You could change link names and text to "protect the innocent", and still show us what it actually looks like as far as layout goes.

In fact, if you're still stumped, just the mere act of trying to duplicate the issue in this fashion may cause the light bulb to turn on and thereby solve the problem.

[Kaptin]

Hi again,

unfortunately, I see no parents problem this time and there seems to be no header class problem.
I tried to modify some of them, but it doens't seem to work.

I can give you the link to the page : http://intraedition/vpaf-ti-normasys...es&Titre=Choix d'une solution d'affaires&Survol=survol-sa.htm

but since I'm working for the Government here (I am not working on confidential content), you might not be able to see it.
We only use IE as browser, because all the links won't work on another broswer.

If the link doens't work, heres the code i ahve in Visual Studio (but it's only one part of the page with the accordion) :

<%

'Ajout validation code utilisateur pour l'affichage du bouton 
 
  strUserID = Request.ServerVariables("LOGON_USER")
  strCodeIdent = Split(strUserID, "\")
  
  if Len(strCodeIdent(1)) > 7 then	
	bolAffichageBouton = false
  else
	bolAffichageBouton = true
  end if

'Ouverture des fichiers XML pour le bouton d'affichage
Set objXMLFichr = CreateObject("MSXML2.DOMDocument")
objXMLFichr.async = False
strCheminXML = Server.MapPath("/commun/parametres/abon-compo-excl.xml")
objXMLFichr.load(strCheminXML)
Set objXMLExt = CreateObject("MSXML2.DOMDocument")
objXMLExt.async = False
strCheminXML = Server.MapPath("/commun/parametres/abon-types-fich-incl.xml")
objXMLExt.load(strCheminXML)

dim strURLPage

function AbnPageReprtr(strURLPage)
	
	set objXMLTopFichr = objXMLFichr.documentElement
	strURL = Left(strURLPage, InStrRev(strURLpage,"/"))
	aURL = Split(strURL,"/")
	strURL = "/"
	AbnPageReprtr =  true
	For Each l in aURL
	   If l <> "" Then
		strURL = strURL &  l & "/"
		set objcurrentNodeFichr = objXMLTopFichr.selectSingleNode("//url-commun-objet [@type-compo=""rep""] [. = """ & strURL & """]")
		if not(objcurrentNodeFichr is nothing)  then
			AbnPageReprtr =  false  'est dans le fichier d'exclusion
			exit for
		else
			AbnPageReprtr =  true
		end if
	end if		
	Next 
	if AbnPageReprtr  then
		set objcurrentNodeFichr = objXMLTopFichr.selectSingleNode("//url-commun-objet [@type-compo=""page""] [. = """ & strURLPage &"""]")
		if objcurrentNodeFichr is nothing then
			AbnPageReprtr =  true  'n'est pas dans le fichier d'exclusion
		else
			AbnPageReprtr = false  'est dans le fichier d'exclusion
		end if
	end if
	set objXMLTopFichr = nothing
	set objcurrentNodeFichr = nothing
end function


Function AbnExtension(strURLPage)

	intLongueur = Len(strURLPage)	
	if  Right(strURLPage, 1) <>  "/" then
		intPosition =  InStrRev(strURLPage, ".")
		if intPosition <> 0 then
			strExtension = mid(strURLPage, intPosition+1, Len(strURLPage))
			set objXMLTopExt      = objXMLExt.documentElement
			set objcurrentNodeExt = objXMLTopExt.selectSingleNode("//extension-fichier [. = '" & LCase(strExtension) & "']")
			if objcurrentNodeExt is nothing  then
				AbnExtension = false 'n'est pas dans le fichier d'extension
			else
				AbnExtension =  true 'est dans le fichier d'extension
			end if
		else
			AbnExtension = false
		end if
	else
		AbnExtension = true
	end if
	set objXMLTopExt = nothing
	set objcurrentNodeExt = nothing
end function

That's part 1, part 2 will be on another post





The problem is that the element in the accordion are dynamics and they changed depending on the button we press in the previous page.

So i had to work with a page that already exists to put the multi-level accordion in it, so all the code is not mine, it was there before me.

Thanks for you help, it is very appreciated. I'm still searching for the problem on my side.
If you want the code from my page (with the asp adn the java and the html) just tell me and i'll post it.

Have a nice day !

[Kaptin]

part 2

if Request.QueryString("Critere") <> "" then  
	'on error resume next
    
	'Création du recordset de résultat
	'set g_rsResultat = g_oQuery.CreateRecordSet("sequential")

	'Gestion des erreurs générées par Copernic à la création du Recordset
	if err.number <> 0 or Query.exception <> 1 then%>
	 	<table border="0">
					<tr>
						<td>
							<div class="TexteNormal">
      
		<%If Query.exception <> 1 Then%>
        
							<p><b>La requête n'est pas valide.</b></p>
							<p>Essayez à nouveau.  Si le problème persiste, soulevez le problème au SSPOC.</p>
        
		<%elseIf err.number <> 0 Then%>
      
							<p><b>Une erreur est survenue sur le serveur.</b></p>
							<p><b>No. Erreur :</b> <%Response.write err.number%><br>
							<b>Description :</b> <%Response.write err.description%><br>
							<b>Requete :</b> <%=g_strQuery%><br>
							<b>Colonnes :</b> <%=g_oQuery.Columns%></p>
							<p>Essayez une autre requête.  Si le problème persiste, soulevez le problème au SSPOC.</p>
        
		<%end If%>

							</div>
						</td></tr></table>

	<%else	'Aucune erreur lors du CreateRecordset
		on error goto 0
	end if  'err.number <> 0 %>
	
	<table border="0">
	
	<%if err.number = 0 And Query.Exception = 1 then  'Aucune erreur lors du CreateRecordset

		dim strImgTypeDoc	'Contient le nom de l'image correspondant au type de document
		dim strCategDocPrec	'Contient la catégorie du document précédent
		
		strCategDocPrec = "" %>
		

		<%if g_strSurvol <> "" then
			if instr(1, g_strSurvol, ".htm") or instr(1, g_strSurvol, ".html") or instr(1, g_strSurvol, ".asp") then
				strImgTypeDoc = "/commun/images/html.gif"

			elseif instr(1, g_strSurvol, ".doc") then
				strImgTypeDoc = "/commun/images/word.gif"

			elseif instr(1, g_strSurvol, ".xsl") then
				strImgTypeDoc = "/commun/images/excel.gif"

			elseif instr(1, g_strSurvol, ".ppt") then
				strImgTypeDoc = "/commun/images/ppt.gif"

			elseif instr(1, g_strSurvol, ".pdf") then
				strImgTypeDoc = "/commun/images/pdf.gif"
			
			elseif instr(1, g_strSurvol, ".zip") then
				strImgTypeDoc = "/commun/images/zip.gif"

			else
				strImgTypeDoc = "/commun/images/Type_inconnu.gif"
			end if	%>
					
						<a href="<%=g_strSurvol%>" target="_self" class="TexteNormal"><img border="0" src="<%=strImgTypeDoc%>" align="top" alt="Survol" hspace="2" width="16" height="16">Survol</a>
		<%end if

		if Query.TotalCount > 0 then
			
			'Remplir le tableau avec les données que l'on veut trier
			dim strIndex, pos1, pos2, len2
			strIndex = 0
			redim TabDocument(10,Query.totalcount-1)
			For Each Document In Query.Results
				tabDocument(0,strIndex) = Document.fields("@CASCategorieDocDisplay")
				tabDocument(1,strIndex) = Document.fields("@persoTitle")
				tabDocument(2,strIndex) = Document.Date
				tabDocument(3,strIndex) = strIndex+1
				for ctrChampReste = 4 to 10
					tabDocument(ctrChampReste,strIndex) = "" 
				next
				strIndex = strIndex + 1 
			next
	
			'Remplir le tableau contenant les ordre de tri pour chaque colonne du tableau à trier
			Dim ctrOrdreTri, tabOrdreTri(10)
			tabOrdreTri(0) = "d"
			tabOrdreTri(1) = "a"
			tabOrdreTri(2) = "d"
			for ctrOrdreTri = 3 to 10
				tabOrdreTri(ctrOrdreTri) = "" 
			next

			'Exécuter le tri
			call TriColTab(tabDocument,tabOrdreTri)%>
			
            <!--Test 05-07-2013-->
	        <div class="arrowlistmenu">
            <!--finTest 05-07-2013-->
			<%For i = 0 to Ubound(TabDocument,2)
				strIndex = tabDocument(3,i)
				set Document = Query.Results(strIndex)
				
				'DEE02 strVPath = g_rsResultat("VPath")
				strVPath = document.fields("@PostLienWeb")
				strVPath = replace(strVPath,"'","&#39")
				strVPath = replace(strVPath,chr(34),"&#34")
				
				strSize = Round(document.FileSize/1024, 0) & "k"
					
				if instr(1,document.fields("@sysFileName"), ".zip") Then				
					DocType="doc"
					strImgTypeDoc= "/commun/images/zip.gif"				 
				elseif instr(1,document.fields("@sysFileName"),".asp") then
					strImgTypeDoc = "/commun/images/html.gif"
						
				elseif instr(1,document.fields("@sysFileName"),".doc") then
					strImgTypeDoc = "/commun/images/word.gif"

				Else					
					Select Case document.fields("@sysFileType")

					Case "html" 
					   strImgTypeDoc = "/commun/images/html.gif"  
					Case "xls"
					   strImgTypeDoc= "/commun/images/excel.gif" 
					Case "doc"
					   strImgTypeDoc= "/commun/images/word.gif" 
					Case "ppt"
					   strImgTypeDoc= "/commun/images/ppt.gif" 
					Case "pdf"
					   strImgTypeDoc= "/commun/images/pdf.gif"
					Case else
					   If InStr(document.fields("@sysFileType"), "text/plain") > 0 or InStr(document.fields("@sysFileType"), "richtext") > 0 then
					      strImgTypeDoc = "/commun/images/text.gif" 	  
					   else	
					          strImgTypeDoc= "/commun/images/Type_inconu.gif"
					   end if

					End Select 
				end if
				
				'strVPath = GetWebLink(strVPath)
				
				'Divise les documents par Catégorie (Guides, Gabarits, Exemples..)
				'*** LE RECORDSET DOIT ÊTRE TRIÉ PAR CATÉGORIE DE DOCUMENT ***
				if document.fields("@CASCategorieDocDisplay") <> strCategDocPrec then%>
					    <!--Test 08-07-2013 Si i est différent de 0, alors on referme les balises <div> et <ul> pour les sections déroulantes-->
                        <%if (i <> 0) then%>
                            </ul>
                          <%end if %>
                        <!--finTest 08-07-2013-->
                        <!--Test 05-07-2013 ***Slm la section <a>***-->
						<h4><a class="menuheader expandable"><b><%=document.fields("@CASCategorieDocDisplay")%></b></a></h4>
	                    <ul class="categoryitems">
                        <!--finTest 05-07-2013-->
	
				<%end if%>
						
						<li>
                            <span class="TexteNormal" ><a target="_self" href="<%=strVPath%>" ><img src="<%=strImgTypeDoc%>" border="0" hspace="3" WIDTH="16" HEIGHT="16" ><%=document.fields("@persotitle")%></a></span>
                            <div class="TextePetit" style="color:gray"><%=Year(document.fields("@CACDatePublication")) & "/" & Month(document.fields("@CACDatePublication")) &  "/" & Day(document.fields("@CACDatePublication"))%>&nbsp;&nbsp;<%=Unescape(strVPath)%>&nbsp;&nbsp;[<%=strSize%>]</div>
                        </li>
	
				<%strCategDocPrec = document.fields("@CASCategorieDocDisplay")			
			
			Next%>
            </div>
			
		<%else 'Aucun enregistrement dans le recordset %>
		
					<tr>
						<td colspan="2" class="TexteNormal">Aucun document trouvé en rapport avec &quot;<b><%=g_strTitre%></b>&quot;.</td></tr>	 

		<%end if  'g_rsResultat.properties("RowCount") > 0
		
	end if  'error.number = 0 %>

</table>

<%else  'Pas de critère dans le QueryString%>

					<table border="0">
					<tr>
						<td><span class="TexteNormal"><b>Paramètres manquants.</b></span></td></tr>
					<tr>
						<td><span class="TexteNormal">Cette page doit être chargée en cliquant sur un item du menu de gauche.</span></td></tr>
					</table>
					
<%end if  'Request.QueryString("Critere") <> ""%>

[jscheuer1]

That's server side asp code used to generate HTML and/or javascript to send to the browser. It's virtually useless to me. What you could do is view the page in the browser and use the browser's "View Source" to see what the browser is seeing (being served). Copy that and include it in a post or posts, or make a .zip file of the view source text and use the advanced editor to attach that to your post.

What version(s) of IE are you using? I just checked the Dynamic Drive demo page in IE 10 in its IE 8 mode, as I'm guessing IE 8 is what you're using, removing the width there works, just as I said before. I also checked its IE 9 and native IE 10 modes, all good.

Even with the "View Source" code I may not be able to figure this out, as it might be linked in styles that are to blame. Once again, if you could put up a live demo of the problem, then I would have the best chance of fixing it. This live demo need not have anything other than the menu on it, but it must include whatever is causing it to have the problem you describe.

And that's something you could try, removing any and all styles not directly used by the menu. If that fixes it, go through those styles one by one to find the one responsible.

One possibility is the DOCTYPE. If your page isn't using a standards invoking DOCTYPE, that might be the problem. But I tried quirks mode in IE and that did not prevent the headers from showing full width on the DD demo page.

[Kaptin]

Hi again,

here's the code in a file: viewsource.zip

I'm using IE 8.

I will try to remove style one by one and try to find if it could be the problem.

Thank you so much for your time, I never used javascript before (i'm still studying) so I had to learn by myself (i wasnt so hard) and having to use code that already exists is not a simple task...

Have a nice week-end.

[jscheuer1]

OK, I think I found it. Where you have (and similar):

<h4><a class="menuheader expandable"><b>Guide</b></a></h4>

That really should be just:

<h4 class="menuheader expandable">Guide</h4>

But, if that's too much of a problem to arrange, you can probably just add this to the stylesheet:

.menuheader {display: block;}

The browser cache may need to be cleared and/or the page refreshed to see changes.

[Kaptin]

Hi !

You are absolutely right ! I removed the <a> tag and the <b> tag, and now it's working perfectly !

I should have seen that way sooner, I must be blind and I apologise.

Your help was more than enough and more than precious, I should have looked more carefully.

Thank you a million times.

Best regards

Stéphanie