html list waarbij eerste item geen lay-out mee krijgt

[anoniem]

Ik heb een menu gemaakt met ul en li tags zoals hieronder staat: [code:1:c1bcec22b7] <div id="menu"> <ul> <li><a href="index.php">Home </a></li> <li><a href="nieuws.html">Nieuws </a></li> <li><a href="stand.html">Stand </a></li> <li><a href="wedstrijdschema.php">Wedstrijdprogramma </a></li> <li><a href="uitslagen.php?poule=D">Uitslagen </a></li> <li><a href="regels.html">Uitleg/regels </a></li> </ul> </div> [/code:1:c1bcec22b7] De CSS code daarbij is de volgende: [code:1:c1bcec22b7] #menu{ position:relative; top:0px; left:0px; /*height:200px;*/ width:190px; border:solid 10px #FF7F02; } #menu ul{ margin:0px; padding:5px; list-style-type:none; } #menu a{ background-color:#FFD37D; display:block; border:solid 1px #FF7F02; margin-bottom:1px; text-decoration:none; color:#000000; padding:3px 5px 3px 10px; } #menu a:hover, #menu a:focus, #menu a:active{ background-color:#EF9C00; display:block; } [/code:1:c1bcec22b7] Het probleem is nu dat in IE m'n eerste list item geen lay-out mee krijgt en de rest wel, de link werkt gewoon, maar zonder mooie kleurtjes. Hoe kan dit? Thnx! StruiS

[anoniem]

Kan je svp een linkje plaatsen, dan kunnen we wat makkelijker kijken... Ik maak namelijk gebruik van een bookmarklet in Mozilla waardoor ik het CSS direct kan aanpassen en live de resultaten zie. - Bas

[anoniem]

[url=http://www.vvmonnickendam.nl/ek2004]tada!!![/url] O enne volgens mij werkt het wel in mozilla, maar aangezien het grootste gedeelte toch IE gebruikt, is dat ook wel makkelijk

[anoniem]

Er zat een aantal foutjes in, met name in [i:90cf5f24c0]border[/i:90cf5f24c0], je gebruikt een verkeerde volgorde. Kijk eens of dit werkt:[code:1:90cf5f24c0]#menu{ position: relative; top: 0; left: 0; /*height:200px;*/ width: 190px; border: 10px solid #FF7F02; } #menu ul{ margin: 0; padding: 5px; list-style-type: none; } #menu a, #menu a:link{ background-color: #FFD37D; display: block; border: 1px solid #FF7F02; margin-bottom: 1px; text-decoration: none; color: #000; padding: 3px 5px 3px 10px; } #menu a:hover, #menu a:focus, #menu a:active{ background-color: #EF9C00; display: block; }[/code:1:90cf5f24c0]Niet getest in IE... - Bas

[anoniem]

Helaas, het heeft niet geholpen. Trouwens wel vreemd dat die border op 2 manieren werkt. Maar het werkt dus nog niet, ik kan wel een hidden li ervoor zetten, maar dat vind ik nou niet echt een goede oplossing. Hoop dat iemand anders misschien nog een idee heeft.

[anoniem]

[url=http://tantek.com/CSS/Examples/boxmodelhack.html]Rekening mee gehouden?[/url]

[anoniem]

Op mijn disk gezet en even gekeken, het is heel vreemd, als ik #menu verander in: [code:1:7c094cc08b] #menu{ /* position:relative; top:0px; left:0px; height:200px;*/ width:190px; border:10px solid #FF7F02; }[/code:1:7c094cc08b] dus zonder position dan is de eerste link goed, maar is er een hover probleem. Ergens klopt er iets niet :cry: (aleen IE, met Mozilla is het steeds goed) wimb

[anoniem]

[quote:50b8ad45a7="termin8or"]Rekening mee gehouden?[/quote:50b8ad45a7] Ik zie niet echt hoe dat stukje voor mijn probleem gebruikt kan worden, misschien mis ik iets, zo ja help me plz. :D

[anoniem]

Op de volgende manier werkt het in IE, Firefox en Mozilla [code:1:cff11a8ee9] #menu { position:relative; top:0px; left:0px; width:190px; border:solid 10px #FF7F02; } #menu ul { margin: 0; padding: 5px; list-style-type: none; } #menu li a { display: block; padding:3px 5px 3px 10px; border:solid 1px #FF7F02; background-color:#FFD37D; color: #000000; text-decoration: none; margin-bottom:1px; width: 165px; } html>body #button li a { width: auto; } #menu li a:hover { background-color:#EF9C00; } [/code:1:cff11a8ee9] #menu li a width: 100% werkt alleen in IE niet in Firefox en Mozilla

[anoniem]

Ok het werkt en dank daarvoor!, maar snap nog niet helemaal waarom. Snap 2 onderdelen uit de code niet helemaal en ook niet waarom dat nou het verschil maakt. waarom staat die li tussen #menu en a wat doet dit precies? html>body #button li a { width: auto; }

[anoniem]

Maak daarvan:[code:1:d6762daf80]#button li>a{ width:auto; }[/code:1:d6762daf80]Werkt beter in IE5.0. Internet Explorer zal de child-selector (>) negeren en dus 'width:100%;' houden. Betere browsers krijgen 'width:auto;', omdat die 'display:block;' sowieso al correct ondersteunen.

[anoniem]

[quote:4ec04541fa="Struis"][url=http://www.vvmonnickendam.nl/ek2004]tada!!![/url] O enne volgens mij werkt het wel in mozilla, maar aangezien het grootste gedeelte toch IE gebruikt, is dat ook wel makkelijk[/quote:4ec04541fa] Nou, ik bekijk het net in Mozilla Firefox en zie toch dat de brede border om "VVMonnickendam poule" wat te hoog uitkomt. Het sluit nu niet meer mooi aan op het logo aan de rechterkant en ik denk toch dat dat wel de bedoeling is geweest,