Website bij IE verspringt het menu

Status
Niet open voor verdere reacties.
damnsharp

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.414
Goedemorgen,
Ik heb een website gemaakt en een test hier neergezet: test website helpmij (titel menu naam van het bedrijf weggehaald).
Bij Firefox en Chrome ziet de website er precies als het ontwerp uit, maar bij IE niet. Daar verspringt het menu. Het was ook een lastig menu om te maken omdat het 1e menu item een andere kleur moest zijn en niet Home heet...
Maar goed, wel gelukt maar hoe kan ik het verspringen oplossen? Ik vermoed dat het met float left en marges te maken heeft maar krijg de vinger niet op de zere plek :)
 
de site werkt hier goed.
Maar wat bedoel je met ''verspringt'' ??
Zou je dat nog wat duidelijker kunnen waarnemen? printscreen bijvb.
 
Wie gebruikt er dan ook IE
Tja zou bij Ie 10 verholpen moeten worden
Anders even op je site zetten: Chrome/firefox only soon IE
 
@Laurensv99. De klant gebruikt IE, alsook 43,9% in juli dit jaar volgens deze statistieken dus die tekst erbij zetten is geen optie. Wel natuurlijk bedankt voor het meedenken.
 
Hoi damnsharp,
Je hebt gelijk: een site moet gewoon cross-browser zijn, anders mis je een deel van je bezoekers.

Maar mijn eerste test was ... (zie m'n handtekening!): "Als een webpagina plots niet doet wat je wilt, raadpleeg dan eerst ... enz."
Dat geldt ook als FF en anderen het goed doen, maar een of meer IE-versies niet!

En wat zien ik? Aha, dit. :p
Dus ik ben helemaal niet verbaasd bij het bekijken van de broncode:
  • Er staat iets vóór het Doctype: dat staat garant om IE in de quirksmode te laten schieten (de "fratsen-mode", waarin niet meer het gewone standaard box-model van de css wordt gehanteerd, maar een ouderwetse IE-afwijking waar IE5 mee uit de voeten kon).
  • Er staat ook nog een <div id ="wrapper"> vóór het Doctype, vóór de <html> en vóór de <head>, en niet in de <body>.
  • Een wonder dat ie zich nog heelhuids in Firefox vertoont!

Dus eerst die html-errors maar eens wegwerken, en kijken wat IE daarna doet. ;)

Met vriendelijke groet,
CSShunter

Edit
@Windowsfaq ("de site werkt hier goed"):
Met welke IE werkt de site bij jou dan goed? (het ging om een IE-probleem)
In IE7 gaat het mis (verticaal menu ipv horizontaal, layout naar de knoppen), en volgens Netrenderer.com is het óók mis in IE8, IE9 en IE10-preview. Dus geen enkele IE doet 't! :rolleyes:
 
Laatst bewerkt:
@csshunter: oei... ik schaam me diep! :o Met een laatste tip van jou de webdeveloper plugin bij FF zie ik ook dat niet alle vinkjes groen zijn. En ken jouw handtekening eigenlijk maar al te goed.
Laat ik maar de warmte de schuld geven... :)
Ga gauw even wat herprogrammeren en dan alle testen doen. Ik kom erop terug.
 
Laatst bewerkt:
Warm of koud, overkomt iedereen wel eens. ;)

Kennelijk was de pagina al af toen je alarm sloeg op IE.
Maar bij geduldig systematisch testen per verse div zou het al veel eerder gebleken zijn: "Doet ie 't ook in IE?".
En eerder ontdekken = 3x zo makkelijk herstellen!


 
Hoi CSShunter, ik maak de site altijd in html en css voordat ik hem overzet naar WordPress template. Daar had ik hem getest en was de html code goed bevonden door w3c :)
Maar nu zie ik dat met omzetten ik vanwege de php code ik het overzicht wat kwijt was. De div id wrapper had ik inderdaad boven doctype gezet... En bij zowel index/single/page.php alswel footer.php de wrapper afgesloten. Tsja dubbel afsluiten gaat niet goed met divjes ;)

Nu is het menu goed bij IE, zit ik er alleen nog mee dat bij WordPress en IE de linker sidebar helemaal rechts staat als die niet gevuld is met tekst of een plaatje. Bij de pagina "Wat doen wij" ziet het er wel goed uit. Kan ik vast wel oplossen door een lege tekst widget er neer te zetten met een grijs puntje erin maar is dat de oplossing? Lijkt mij niet helemaal netjes. Hmmm.... of draaf ik nu door?

De html en css code is nu ook bij de WordPress website gevalideerd en goed bevonden (wel wat warnings over kleur: linkje)
 
Laatst bewerkt:
Hoi-hoi,
Nu is het menu goed bij IE
Klik om te vergroten...
Jawel, in IE8 en hoger, maar nog niet in IE7 (menu nog steeds verticaal a/d linkerkant):

ie-drop.png

Met een beetje geluk valt dat bij te stellen met behalve de #nav li {display: inline;} een extra #nav li {float: left;}. Of een float op de #nav ul li a {...}, of een {display: inline-block;} aan de a's geven.
Even experimenteren!
  • Overigens zijn niet de hele menu-blokjes hoverbaar/aanklikbaar, alleen de bovenste helft! (ook in FF) :confused:
  • Misschien kan je daar wat aan doen met de paddings.
Nog meer experimenteren!

Voor het verkeerd vertonen van de grijze kolom in IE: heb je al geprobeerd de <div id="container"> de breedte van z'n inhoud-div's te geven?

De kleuren-warnings van de css-validator zijn voor de toegankelijkheid (ik geloof priority 3 van de WCAG). De validator wil nl. bij elke opgegeven kleur van een element ook de bg-color van hetzelfde element weten: altijd in paren.
De validator kan niet zien wat er eventueel aan bg-kleur (of gekleurd bg-img) in een onderliggend element zit, of dat daaronder, en dan kan het in principe mis gaan (ook als je zonder erg de bg-color van een element eronder gaat wijzigen). - Maar dit kan wel wachten tot alle css definitief is.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Beste CSShunter. Op de #nav li moest inderdaad een float:left komen. Ook een vaste breedte voor de div id container was goede zet van je :thumb: Ook de paddings aangepast zodat de knoppen beter klikbaar zijn. Volgens mij (op de kleuren warnings na) ben ik nu een heel eind. Bij mij bij IE 7,8,9 en FF en Chrome ziet het er nu goed uit... phoei. ;)
 
Dank je CSShunter voor de ondersteuning. Er is een probleempje wat ik graag nog opgelost zie maar ik weet niet hoe ik dat moet aanpakken. Elke pagina krijgt een plaatje bovenaan maar stel dat plaatje is er niet en de tekst van de pagina is te kort dan gebeurd er dit: bekijk dit linkje
Daar loop ik wel vaker tegenaan bij andere websites en meestal los ik dat op met wat faux columns volgens mij heet maar omdat ik nu voor het middenstuk een container (met sidebar_left en content) en een sidebar_right heb in plaats van alleen een container weet ik het niet.
 
Gelukt inderdaad met fauxcolumns. Een "holder" om de divs tussen de header en footer gemaakt. Sorry for asking :)
 
Joe, toch met een faux-column: die dan over de volle breedte loopt van de 3 kolommen in de #wrapper.
Je neemt dit image:


Dan haal je de grijze #wrapper background-kleur er uit, en je zet er dit img voor in de plaats:
Code: 
#wrapper {
    background: url("images/wrapper-bg.png");
    margin: auto auto 30px;
    width: 1100px;
}
De #wrapper is nl. het gemeenschappelijke element waar de content en de rechterkolom in zitten. Wie van de twee ook het hoogste is, de #wrapper neemt de hoogste hoogte aan. En de background van de wrapper loopt dus door tot onderop de hoogste kolom.
Oftewel: waar de background van de kortste kolom ophoudt, neemt de background van de wrapper het over.
En in feite zijn hiermee de background-kleur van de content en de rechterkolom overbodig geworden. :)


  • Uitleg met plaatje: hier.

Met vriendelijke groet,
CSShunter

[Edit]Kruispost in dezelfde minuut, maar: te laat! Ik was 3 tellen later. ;)[/edit]
 
Laatst bewerkt:
Ah super CSShunter, deze is beter, scheelt een div! Dank je.
 
Hoi damnsharp,
Een extra holder-div is in dit geval niet nodig.
De wrapper loopt weliswaar over de hele pagina behalve de footer, maar de header met logo en navigatie zit met z'n header-img binnen de wrapper, en ligt daar dus boven: daar wordt de wrapper-background overgeplakt met het header-img en de nav-backgrounds.

[edit]Alweer in dezelfde minuut! Ik moet sneller tikken! :)[/edit]
 
Laatst bewerkt:
Je uitleg over fauxcolumns op bliksekaters is helder trouwens, dank je.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan