Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Google Chrome en deze navigatiebalk

7 antwoorden
  • Helemaal wanhopig wordt ik ervan. Ik ben een framewerk op aan het zetten voor een nieuw te bouwen website en ik wordt Radeloos (met een hoofdletter 'R') van de combinatie Google Chrome en de navigatiebalk. Ik heb bovenin een horizontale navigatiebalk met dropdown menu's zitten. En die werkt overal helemaal prima, behalve in Chrome. Daar wordt hij deels onder elkaar geschoven alsof de elementen te breed zijn. Normaal gesproken betekent verschillend gedrag in verschillende browsers dat je geen goeie code hebt. Maar ik heb mijn code te uit en te na doorgenomen en gevalideert met de online W3C tool, en ik kan er geen fout in ontdekken. Het maffe is, dat Chrome hem soms goed en soms fout toont. Als je vaak refreshed, lijkt het steeds vaker meer fout dan goed te gaan, maar als je gewoon bovenin de url nogmaals invoert, gaat het vaker goed dan fout. Ik heb zowel de HTMl als de CSS code van een goede en een foute weergave opgeslagen (dus na het renderen van de pagina de gerenderde HTML en CSS gecopieerd) en daar zat geen enkel verschil in. Ik begin langzaamaan aan een bug in Chrome te denken, maar welke bug en hoe die te omzeilen, geen idee. De betreffende site: http://test.workingdownstairs.nl/huys/ (Ik weet dat het ook in de 'goede' weergave niet helemaal uitlijnd naar rechts, dat is de issue niet, maar komt omdat ik de breedte niet in de laatste paar elementen heb zitten om zeker te weten dat een te grote breedte het probleem niet is) De HTML van de navigatie: [code:1:610c0af6b6] <!-- navigation starts here --> <ul id="navigation"> <li class="navbutton1"><a href="#">knop</a></li> <li class="navbutton2"><a href="#">knop</a> <ul> <li class="navbutton2"><a href="#">knop1</a></li> <li class="navbutton2"><a href="#">knop2</a></li> </ul> </li> <li class="navbutton3"><a href="#">knop</a></li> <li class="navbutton4"><a href="#">knop</a> <ul> <li class="navbutton4"><a href="#">knop1</a></li> <li class="navbutton4"><a href="#">knop2</a></li> </ul> </li> <li class="navbutton5"><a href="#">knop</a></li> </ul> <!-- navigation ends here --> [/code:1:610c0af6b6] De CSS van de navigatie: [code:1:610c0af6b6] /* Navigatiebalk begint hier */ ul#navigation { width: 964px; height: 32px; margin: 0 0 16px 0; padding: 0; background-color: #ddd; font-size: 18px; list-style-type: none; position: relative; } #navigation li { display: block; float: left; position: relative; margin: 0; letter-spacing: 2px; text-align: center; z-index: 50; } #navigation li a { display:block; text-decoration: none; height: 28px; padding-top: 4px; color: #fff; } #navigation li a:hover { color: #000; } li.navbutton1 a { display: block; width: 188px; background-color:#9ac019; } li.navbutton2 a { display: block; width: 196px; background-color:#9ec8e7; } li.navbutton3 a { display: block; width: 196px; background-color:#ca3265; } li.navbutton4 a { display: block; width: 196px; background-color:#a32d3b; } li.navbutton5 a { display: block; background-color:#9ac019; } #navigation ul { position:absolute; left:0; display:none; margin:0; padding:0; list-style:none; z-index: 100; width: auto; } #navigation ul li { display: block; clear: both; border-top:1px solid #777; } /* Navigatie tot hier */ [/code:1:610c0af6b6]
  • Ik zie wat je bedoelt... Vaag! Het valt me ook op dat het bij een Ctrl+F5 vaker goed lijkt te gaan dan bij een gewone F5. :?
  • Als ik de site bekijk in Safari voor Windows en ik gebruik het pijltje in de adresbalk om te vernieuwen zie ik het ook vaak verspringen, zo ook in Safari op mijn iPad2. Verder nog niet echt kunnen puzzelen. Moos
  • Ik heb nog even gekeken en er zijn dingen die mij opvallen, het gebruik van position: relative; bijna overal, volgens mij is dat helemaal niet nodig. En je navigatie menu staat niet in een aparte div. Ik ben hiermee gaan stoeien, omdat ik zulke dingen ook niet kan uitstaan, en heb alle position: relative en absolute er uit geknikkert en een aparte div gemaakt voor de navbar. Dit werkte niet omdat de ul een position: absolute; nodig heeft. Nu verdween de tweede dropdown achter het plaatje en die opgelost met een z-index. Volgens mij moet het dan dus dit worden; [url]http://websites.kcst.nl/gooly/index.html[/url] Het enigste probleem wat je dan nog hebt is dat het niet goed werkt in internet explorer 6, dus als je daar wakker van ligt moet je daar nog even naar kijken. Ben benieuwd of dit wat is. Moos
  • Hey Moos, ik zie je reactie net. Ik kom er later op terug. (nu heel weinig tijd) Geweldig dat je zo actief bezig bent geweest :)
  • Googly, ik zag dat het menutje in de header niet in alle versies van ie zichtbaar was, of gewoon heel ergens anders stond, dus die heb ik ook nog even aangepast, ter lering en vermaak. En ik was wat kwistig met de positioning verwijderen, wat dus toch ergens nut voor had, waardoor het menu in ie 6 niet werkte, doet het nu ook; [url]http://websites.kcst.nl/gooly2/[/url] Succes, Moos
  • Moos, je bent mijn held! Ik heb het overgezet op de hierboven genoemde voorbeeldsite, en het probleem is verdwenen. Zelfs in IE6 ziet het er goed uit. OK, waar is dat online formulier waar je mensen voor de Nobelprijs kunt nomineren? :) Ik probeer inderdaad vaak op div's te beknibbelen. "Waarom een aparte div voor de navigatiebalk, als de <ul> dat m.b.v. CSS ook prima alleen kan" zo redeneerde ik. Dat er (inmiddels) wat overbodige positioneringen in stonden zou kunnen, want daar ben ik intensief mee aan het experimenteren geweest, en heb de dingen daar misschien wel erger mee gemaakt dan ze al waren. Nogmaals muchos gracias!

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.