CSS-probleem: gouden tip wordt beloond

gast2012 · 02-01-2010, 15:34

Hoi allemaal,

Ik ben op dit moment bezig met een website, zie http://ontwikkeling.tipict.nl.

Onder het kopje 'Cursusmateriaal downloaden' heb ik een dropdownscript van een website gekopieerd (waarvan het mag) en aangepast naar eigen wensen. Dit ziet er in verschillende browsers goed uit, behalve op IE bij sommige computers. Bij IE op mijn en mijn broer zijn computer doet hij het wel goed, bij IE op de computer van een paar vrienden en familieleden niet.

Op de computers waar het fout gaat zie je het zoals in de bijlage. En zo moet het wel. Ik heb een tijdje lopen puzzelen maar kom er gewoon niet uit. Vind het ook een beetje zonde om alles opnieuw te moeten scripten terwijl ik denk dat dit niet nodig is.

Ik kan het niet goed op mijn eigen computer testen dus word er langzamerhand een beetje moedeloos van.

De betreffende code van het dropdownmenu staat in http://ontwikkeling.tipict.nl/ext/index.css
Verder gebruikt deze pagina ook opmaak vanuit http://ontwikkeling.tipict.nl/ext/algemeen.css.

Het menu gebruikt nog wat javascript, maar daar ligt het voor zover ik weet niet aan. Dat is deze:
http://ontwikkeling.tipict.nl/ext/etc.js

Verder de source van het relevante stuk:

Code:

<div class="kleinvak"> 
<h3>Cursusmateriaal downloaden</h3> 
<p>Download direct uw pakket cursusmateriaal. <a href="/" title="Cursusmateriaal is alleen beschikbaar voor cursisten. Als u geen inloggegevens heeft, neem dan contact op met uw instructeur. U kunt ons ook een bericht sturen via ons contactformulier.">Geen inloggegevens?</a></p> 
 
<ul id="nav"> 
 
	<li class="kies"><span>Kies uw categorie</span> 
		<ul> 
			<li>Bedrijfsveiligheid 
				<ul class="veilig">               
					<li><a href="#">Bedrijfshulpverlening</a></li> 
					<li><a href="#">Preventiemedewerker</a></li> 
					<li><a href="#">BHV (basisopleiding)</a></li> 
					<li><a href="#">BHV (herhaling)</a></li> 
					<li><a href="#">BHV (ploegleider)</a></li> 
					<li><a href="#">BHV (hoofd)</a></li> 
					<li><a href="#">VCA</a></li> 
					<li><a href="#">Communicatie</a></li> 
					<li><a href="#">Ontruimingsoefeningen</a></li> 
                    <li><a href="#">BHV (audit)</a></li> 
				</ul> 
			</li> 
			<li>Eerste Hulp
				<ul class="ehbo"> 
					<li><a href="#">Eerste Hulp (basis)</a></li> 
					<li><a href="#">Eerste Hulp (herhaling)</a></li> 
					<li><a href="#">Eerste Hulp (kinderen)</a></li> 
					<li><a href="#">Eerste Hulp (sportongevallen)</a></li> 
					<li><a href="#">Eerste Hulp (wandelletsel)</a></li> 
					<li><a href="#">Reanimatie</a></li> 
					<li><a href="#">AED-trainingen</a></li>       
				</ul> 
			<li>Luchtvaart
				<ul class="luchtvaart"> 
					<li><a href="#">First Aid Initial</a></li> 
					<li><a href="#">First Aid Recurrent</a></li> 
					<li><a href="#">First Aid Conversion</a></li> 
					<li><a href="#">Fire Drill</a></li> 
				</ul> 
			</li> 
			</li> 
		</ul> <!--kies uw cursus -->  
	</li> 
</ul> 
 
</div>  <!--kleinvak -->  
    </div> <!-- main-links -->

De originele code komt van netters.nl. Zie http://netters.nl/examples/arjan/suc...oorbeeld2.html.

De gouden tip wordt gegarandeerd beloond met 15€ ( excl btw als je een factuur kan maken)

**Job van S.** · 02-01-2010, 15:52

Het is misschien ook wel anders op te lossen, maar ik zou even aparte css voor Internet Explorer 7 gebruiken.
Maak een bestand ext/ie7.css met daarin deze code:

Code:

#nav li ul { margin: 5px 0 0 -11px; }
#nav li ul ul.veilig { margin: -66px 0 0 140px; }
#nav li ul ul.ehbo { margin: -43px 0 0 140px; }
#nav li ul ul.luchtvaart { margin: -43px 0 0 140px; }

En gebruik die in je html op deze manier, zodat hij alleen door Internet explorer gelezen wordt:

Code:

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ext/ie7.css" /><![endif]-->

Pas dan de margins in ie7.css zo aan totdat het wel goed gaat.

**René Vennik** · 02-01-2010, 16:58

Dat stuk javascript kun je wel weg gooien.
Dat is namelijk alleen nodig voor IE6.

IE7 accepteerd li:hover wel.

gast2012 · 02-01-2010, 18:16

Bedankt voor de tip. Ik wil toch graag compabiliteit met IE6.

Bedankt voor je moeite, maar ik vraag me zo af waarom IE(7) de marges anders leest. Ik zoek eigenlijk een oplossing zonder dat ik IE7 dingen anders laat uitlezen, want in de originele code is dat ook niet nodig.

Indien mogelijk natuurlijk..

**René Vennik** · 02-01-2010, 18:25

Origineel gepost door gast2012

Bedankt voor de tip. Ik wil toch graag compabiliteit met IE6.

Bedankt voor je moeite, maar ik vraag me zo af waarom IE(7) de marges anders leest. Ik zoek eigenlijk een oplossing zonder dat ik IE7 dingen anders laat uitlezen, want in de originele code is dat ook niet nodig.

Indien mogelijk natuurlijk..

Dan weet je waarschijnlijk niet hoe je site er in in IE6 uit ziet. Dat staat namelijk schots en scheef.
Een tip misschien: download ietester dan kun je ie5.5 t/m 8 bekijken op je eigen pc.

**Lukas Van Orshoven** · 02-01-2010, 18:35

De pagina is ook niet valid.
Dit is bv. fout:

Code:

<li class="taal"><img src="img/nl.png" alt="Nederlandse website" title="Huidige taal is al Nederlands" class="nld"/></a>&nbsp;
          <a href="/"><img src="img/en.png" alt="English website" title="Change language to English"/></a></li>

voor de eerste 'img' moet er uiteraard nog een a-tag komen.

**Job van S.** · 02-01-2010, 18:40

Origineel gepost door gast2012

Bedankt voor de tip. Ik wil toch graag compabiliteit met IE6.

Bedankt voor je moeite, maar ik vraag me zo af waarom IE(7) de marges anders leest. Ik zoek eigenlijk een oplossing zonder dat ik IE7 dingen anders laat uitlezen, want in de originele code is dat ook niet nodig.

Indien mogelijk natuurlijk..

In IE6 staat het idd heel scheef allemaal.
Waarschijnlijk komt het dat hij het bij jou niet meer goed doet in IE doordat je er allerlei dingen aan hebt toegevoegd, borders, padding.
Soms is aparte code gewoon nodig, omdat IE de dingen anders doet.

**Hidde van K** · 02-01-2010, 18:41

Heb je de margins en paddings wel gereset?

Code:

* {
margin: 0;
padding: 0;
}

Helemaal aan het begin van je stylesheet.

gast2012 · 02-01-2010, 19:37

Bedankt voor al jullie reacties.
Hidde, jij ook bedankt, maar het resetten van alle paddings/margins heeft helaas geen effect.
IEtester werkt niet op mijn PC, erg rot. Heb nu even een laptop erbij gepakt en zie nu inderdaad dat het probleem structureel in IE7 zit.

Was er eigenlijk dan ook niet van op de hoogte dat de website zo schots en scheef staat in IE6.
Dit wetende ga ik de tip van Job van S. toepassen. Laat nog even weten of dit uiteindelijk het probleem oplost; denk het wel.

En IE6 compability.. Daar ga ik later nog maar aandacht aan besteden op dezelfde manier.

**gast2960** · 02-01-2010, 19:59

Heb een aantal tests gedaan, en een aantal dingen aan de code veranderd.

in index.css, verander het onderste deel in:

Code:

#nav{
	font-size: 0.75em;
	z-index: 999999999;
}

#nav li {
	position:relative;
	line-height:22px;
}


#nav li.kies{
	margin: 7px 0 0 20px;
	padding: 0 0 0 10px;
	background: url(../img/pijl.png) 137px 1px no-repeat;
	border: 1px solid #ccc;
	width: 150px;
	line-height:26px;
}
 
#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
}
 
#nav a {
	display: block;
	width: 100%;
	text-decoration: none;
	color: #014f96;
}

#nav li ul li{ /** categorie LI **/
	width: 140px;
	padding: 0 0 0 20px;
	background: url(../img/cursistbg.png) repeat-x;
	border-bottom: 1px solid #ccc;
	cursor: default;
}

#nav li ul li ul li{ /** cursussen **/
	padding: 0 0 0 10px;
	background: #fff;
	z-index: 99999;
	cursor: pointer;
}
 
#nav li ul { /** categorie UL EN cursus UL**/
	margin: 5px 0 0 -11px;
	position: absolute;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul li:hover{
	background: url(../img/cursistpijl.png) 147px 5px no-repeat #fff;
}

#nav li ul ul li:hover{
	font-weight: bold;
	background: #fff;
}

#nav li ul ul.veilig {margin: -68px 0 0 140px;}
#nav li ul li ul.veilig li{width: 150px;}
#nav li ul ul.ehbo {margin: -45px 0 0 140px;}
#nav li ul li ul.ehbo li{width: 190px;}
#nav li ul ul.luchtvaart {margin: -43px 0 0 140px;}
#nav li ul li ul.luchtvaart li{width: 135px;}
 
#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul {
	left:10px;
	top:21px;
}
 
#nav li li:hover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
	left:20px;
}

Waarschijnlijk werkt het dan. Bij mij in elk geval wel:
www.gijsbertsimon.nl/test/ (nadat het probleem is verholpen wordt deze pagina verwijderd)

Een correctie in de html. Er staat een </li> te vaak afgesloten;
om precies te zijn, de afsluitende </li> voor </ul>  moet weg.

Wat precies deze fout heeft veroorzaakt weet ik niet. Wel weet ik dat werken met -em-
inplaats van met -px- vaak voor problemen zorgt als het gaat om crossbrowser werken.
De left:auto; heb ik weggehaald, auto (automatisch) kon de browser niet verwerken schijnbaar,
door die een vast breedte te geven kan de browser er veel meer mee.

Gr. Gijsbert

gast2012 · 02-01-2010, 22:45

Gijsbert, bedankt voor je reactie.
Ik ga er even naar kijken en laat morgen meer weten.

Aanvullend bericht:
Gijsbert, mijn dank is groot! Hulde. Dit is de gouden tip die ik bedoelde, het probleem is opgelost.
Ik heb je een PM gestuurd over de beloning.

Iedereen die verder een bijdrage heeft gedaan: ook bedankt :)
Hier mag wat mij betreft een slotje op.

CSS-probleem: gouden tip wordt beloond