Support » Plugin: Squelch Tabs and Accordions Shortcodes » Internet Explorer

  • Resolved Brian_Milnes

    (@brian_milnes)


    There seems to be a compatability issue with IE (latest – 11?)

    Numbering (which works fine with Chrome) is dispalying 1. 1. 1. rather than 1. 2. 3. etc.

    Thanks if you can help

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Matt Lowe

    (@squelch)

    Hi Brian,

    I’m not sure what numbering you’re referring to. Could you please take a look through this thread: https://wordpress.org/support/topic/please-read-this-before-you-post-5/ We need to collect more information in order to be able to help you.

    Thanks,
    Matt

    Hi Matt
    Thanks for the prompt reply
    (And I did read that before posting.)
    And sorry – on consideration, I think this is a OL paragraph rendering problem rather than to do with Squelch. (I’d foprgotten how we’d created the Accordion numbering) I’ll check that now…

    Plugin Author Matt Lowe

    (@squelch)

    Glad you got it resolved.

    Hi Matt

    Sorry to have to return to this, but my developer tells me:

    “plugin problem because h2
    ol after li but plugin ol after h2
    http://prntscr.com/k2djwu
    need to move h2 under li”

    see side by side CHrome vs. Internet explorer:
    https://ind-tech.com/temp/para_numbering_side_by_side.png

    <ol>
     	
    [accordions title="<li>Quality assurance" disabled="false" active="" autoheight="false" collapsible="true"]
    	
    	[accordion title="Quality System conformance"]
    
    	The quality systems of the product manaufacturer are In accordance with the requirements of EN9133/AS/JISQ and EN/AS/JISQ 9100. 
    
    	[/accordion]
    	
    	
    	[accordion title="Quality Management Systems accreditations"]
    
    					<table class='gfield_list'>
    				<thead><tr><th>Certificate No.</th>
    				<th>Standard</th>
    				<th>Scope</th>
    				<th>Issue Date</th>
    				<th>Expiration Date</th>
    				</tr></thead>
    						<tbody>
    							[each quality_management_accreditations]
    							<tr>
    								<td><a href="{@quality_management_certificate}" target="_blank">{@certificate_no}</a></td>
    								<td>{@standard}</td>
    								<td>{@scope}</td>
    								<td>{@issue_date}</td>
    								<td>{@expiration_date}</td>
    							</tr>
    							[/each]
    						</tbody>
    			</table>
    	[/accordion]
    
    	[accordion title="NADCAP or OEM accreditations"]<table class='gfield_list'>
    			<thead><tr><th>Certificate No:</th>
    			<th>Standard(s)</th>
    			<th>Scope (Location)</th>
    			<th>Expiration date</th>
    			</tr></thead>
    				<tbody>
    					[each nadcap_oem_accreditations]
    						<tr>
    							<td><a href="{@nadcap_certificate}" target="_blank">{@certificate}</a></td>
    							<td>{@standards_for_nadcap_oem}</td>
    							<td>{@scope_for_nadcap_oem}</td>
    							<td>{@expiration_date}</td>
    						</tr>
    					[/each]
    				</tbody>
    			</table>
    	[/accordion]
    	
    [/accordions]
    
    [accordions title="<li>Qualification tests" disabled="false" active="" autoheight="false" collapsible="true"]
    
    	[accordion title="QTP Qualification Test Plan"]
    
    		{@qualification_test_programme_notes} <br />
    
    		Supporting Documents:
    
    		[if qualification_test_programme]
    			<ul>
    
    		[each qualification_test_programme]
    
    				<a href="{@ID,wp_get_attachment_url}" id="{@ID}" target="_blank"><br />{@post_title}<br /><br />{@_img}</a>
    <div class="stamp"><img src="https://asd-cert.org/wp-content/uploads/2018/01/stamp-transparent.png">
    <a href="javascript:void(0);" class="stamp-pdf stamp-btn" data-id="{@ID}">Approve this document</a></div><br />
    
    		[/each]
    
    			</ul>
    			[/if]
    	[/accordion]
    
    	[accordion title="QTR Qualification Test Reports"]
    
    		{@qualification_test_report_notes} <br />
    
    		Supporting Documents:
    
    			[if qualification_test_report]
    			<ul>
    			   [each qualification_test_report]
    
    					 <a href="{@ID,wp_get_attachment_url}" id="{@ID}" target="_blank"><br />{@post_title}<br /><br />{@_img}</a>
    <div class="stamp"><img src="https://asd-cert.org/wp-content/uploads/2018/01/stamp-transparent.png">
    <a href="javascript:void(0);" class="stamp-pdf stamp-btn" data-id="{@ID}">Approve this document</a></div><br />
    
    			   [/each]
    			</ul>
    			[/if]
    
    	[/accordion]
    
    	[accordion title="Substantiation by analogy"]
    
    		{@substantiation_by_analogy}<br />
    
    	[/accordion]
    
    [/accordions]
    
    [accordions title="<li>Qualification audit synthesis
    " disabled="false" active="" autoheight="false" collapsible="true"]
    
    	
    	[accordion title="Standards issue"]
    	{@qualification_audit_synthesis}
    	[/accordion]
    
    	[accordion title="Manufacturing process"]
    	{@manufacturing_process}
    	[/accordion]
    
    	[accordion title="Laboratory means"]
    	{@laboratory_means}
    	[/accordion]
    
    	[accordion title="Technical data management"]
    	{@technical_data_management}
    	[/accordion]
    
    	[accordion title="Particular remarks"]
    	{@particular_remarks}
    	[/accordion]
    
    [/accordions]
    
    [accordions title="<li>Comments about the design and/or specification standard" disabled="false" active="" autoheight="false" collapsible="true"]
    
    	[accordion title="Comments"]
    	{@comments_about_the_design_or_spec}<br>
    	[/accordion]
    
    	[/accordions]
    
    	[accordions title="<li>Recommendation/Reserves" disabled="false" active="" autoheight="false" collapsible="true"]
    
    	[accordion title="Recommendation/Reserves"]
    	{@recommendationreserve}
    		[if conditions_to_be_met]<br />
    		{@conditions_to_be_met}
    		[/if]
    	
    	
    	[/accordion]
    
    [/accordions]
    
    [accordions title="<li>Conclusions" disabled="false" active="" autoheight="false" collapsible="true"]
    
    	[accordion title="Conclusions"]
    	{@conclusion}<br>
    	
    	[/accordion]
    	
    [/accordions]
    	
    	
    [accordions title="<li>Manufacturing Conformity, Route & FAI documents" disabled="false" active="" autoheight="false" collapsible="true"]
    
    	[accordion title="Manufacturing Conformity Certificate(s)"]
    	
    	[if material_certificate_of_conformity]
    			<ul>
    			   [each material_certificate_of_conformity]
    
    					 <a href="{@ID,wp_get_attachment_url}" id="{@ID}" target="_blank"><br />{@post_title}<br /><br />{@_img}</a>
    <div class="stamp">
    [stamp-img]
    <a href="javascript:void(0);" class="stamp-pdf stamp-btn" data-id="{@ID}">Approve this document</a></div><br />
    
    			   [/each]
    			</ul>
    			[/if]
    	
    	
    	[/accordion]
    
    	
    	
    	[accordion title="Manufacturing Route Documents"]
    	
    	[if manufacturing_route]
    			<ul>
    			   [each manufacturing_route]
    
    					 <a href="{@ID,wp_get_attachment_url}" id="{@ID}" target="_blank"><br />{@post_title}<br /><br />{@_img}</a>
    <div class="stamp">
    [stamp-img]
    <a href="javascript:void(0);" class="stamp-pdf stamp-btn" data-id="{@ID}">Approve this document</a></div><br />
    
    			   [/each]
    			</ul>
    			[/if]
    	
    	
    	[/accordion]
    	
    	
    	[accordion title="First Article Inspection Reports"]
    	
    	[if first_article_inspection_reports]
    			<ul>
    			   [each first_article_inspection_reports]
    
    					 <a href="{@ID,wp_get_attachment_url}" id="{@ID}" target="_blank"><br />{@post_title}<br /><br />{@_img}</a>
    <div class="stamp">
    [stamp-img]
    <a href="javascript:void(0);" class="stamp-pdf stamp-btn" data-id="{@ID}">Approve this document</a></div><br />
    
    			   [/each]
    			</ul>
    			[/if]
    	
    	[/accordion]	
    	
    [/accordions]
    	
    	
    	
    [accordions title="<li>Technical Committee Recommendation (ACP005-1)" disabled="false" active="" autoheight="false" collapsible="true"]
    
    	[accordion title="Technical Committee members' approval"]
    		<table class="gfield_list" border="1" bordercolor="#A2BEE5" style="text-align: center;">
    			<tr>
    				<td width="33%">
    					[if tech_committee_approval_one]
    						<div class="stamp-block"><img src="{@tech_committee_approval_one_stamp}">
    							<span>{@tech_committee_approval_one_date,my_date}</span></div>
    					[else]
    						As authorised Technical Committee member do <br> you approve this Application ?
    					<a href="javascript:void(0);" class="stamp-acp" data-field="tech_committee_approval_one">APPROVE</a>
    					[/if]
    				</td>
    				<td width="33%">
    					[if tech_committee_approval_two]
    						<div class="stamp-block"><img src="{@tech_committee_approval_two_stamp}">
    							<span>{@tech_committee_approval_two_date,my_date}</span></div>
    					[else]
    						As authorised Technical Committee member do <br> you approve this Application ?
    					<a href="javascript:void(0);" class="stamp-acp" data-field="tech_committee_approval_two">APPROVE</a>
    					[/if]
    				</td>
    				<td width="33%">
    					[if tech_committee_approval_three]
    						<div class="stamp-block"><img src="{@tech_committee_approval_three_stamp}">
    							<span>{@tech_committee_approval_three_date,my_date}</span></div>
    					[else]
    						As authorised Technical Committee member do <br> you approve this Application ?
    					<a href="javascript:void(0);" class="stamp-acp" data-field="tech_committee_approval_three">APPROVE</a>
    					[/if]
    				</td>
    			</tr>	
    		</table>
    		[if recommendationreserve]
    			<h3 id="squelch-taas-title-0" class="squelch-taas-group-title">Recommendation - <i>{@recommendationreserve}</i></h3>
    		[/if]
    		[if recommendationreserve="Certification on condition"]
    	<h6>Condition(s):&nbsp;{@conditions_to_be_met}</h6>
    	
    	<h6>Have the Conditions above been satisfied? [if conditions_satisfied]Accepted <b style="color: #545454;">{@conditions_satisfied_user}-{@conditions_satisfied_date,my_date}</b></h6>[else]<a href="javascript:void(0);" class="conditions_satisfied" data-type="issue">Accept</a></h6>[/if]
    		[/if]
    [if tech_committee_approval_one]
    	[if tech_committee_approval_two]
    		[if tech_committee_approval_three]
    	<br /><h3 id="squelch-taas-title-0" class="squelch-taas-group-title" >Technical Focal Point's Approval to Issue Certificate:</h3> 
    			<h6>Status: &nbsp;[if tfp_permission_to_issue]
    				Approved <b style="color: #545454;">{@tfp_approve}-{@tfp_approve_date,my_date}</b></h6>
    			[else]
    			<h6>	Pending <a href="javascript:void(0);" class="tfp_approve" data-type="issue">Approve</a></h6>
    			[/if]
    		[/if]
    	[/if]
    [/if]
    	[if form_acp005-1]
    			<ul>
    			  
    					 <a href="{@form_acp005-1}" target="_blank"><br />
    				{@post_title}<br /><br />
    				{@form_acp005-1._img.thumbnail}</a><br />
    
    				
    			</ul>
    	[/if]
    	
    	
    	
    	[/accordion]
    	
    [/accordions]
     	
    </ol>
    Plugin Author Matt Lowe

    (@squelch)

    Hi Brian,

    
    [accordions title="<li>Quality assurance" …
    

    The li tag isn’t being created by my plugin, it appears to be something you are inserting into the page yourself by inserting an li tag into the title of the accordion. Not only is this not supported by the plugin, it’s not even supported by WordPress:

    https://codex.wordpress.org/Shortcode_API#HTML

    Full usage of HTML in shortcode attributes was never officially supported, and this will not be expanded in future versions.

    If nothing else it leads to extremely complex and difficult to read/maintain page content, and is an example of a leaky implementation.

    Currently the plugin does not support a method for specifying what output the plugin generates for the titles, nor a way to filter the output after the fact (beyond using WordPress’s built-in do_shortcode_tag filter: https://developer.wordpress.org/reference/hooks/do_shortcode_tag/). These would be valid feature requests. STAAS is a very old plugin that is long overdue a rewrite, and it’s something that would almost certainly just be coded up as standard within the rewrite anyhow.

    I’m not entirely sure why you’re wrapping the accordion group with an ol and then inserting an li at the accordion group level. If it’s just for numbering then I would suggest looking into CSS counters:

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

    Using that technique you would be able to number the H2s. Counters are supported from IE8 onwards.

    • This reply was modified 2 years, 2 months ago by Matt Lowe. Reason: Mistyped h2 as h3
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Internet Explorer’ is closed to new replies.