CSS Treeview Arrows do not work.

wilo14
wilo14 used Ask the Experts™
on
I have a problem with my CSS Treeview. At Internet Explorer 11 the arrows left works fine. But in all other browsers (Edge, Chrome, Firefox, ...) the arrows doesn't transform.

I have extracted the problem from the project.
HTML:
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link type="text/css" rel="stylesheet" href="./obs_net.css" />
</head>
<body>
        

	<div class="webseite">
		<div class="body">
			<div class="body_mitte">
			<ol Class="tree">
				<li>
					<input type="checkbox" checked id="BP" />
					<label Class="treeview_themenbereich" For="BP">Ebene 1</label>
					<ol>
						<li>
							<input type="checkbox" checked id="BP022HF" />
							<label Class="treeview_thema" For="BP022HF">Ebene 2</label>
							<ol>
								<li>
									<div Class="treeview_themendetails_beschriftung"> Beschreibung</div><div Class="treeview_themendetails_wert">Die Beschreibung ist der Oberknüller</div>
									<div Class="treeview_themendetails_beschriftung"> Ziele</div><div Class="treeview_themendetails_wert">Ziele sind da jahaa</div>
									<div Class="treeview_themendetails_beschriftung"> Zielgruppe</div><div Class="treeview_themendetails_wert">Dieses tolle Seminar ist für alle da !!11einseinselfelf</div>
									<div Class="treeview_vedetails_header_rahmen">
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_header_erste_spalte treeview_vedetails_Ve_TerminListe_header_spalte">Termine</div>
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_Ve_OrtOrt_header_spalte"> Ort</div>
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_ve_leiter_header_spalte"> Referent</div>
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_Ve_Teilnahmegebuehr_header_spalte"> Preis</div> 
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_ve_ampel_header_spalte"> </div> 
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_ve_details_link_header_spalte"> </div> 
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_header_letzte_spalte treeview_vedetails_ve_anmelden_link_header_spalte"> </div>
									</div>
									<div Class="treeview_vedetails_rahmen">
										<div Class="treeview_vedetails treeview_vedetails_erste_spalte treeview_vedetails_Ve_TerminListe_spalte"> 26.01.2016<br />27.01.2016</div> 
										<div Class="treeview_vedetails treeview_vedetails_Ve_OrtOrt_spalte"> Innsbruck</div> 
										<div Class="treeview_vedetails treeview_vedetails_ve_leiter_spalte"> Ulrich Hielscher</div> 
										<div Class="treeview_vedetails treeview_vedetails_Ve_Teilnahmegebuehr_spalte"> 500,00 € zzgl. MwSteuer</div> 
										<div Class="treeview_vedetails treeview_vedetails_ve_ampel_spalte"> <div Class="ve_ampel_gruen" title="noch 0 freie Plätze"></div></div> 
										<div Class="treeview_vedetails treeview_vedetails_ve_details_link_spalte"> <a class="details_link" href="">Details</a></div> 
										<div Class="treeview_vedetails treeview_vedetails_letzte_spalte treeview_vedetails_ve_anmelden_link_spalte"> <a class="anmelden_link" href="">anmelden</a></div>
									</div> 
									<div Class="treeview_vedetails_rahmen">  
										<div Class="treeview_vedetails treeview_vedetails_erste_spalte treeview_vedetails_Ve_TerminListe_spalte"> 08.03.2016</div> 
										<div Class="treeview_vedetails treeview_vedetails_Ve_OrtOrt_spalte"> Dresden</div> <div Class="treeview_vedetails treeview_vedetails_ve_leiter_spalte"> Matthias Müller</div> 
										<div Class="treeview_vedetails treeview_vedetails_Ve_Teilnahmegebuehr_spalte"> </div> 
										<div Class="treeview_vedetails treeview_vedetails_ve_ampel_spalte"> <div Class="ve_ampel_gruen" title="noch 0 freie Plätze"></div></div> 
										<div Class="treeview_vedetails treeview_vedetails_ve_details_link_spalte"> <a class="details_link" href="">Details</a></div> 
										<div Class="treeview_vedetails treeview_vedetails_letzte_spalte treeview_vedetails_ve_anmelden_link_spalte"> </div>
									</div>
								</li>
							</ol>
						</li>
					</ol>
				</li>
				<li>
					<input type="checkbox" checked id="BV" />
					<label Class="treeview_themenbereich" For="BV">Ebene 1</label>
					<ol>
						<li>
							<input type="checkbox" checked id="BV009" />
							<label Class="treeview_thema" For="BV009">Ebene 2</label>
							<ol>
								<li>
									<div Class="treeview_themendetails_beschriftung"> Beschreibung</div><div Class="treeview_themendetails_wert">Die Beschreibung ist der Oberknüller</div> 
									<div Class="treeview_themendetails_beschriftung"> Ziele</div><div Class="treeview_themendetails_wert">Ziele sind da jahaa</div> 
									<div Class="treeview_themendetails_beschriftung"> Zielgruppe</div><div Class="treeview_themendetails_wert">Dieses tolle Seminar ist für alle da !!11einseinselfelf</div> 
									<div Class="treeview_vedetails_header_rahmen">  
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_header_erste_spalte treeview_vedetails_Ve_TerminListe_header_spalte"> Termine</div> 
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_Ve_OrtOrt_header_spalte"> Ort</div> 
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_ve_leiter_header_spalte"> Referent</div> 
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_Ve_Teilnahmegebuehr_header_spalte"> Preis</div> 
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_ve_ampel_header_spalte"> </div> 
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_ve_details_link_header_spalte"> </div> 
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_header_letzte_spalte treeview_vedetails_ve_anmelden_link_header_spalte"> </div>
									</div> 
									<div Class="treeview_vedetails_rahmen">  
										<div Class="treeview_vedetails treeview_vedetails_erste_spalte treeview_vedetails_Ve_TerminListe_spalte"> 07.06.2016<br />08.06.2016</div> 
										<div Class="treeview_vedetails treeview_vedetails_Ve_OrtOrt_spalte"> Weiterstadt</div> 
										<div Class="treeview_vedetails treeview_vedetails_ve_leiter_spalte"> Mathias Paul</div> 
										<div Class="treeview_vedetails treeview_vedetails_Ve_Teilnahmegebuehr_spalte"> </div> 
										<div Class="treeview_vedetails treeview_vedetails_ve_ampel_spalte"> <div Class="ve_ampel_gruen" title="noch 0 freie Plätze"></div></div> 
										<div Class="treeview_vedetails treeview_vedetails_ve_details_link_spalte"> <a class="details_link" href="">Details</a></div> 
										<div Class="treeview_vedetails treeview_vedetails_letzte_spalte treeview_vedetails_ve_anmelden_link_spalte"> <a class="anmelden_link" href="">anmelden</a></div>
									</div>
								</li>
							</ol>
						</li>
						<li>
							<input type="checkbox" checked id="BV026" />
							<label Class="treeview_thema" For="BV026">Ebene 2</label>
							<ol>
								<li>
									<div Class="treeview_themendetails_beschriftung"> Beschreibung</div><div Class="treeview_themendetails_wert">Die Beschreibung ist der Oberknüller</div> 
									<div Class="treeview_themendetails_beschriftung"> Ziele</div><div Class="treeview_themendetails_wert">Ziele sind da jahaa</div> 
									<div Class="treeview_themendetails_beschriftung"> Zielgruppe</div><div Class="treeview_themendetails_wert">Dieses tolle Seminar ist für alle da !!11einseinselfelf</div> 
									<div Class="treeview_vedetails_header_rahmen">  
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_header_erste_spalte treeview_vedetails_Ve_TerminListe_header_spalte"> Termine</div> 
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_Ve_OrtOrt_header_spalte"> Ort</div> 
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_ve_leiter_header_spalte"> Referent</div> 
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_Ve_Teilnahmegebuehr_header_spalte"> Preis</div> 
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_ve_ampel_header_spalte"> </div> 
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_ve_details_link_header_spalte"> </div> 
										<div Class="treeview_vedetails_header_spalte treeview_vedetails_header_letzte_spalte treeview_vedetails_ve_anmelden_link_header_spalte"> </div>
									</div> 
									<div Class="treeview_vedetails_rahmen">  
										<div Class="treeview_vedetails treeview_vedetails_erste_spalte treeview_vedetails_Ve_TerminListe_spalte"> 14.03.2016</div> 
										<div Class="treeview_vedetails treeview_vedetails_Ve_OrtOrt_spalte"> Bremen</div> 
										<div Class="treeview_vedetails treeview_vedetails_ve_leiter_spalte"> Bernd Sehnert</div> 
										<div Class="treeview_vedetails treeview_vedetails_Ve_Teilnahmegebuehr_spalte"> </div> 
										<div Class="treeview_vedetails treeview_vedetails_ve_ampel_spalte"> <div Class="ve_ampel_gruen" title="noch 0 freie Plätze"></div></div> 
										<div Class="treeview_vedetails treeview_vedetails_ve_details_link_spalte"> <a class="details_link" href="">Details</a></div> 
										<div Class="treeview_vedetails treeview_vedetails_letzte_spalte treeview_vedetails_ve_anmelden_link_spalte"> <a class="anmelden_link" href="">anmelden</a></div>
									</div> 
									<div Class="treeview_vedetails_rahmen">  
										<div Class="treeview_vedetails treeview_vedetails_erste_spalte treeview_vedetails_Ve_TerminListe_spalte"> 05.09.2016</div> 
										<div Class="treeview_vedetails treeview_vedetails_Ve_OrtOrt_spalte"> Bremen</div> 
										<div Class="treeview_vedetails treeview_vedetails_ve_leiter_spalte"> Bernd Sehnert</div> 
										<div Class="treeview_vedetails treeview_vedetails_Ve_Teilnahmegebuehr_spalte"> </div> 
										<div Class="treeview_vedetails treeview_vedetails_ve_ampel_spalte"> <div Class="ve_ampel_gruen" title="noch 0 freie Plätze"></div></div> 
										<div Class="treeview_vedetails treeview_vedetails_ve_details_link_spalte"> <a class="details_link" href="">Details</a></div> 
										<div Class="treeview_vedetails treeview_vedetails_letzte_spalte treeview_vedetails_ve_anmelden_link_spalte"> </div>
									</div>
								</li>
							</ol>
						</li>
					</ol>
				</li>
			</ol>

			</div>
		</div>
	</div>
    
</body>
</html>

Open in new window


CSS:
/* CSS Tree menu styles */
ol.tree {
    padding: 0 0 0 20px;
    width: 97%;
}

li {
    position: relative;
    list-style: none;
}

    li input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        width: 16px;
    }

        li input +label+ ol > li {
            display: none;
        }

        li input + label::before {
            content: "\25B7";
            color:grey;
            margin-left: -15px;
            margin-right: 15px;
        }

        li input:checked + label::before {
            content: "\25B7";
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            margin-left: -15px;
            margin-right: 15px;
        }        
        
        li input:checked +label + ol > li {
            display: block;
        }

            li input:checked + label + ol > li:last-child {
                margin-bottom: 15px;
            }

    li label {
        cursor: pointer;
        display: block;
    }
	
	
.treeview_themenbereich {
    background-color: #172E74;
    color: #FFFFFF;
    text-align: left;
    cursor: pointer;
    vertical-align: middle;
    padding-left: 30px;
    font-size: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #CCCCCC;
}

.treeview_thema {
    background-color: #F8F8F8;
    color: #172E74;
    text-align: left;
    cursor: pointer;
    padding-left: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #CCCCCC;
}

.treeview_themendetails_beschriftung {
    font-weight: bold;
    margin-top: 10px;
    margin-left: 7px;
    margin-bottom: 10px;
}

.treeview_themendetails_wert {
    margin-left: 7px;
}

.treeview_vedetails_rahmen, .treeview_vedetails_header_rahmen {
    display: table;
}

.treeview_vedetails_rahmen {
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    height: auto;
    width: 98%;
}

.treeview_vedetails_header_rahmen {
    border: 1px solid #CCCCCC;
    width: 98%;
    float: left;
    clear: both;
    color: #172E74;
    font-size: 16px;
    font-family: 'Open Sans';
    font-weight: bold;
    background-color: #EFEFEF;
    height: 30px;
    margin-top: 20px;
}

.treeview_vedetails_header_spalte {
    float: left;
    width: 120px;
    margin: 7px;
    font-weight: bold;
}

.treeview_vedetails_header_letzte_spalte {
    clear: right;
}

.treeview_vedetails {
    float: left;
    width: 120px;
    margin: 7px;
}

.treeview_vedetails_erste_spalte {
    clear: left;
}

.treeview_vedetails_letzte_spalte {
    clear: right;
}

.treeview_vedetails_ve_ampel_spalte {
    width: 50px;
}

.treeview_vedetails_ve_details_link_spalte {
    width: 80px;
}

.treeview_vedetails_ve_anmelden_link_spalte {
    width: 100px;
}

.treeview_vedetails_ve_details_link_spalte, .treeview_vedetails_ve_anmelden_link_spalte {
    padding-top: 8px;
    padding-bottom: 8px;
}

.treeview_vedetails_ve_details_link_header_spalte, .treeview_vedetails_ve_anmelden_link_header_spalte,
.treeview_vedetails_ve_ampel_header_spalte {
    display: none;
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Add display: inline-block; to your li input:checked + label::before style
li input:checked + label::before {
	content: "\25B7";
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	margin-left: -15px;
	margin-right: 15px;
	display: inline-block; /* ADD THIS */
}        

Open in new window

Author

Commented:
Thank you very much. The Solution works fine.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial