Menu in IE6

Status
Niet open voor verdere reacties.
swallav

swallav

Terugkerende gebruiker
Lid geworden
19 jul 2007
Berichten
1.482
Ik heb een site (klik). Probleem is echter dat er ook bezoekers zijn met internet explorer 6. Het probleem hierbij is dat deze het menu niet kunnen zien en dus niet kunnen navigeren op de site. Wie o wie heeft er een menu wat wel werkt in internet explorer 6? Het liefst met css want dat valt nog te begrijpen (maar anders is ook goed). Alvast bedankt voor de moeite.
 
Hoi,

Ik heb even geen pasklaar antwoord op je vraag maar wou je een compliment maken.
We zien vaak sites voorbij komen op Hm en dan zitten er vaak sites bij in het engels en in 99 % van de gevallen is dat vaak om te huilen.
Zo niet bij jou site. Je engels ( als je het zelf vertaald hebt) is keurig en grammaticaal ook prima.
Doet me goed om dat ook weer eens tegen te komen. :thumb:
 
Bedankt voor het compliment. Na wat research blijkt dat het probleem niet in internet explorer 6 zit. In IE5 werkt ie namelijk wel goed. Probleem is, waarom werkt de site dan niet overal. Thuis en bij eigenlijk iedereen waar ik kom werkt de site prima alleen bij een persoon op zijn werk niet. Waar zou het probleem kunnen zitten. Ik heb geen php gebruikt in deze site.
 
Hoi swallav,
Hoeps, een tragische mededeling: bij mij in Internet Explorer 7 (bij een resolutie van 1024x768px) doet ie het ook niet goed.
En inderdaad, ook in IE6 hetzelfde verschijnsel: het content-gedeelte duikt verschrikkelijk naar beneden.

sippy-screenshot-ie7.gif

Hé-poppelepé, het ligt niet aan de resolutie, zoals ik eerst dacht: op 1280x1024px doet IE ook raar. Of is de site op nog hogere resolutie aangemaakt? O, dat zou kunnen: het logo is maar liefst 1382px breed, en zal bij veel bezoekers van het scherm af wandelen, ook in andere browsers.

sippy-screenshot-ff.gif
  • Ik kom op 1024x768px (die nog heel veel mensen gebruiken) zo'n 360px tekort om het logo te kunnen zien, d.w.z. ik moet 1/3 van de beeldschermbreedte naar rechts scrollen om het uiteinde te kunnen zien.
    Dat is geen logo in één oogopslag. ;)
Ik vermoed dat er voor IE iets mis is met de positionering van de verschillende <div>'s, want ze zitten op het oog nogal in elkaar vervlochten; maar 't is een beetje laat om dat uit te zoeken.
In ieder geval zou ik een begin maken met het valid maken van de html:
  • De html-validator zegt namelijk: 9 errors.
Er zit o.a. een <h1> binnen een <p>, wat niet mag (een block-element mag zich niet binnen een ander block-element bevinden). Verder lijken het kleinigheden.

Met vriendelijke groet,
CSShunter
 
Ok, ik heb de eerste fouten er nu uitgehaald. Ik zit er echter nog steeds met vijf. Hoe moet ik deze oplossen. Ik snap namelijk niet echt wat er mis mee is.

Oja hoe zorg er voor dat het logo op verschillende schermen goed uitkomt? Is er een code waardoor ik hem mee kan laten groeien met het scherm als het ware?
 
Laatst bewerkt:
Yes, happen we de 5 foutjes er eerst even uit:
  1. regel 3: "Missing xmlns attribute for element html".
    Er mist de verplichte eigenschap xmlns="..." in de tag <html>.
    Zoals een klik op de opgegeven link van de validator leert, moet (puntje 3) de code van het groene kadertje in de <head> zitten:
    Code: 
    [COLOR="DarkSlateGray"]<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">[/COLOR]
    De taal staat hier al goed in, want je site is in het Engels (anders was het twee keer "nl" bij de "lang").

  2. regel 14: "required attribute "alt" not specified".
    Bij een image hoort altijd een eigenschap alt="..." opgegeven te worden.
    Dat krijgen mensen te lezen of te horen als hun browser geen grafische opmaak heeft (of als zij verminderd gezichtsvermogen hebben, of als per ongeluk een image niet gevonden kan worden op de server). De alt is dan ook van alternatief.

    Maar als het om een puur opmaak-element gaat, is het natuurlijk storend als dat steeds verteld wordt (bv.: alt="rond hoekje links boven"). Dat zal de bezoeker gestolen kunnen worden!
    Dan mag je een "lege alt" neerzetten, d.w.z. wel een alt met de twee aanhalingstekens alt="", maar niets tussen de aanhalingstekens (ook geen spatie).
    Maar leeg of niet, een alt moet er altijd bij staan. :)

  3. regel 40: "end tag for element "br" which is not open".
    Er staat een </br> zonder een voorafgaande ("openende") <br>.
    Een <br> (regeleinde) is echter een element dat uit zichzelf geen afsluitende tag heeft, maar solo voorkomt. Andere elementen (bv. een <div>) hebben wel zo'n code-afsluiter (bv. </div>) als ze klaar zijn. Bij een XHTML-pagina moet er altijd een afsluiter zijn, ook bij solo-elementen. Daar hebben ze op bedacht dat dan de slash achteraan de tag komt. Het moet dus worden: <br />, vergelijkbaar met de <link .... /> en de <meta .... /> elementen in die in de <head> staan (die zijn al wel goed).
    - Bij jou staat de slash per ongeluk vóór de b van br </br>, en dan denkt de validator hardop: hé, dat is een afsluitende tag die bij een <br> zou moeten horen, maar die begin-<br> heb ik nooit gezien.

  4. regel 41: "end tag for element "hr" which is not open".
    Is ook weer een solo-element, moet worden: <hr /> i.p.v. </hr>.

  5. regel 54: "end tag for element "br" which is not open".
    Die kennen we al.
Tot zover,
wordt vervolgd!
CSShunter
 
Hoi swallav,
Het is natuurlijk helemaal niet pedagogisch verantwoord, maar ik heb er geen tijd meer in gestoken om na te gaan wat er nu precies aan de hand was waardoor de Internet Explorers er zo'n schetsvertoning van maakten. Waarschijnlijk heeft het te maken met de opgevoerde 93% width's in de nogal in elkaar gekokerde <div>'s.

Ik vond het leuker om het wiel opnieuw uit te vinden, en ben volgens de geijkte methode (zachtjes van boven naar beneden en van links naar rechts) de startpagina opnieuw gaan opbouwen met simpeler <div>'s en bijpassende nieuwe css.
Voor het DOCtype heb ik de XHTML Strict versie genomen, die levert de beste resultaten in alle browsers (want volgt de standaarden).

Voor het logo lijkt het me het handigste om dat gewoon wat kleiner te maken en niet door browsers te laten schalen (dat kan in principe wel, maar het resultaat is meestal niet zo mooi - een browser is geen tekenprogramma, dat daar speciaal voor gebouwd is).

Ik heb het logo in een formaatje van 750px breed gemaakt (zonder marges eromheen, dat eet alleen maar kB's, en kan net zo goed geregeld worden door er exact dezelfde achtergrondkleur achter te zetten). Dan is het logo nog altijd precies te zien op een resolutie van 800x600px. En het is groot genoeg om bij een resolutie van 1280x1024 of groter nog een prettige aanblik te geven.

In het voorbijgaan heb ik de vlaggetjes ook maar even een was- en strijkbeurt gegeven, zodat ze er weer fris en fruitig uitzien.

Verder heb ik voor de #content een maximale breedte bedacht, dan krijgen bezoekers met breedbeeldschermen geen ellenlange zinnen voor hun neus.

En voor de rest heb ik het bestaande design gewoon gevolgd.
Leuk trouwens om weer eens een Liquid Design tegen te komen, want die zie je niet echt vaak. :)

O ja, en hier is ie:
Ik heb niet gekeken naar de vervolgpagina's, daarvoor zal eventueel wat verse css uit de bloemkool moeten komen.
Maar een beginnetje is er.

Met vriendelijke groet,
CSShunter

[edit]Wat ik gebrouwen heb, is in feite de liquid tegenhanger van de fixed-width Online Page Creator. Die heeft op dezelfde manier een kop, menu en content (tips in de gegenereerde code) - alleen de huidige pagina is zonder de capriolen die nodig zijn voor een menukolom in een afwijkende kleur.[/edit]
 
Laatst bewerkt:
(mag ik even offtopic? Behalve dat het een heel goede site is, heb ik 1 opmerkingetje: als je wilt veranderen van taal, en je staat met je muis op de belgische/nederlandse vlag, dan zegt hij "website in English", sta je op de engelse/amerikaanse vlag zegt hij "site in 't nederlands", wat een beetje een vreemde logica is ;))
 
Hoi jordumus,
mag ik even offtopic?
Klik om te vergroten...
Van mij mag je! Temeer omdat er ik door jouw reactie op attent gemaakt werd dat intussenerwijl mijn suggesties (nieuwe css + nieuwe plaatjes geleverd, toch wel een stief kwartiertje mee bezig geweest) dankbaar voor 98% zijn overgenomen.

En nog meer temeer omdat in mijn testpagina de talen bij de vlaggetjes omgekeerd staan. :d (vergelijk testpagina en de echte)

Met vriendelijke groet,
CSShunter

PS
@swallav, mocht je hier nog eens langs komen: ik zou de <title>Home</title> op de homepage vervangen door <title>Sippy: Modern Art</title> of iets dergelijks. De title is vrij belangrijk om in de Google-hitlijst te komen, en ik denk dat er weinig mensen zijn die als zoekwoord "Home" opgeven als ze op zoek zijn naar zoiets als deze site.
Op zoekwoord "Home": "Ongeveer 4.090.000.000 resultaten (0,07 seconden)". :)

@swallav: heb je er al eens aan gedacht om op de pagina Atelier/ArtGalery (overigens ook met de <title>Home</title>) een zwarte i.p.v. een witte background te gebruiken? In mijn beleving komen dan de kleuren op de schilderijen veel sprankelender over. Vergelijk deze testpagina (te bezichtigen met FF, Opera, Safari of Chrome; moet nog IE-correcties krijgen) met de huidige pagina.
 
Ik moet nog even een css is elkaar flatsen die niet rechtstreeks in de html staat dus dan neem ik dat ook gelijk even mee. Met een zwarte achtergrond komen de doeken inderdaad een heel stuk mooier uit. Ik ga het in overweging nemen!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan