CSS probleem in Internet Explorer

NickyOll · 15 jan 2013

Beste,

Ik moet voor school een website maken met een aantal javascriptjes.

Met het menu heb ik lange tijd in de knoop gezeten. Om één of andere reden wilde het submenu nooit verschijnen. Nu heb ik dit aan de praat gekregen door de doctype-code bovenaan (die Dreamweaver automatisch genereert) te verwijderen. Het menu werkt nu zoals het moet, maar... in Internet explorer (versie 9) ben ik mijn lay-out kwijt. De Div's worden hier niet weergegeven, als ook sommige lettertypes. In Mozilla (nieuwste versie) en Google Chrome werkt alles perfect.

Ik heb mijn css-bestand gecontroleerd met de css-validator van W3C. Deze is helemaal goedgekeurd.

Kan iemand mij helpen met dit probleem? Ik heb alle andere doctype-codes geprobeerd, maar niets kan beide problemen oplossen. Het is altijd ofwel de lay-out, ofwel het menu... Zelf ken ik verder niet genoeg van websitecode om dit probleem verder uit te pluizen. Ik ben nog maar een beginner!

Mijn website kan je vinden op www.fietsshopmguns.hostzi.com/Index.php.

Alvast bedankt voor jullie antwoord!

Groetjes,
Nicky

Remq · 15 jan 2013

Het is misschien handig om te weten dat elke browser anders omgaat met je CSS. Firefox en Chrome werken over het algemeen het beste en Internet Explorer is de grootste vijand van de websitemaker. Je CSS kan dus syntactisch helemaal kloppen maar je website kan er dus toch anders uitzien in Internet Explorer. Bovendien hebben verschillende browsers verschillende standaarden. Als je bijvoorbeeld de padding niet gedefinieerd hebt kan browser A hier een andere waarde voor aannemen dan browser B. Nu zie ik niet zo snel het probleem maar wat ik zelf altijd doe is kijken of het wel werkt als ik de CSS op een andere manier schrijf.

csshunter · 16 jan 2013

Hoi Nicky,

1. Doctype weglaten?
Dat zou ik in géén geval doen. Het doctype zorgt ervoor de de browsers de standaarden respecteren die in het doctype worden aangegeven.
In Internet Explorer gaat het zonder doctype altijd mis. Dan schakelt IE terug naar de "quirksmode" (de fratsen-toestand), d.w.z. dan worden de opmaak-eigenschappen gebruikt die voor IE5 golden; en dat waren eigenschappen die zich niets van de standaarden aantrokken. Resultaat: opmaak weg!

2. CSS foutloos
Dat is mooi. Maar ... de opmaak en werking van het menu is ook nog van andere dingen afhankelijk: de html-code en het gebruikte javascript. Daar kunnen ook dingen in zitten die maken dat het niet goed gaat in IE.

Als de html-code en/of het javascript fouten bevatten, dan gaan de browsers proberen er hun foutafhandeling op los te laten. Maar er zijn lang niet voor alle gevallen regels hoe die foutafhandeling moet werken. Dat betekent: dat doen browsers elk op hun eigen manier. Zo kan het komen dat het in IE fout blijft gaan, terwijl andere browsers het weten te corrigeren.

3. HTML in orde?
Zonder Doctype is het in elk geval geen valid html.

NB: Bij het weghalen van het doctype had je er ook de <html>-tag in het begin uit geslopt!

En met doctype? Daarvoor komen in aanmerking: html4.01, xhtml1.0 en html5 (zie het w3c doctype-overzicht).
Die doctypes heb ik er even boven gezet, met voor html4.01 en xhtml1.0 de "Transitional" variant (de "Strict" variant is beter, maar Transitional is vergevingsgezinder; zie ook deze uitleg op het forum).
Dan worden het deze:

fietsmg-ori--xhtml-trans.htm
Reactie html-validator: 97 html-fouten...
fietsmg-ori--html5.htm
Reactie html-validator: 85 html-fouten...
fietsmg-ori--html4.01-trans.htm
Reactie html-validator: 42 html-fouten...

De pagina lijkt nog het meest op html4.01-Transitional: die heeft de minste fouten, en is het snelst te verbeteren.

Daar zou ik mee beginnen.
Mocht de pagina het daarna nog steeds niet goed doen in één of meer browsers, dan zal het javascript onder het vergrootglas gelegd moeten worden.

Met vriendelijke groet,
CSShunter

NickyOll · 17 jan 2013

Alvast bedankt csshunter, ik heb alle foutjes uit mijn html-code gehaald! Probleem is nu wel dat het submenu niet meer verschijnt...

Dit is het javascript dat ik gebruik voor het menu:

/*** SET BUTTON'S FOLDER HERE ***/
var buttonFolder = "buttons/";

/*** SET BUTTONS' FILENAMES HERE ***/
upSources = new Array("button1up.png","button2up.png","button3up.png");

overSources = new Array("button1over.png","button2over.png","button3over.png");

// SUB MENUS DECLARATION, YOU DONT NEED TO EDIT THIS
subInfo = new Array();
subInfo[1] = new Array();
subInfo[2] = new Array();
subInfo[3] = new Array();

//*** SET SUB MENUS TEXT LINKS AND TARGETS HERE ***//

subInfo[2][1] = new Array("Stadsfietsen","Stadsfietsen.php","");
subInfo[2][2] = new Array("Koersfietsen","Fiets_overzicht.php?ID=2","");
subInfo[2][3] = new Array("Crossfietsen","Fiets_overzicht.php?ID=3","");
subInfo[2][4] = new Array("Mountainbikes","Fiets_overzicht.php?ID=4","");
subInfo[2][5] = new Array("Tweedehands","Tweedehands.php","");

//*** SET SUB MENU POSITION ( RELATIVE TO BUTTON ) ***//
var xSubOffset = 127;
var ySubOffset = 8;

//*** NO MORE SETTINGS BEYOND THIS POINT ***//
var overSub = false;
var delay = 1000;
totalButtons = upSources.length;

// GENERATE SUB MENUS
for ( x=0; x<totalButtons; x++) {
// SET EMPTY DIV FOR BUTTONS WITHOUT SUBMENU
if ( subInfo[x+1].length < 1 ) {
document.write('<div id="submenu' + (x+1) + '">');
// SET DIV FOR BUTTONS WITH SUBMENU
} else {
document.write('<div id="submenu' + (x+1) + '" class="dropmenu" ');
document.write('onMouseOver="overSub=true;');
document.write('setOverImg(\'' + (x+1) + '\',\'\');"');
document.write('onMouseOut="overSub=false;');
document.write('setTimeout(\'hideSubMenu(\\\'submenu' + (x+1) + '\\\')\',delay);');
document.write('setOutImg(\'' + (x+1) + '\',\'\');">');

document.write('<ul>');
for ( k=0; k<subInfo[x+1].length-1; k++ ) {
document.write('<li>');
document.write('<a href="' + subInfo[x+1][k+1][1] + '" ');
document.write('target="' + subInfo[x+1][k+1][2] + '">');
document.write( subInfo[x+1][k+1][0] + '</a>');
document.write('</li>');
}
document.write('</ul>');
}
document.write('</div>');
}

//*** MAIN BUTTONS FUNCTIONS ***//
// PRELOAD MAIN MENU BUTTON IMAGES
function preload() {
for ( x=0; x<totalButtons; x++ ) {
buttonUp = new Image();
buttonUp.src = buttonFolder + upSources[x];
buttonOver = new Image();
buttonOver.src = buttonFolder + overSources[x];
}
}

// SET MOUSEOVER BUTTON
function setOverImg(But, ID) {
document.getElementById('button' + But + ID).src = buttonFolder + overSources[But-1];
}

// SET MOUSEOUT BUTTON
function setOutImg(But, ID) {
document.getElementById('button' + But + ID).src = buttonFolder + upSources[But-1];
}

//*** SUB MENU FUNCTIONS ***//
// GET ELEMENT ID MULTI BROWSER
function getElement(id) {
return document.getElementById ? document.getElementById(id) : document.all ? document.all(id) : null;
}

// GET X COORDINATE
function getRealLeft(id) {
var el = getElement(id);
if (el) {
xPos = el.offsetLeft;
tempEl = el.offsetParent;
while (tempEl != null) {
xPos += tempEl.offsetLeft;
tempEl = tempEl.offsetParent;
}
return xPos;
}
}

// GET Y COORDINATE
function getRealTop(id) {
var el = getElement(id);
if (el) {
yPos = el.offsetTop;
tempEl = el.offsetParent;
while (tempEl != null) {
yPos += tempEl.offsetTop;
tempEl = tempEl.offsetParent;
}
return yPos;
}
}

// MOVE OBJECT TO COORDINATE
function moveObjectTo(objectID,x,y) {
var el = getElement(objectID);
el.style.left = x;
el.style.top = y;
}

// MOVE SUBMENU TO CORRESPONDING BUTTON
function showSubMenu(subID, buttonID) {
hideAllSubMenus();
butX = getRealLeft(buttonID);
butY = getRealTop(buttonID);
moveObjectTo(subID,butX+xSubOffset, butY+ySubOffset);
}

// HIDE ALL SUB MENUS
function hideAllSubMenus() {
for ( x=0; x<totalButtons; x++) {
moveObjectTo("submenu" + (x+1) + "",-500, -500 );
}
}

// HIDE ONE SUB MENU
function hideSubMenu(subID) {
if ( overSub == false ) {
moveObjectTo(subID,-500, -500);
}
}

//preload();

Deze code heb ik van de website www.buttongenerator.com gehaald. Van javascripts schrijven ken ik namelijk helemaal niets. Ben deze code vaker tegengekomen op het internet, dus veronderstel dat hij normaal wel echt werkt

Op de website waar ik de code van heb, geven ze ook een voorbeeld van het menu. Dit werkt wel, met dezelfde code (heb in de broncode gekeken) Snap dus echt niet waarom het bij mij niet wilt lukken...

Bestaat er van W3C ook een javascript-validator? Ik vind op het internet enkel 'JSlint', kan dat?

Nogmaals bedankt voor de hulp,
alleen geraak ik hier niet uit...

csshunter · 17 jan 2013

ik heb alle foutjes uit mijn html-code gehaald!

Prachtig. :thumb:

Kan je die versie ook online zetten?
In combinatie met het javascript zou dan te achterhalen moeten zijn waarom het niet werkt.

Met vriendelijke groet,
CSShunter

NickyOll · 17 jan 2013

Via deze link kan je de verbeterde versie vinden: fietsshop.atspace.eu!

Bedankt trouwens om er naar te kijken!

csshunter · 18 jan 2013

Hoi Nicky,
Yep, ik had al uitgevogeld dat het script van buttongenerator.com was (zie regel 12 in de broncode van mijn 3 voorbeelden; dat was m'n geheugensteuntje).

Inderdaad, (bijna) valid html geworden. :thumb:

Alleen de tags <openingsuren> en </openingsuren> moeten er nog uit. Die tags doen toch niets omdat ze geen bestaande html-tags zijn, maar ze maken de pagina wel invalid.

Dus toch naar het script kijken...

"Ja poe-hé," om met Tommy van Sesamstraat te spreken, daar kan je nooit achter komen als je niet behoorlijk javascript beheerst!!! :shocked:

Er staat o.a.:
[JS]// MOVE OBJECT TO COORDINATE
function moveObjectTo(objectID,x,y) {
var el = getElement(objectID);
el.style.left = x;
el.style.top = y;
}[/JS]
Dat betekent het volgende:

Bij een mouseOver over het menu wordt functie showSubMenu(...) aangeroepen, en die vraagt op zijn beurt deze functie moveObjectTo(...) op.
Het objectID is de naam van het submenu, de x en de y zijn de afstanden van het submenu (x = vanaf links; y is van boven af).
Zonder hover staat de horizontale x erg ver weg; in de css staat {left: -1500px}, dat is dus naast het scherm! Daarmee is in de normale toestand het submenu onzichtbaar buiten beeld getrokken.
Bij een hover moet het submenu binnen boord gehaald worden, en met een rekenpartijtje in weer andere functies worden de x en de y bepaald voor het submenu (= de x en de y voor het linkerbovenhoekje van het submenu-rechthoekje).
var el = getElement(objectID) betekent: noem het submenu even "el" (van element).
Dan is el.style.left = x de opdracht om de css-style van het submenu op x te zetten voor de left-positie.
En op dezelfde manier voor de y-positie.

Dat is de bedoeling tenminste!

MAAR!
Als je (direct in de css of via javascript) voor iets een afstand aangeeft, moet je erbij zetten wat de eenheid van die afstand is! Anders werkt het niet: dan weten de browsers niet of er px bedoeld worden, of pt, of misschien wel zeemijlen of Oud-Hollandse Voeten, enz.
En de x en de y zijn alleen maar getallen...

Sommige browsers hebben een ingebouwd foutherstel-mechaniek dat denkt: "als niets is aangegeven, zullen het wel pixels zijn". Andere browsers doen dat niet, en denken: "fout is fout, dus ik doe niets". Daar kan je dus niet van op aan.

KORTOM:
Er hoort te staan:
[JS]// MOVE OBJECT TO COORDINATE
function moveObjectTo(objectID,x,y) {
var el = getElement(objectID);
el.style.left = x+'px';
el.style.top = y+'px';
}[/JS]

Zet je dat in het script, dan draait het als een tierelier.

======
Waarom werkt het dan wel bij de pagina van de buttongenerator?

Hmm, daar hebben ze er toevallig géén (goed) doctype boven staan... (497 html-Errors, 27 warnings; daar kan jij niet tegen op!)

Dan moeten de browsers een hele oude versie van html gaan proberen, waarin het waarschijnlijk ook zonder de px-eenheid mocht.
En toevallig heeft die pagina geen opmaak die daarvan in de war raakt (tenminste niet bij mij in Firefox en IE7).
Opmaak voornamelijk op z'n ouderwets: met tabellen ipv fatsoenlijke css ...
Waarschijnlijk is het een heel oud script, uit de tijd dat browsers nog nauwelijks css ondersteunden. *)

Tegenwoordig heb je voor zo'n uitklapmenu helemaal geen javascript nodig. Je kan de prachtigste uitklapmenu's maken met alléén css.

Een css menu-generator staat bv. hier: List-O-Matic.

=======
Conclusie:
Met gevonden voorwerpen op internet is het altijd erg uitkijken geblazen!
Zelfs een demo zegt lang niet alles. Daar kunnen ook verborgen gebreken in zitten, zo blijkt maar weer.

Succes!
CSShunter
________
O ja,
jsLint is een bekende en goede controleur voor javascript (wel erg kritisch).
Als je voor Firefox de WebDeveloperToolbar hebt (aanrader!), dan zit daar ook een javascript fouten-verklapper in.

Maar ... jsLint of een andere javascript-validator kan bovenstaande scriptfout er helaas niet uit halen.
Want een variabele "x" kan een puur getal zijn, maar ook een string waar de "px" al bij staat (wat dus goed is), en dat zien ze niet.

[edit]*) En Jawel![/edit]
Het WayBack archief weet te vertellen dat dit menu-script van de buttongenerator voor het eerst op 9 aug. 2004 op internet gezet werd (zie deze pagina). Daarna hebben ze er kennelijk nooit meer naar omgekeken.

NickyOll · 18 jan 2013

Bedankt!!!!!

Super!!! Het probleem is eindelijk opgelost!!! Wat een opluchting! Echt super bedankt! Ik had me al uren suf gekeken op die javascriptcode...

Nu ziet mijn website er eindelijk uit zoals ik het wil

Nog eens bedankt voor alle moeite!!!

csshunter · 18 jan 2013

Goed zo!

Nog een tip: als je afbeeldingen op een site gebruikt, maak die dan op ware grootte zoals ze op scherm vertoond moeten worden.

----->

origineel 115kB, geschaald --- op ware grootte: 11kB

Hier zitten twee voordelen aan:

Browsers kunnen niet zo mooi verkleinen als een tekenprogramma: bij een afbeelding op ware grootte is de kwaliteit van de afbeelding veel beter.
Een kleinere afbeelding is ook veel sneller gedownload: het bestand bij ware grootte is 10 keer zo klein!

Heb je geen duur fotobewerkingsprogramma als Photoshop of PaintShopPro, dan kan je ook uitstekend verkleinen met bijvoorbeeld de gratis IrfanView.

Met vriendelijke groet,
CSShunter

NickyOll · 18 jan 2013

Dat is inderdaad een goede tip, daar ga ik mij dit weekend eens mee bezig houden!

Nog even een klein vraagje: in een vorige websitetaak gaf ik in mijn css-bestand een class aan met .benaming. Nu in deze 4.01 versie neemt hij dat niet aan, kan dat?
Hoe kan ik dat dan doen?

csshunter · 19 jan 2013

... class met .benaming

Ja, dat is goed, en hoort in alle versies van html te werken.
D.w.z. in de html gebruik je bv. class="randje" (zonder het puntje),
en in de css zet je dan: .randje {border: 1px solid red;} met het puntje.
Net zoals in de html een id="eenElement" in de css het hekje erbij heeft: #eenElement {border: 1px dotted green;} (dat is een stippelrandje rondom).

Wat ik wel zag in je code, is dat je een opmaak met css mixt met opmaak in tabellen. Tabellen zijn eigenlijk niet voor de opmaak bedoeld, en de combinatie met css kan soms maken dat het niet goed werkt.

Je kunt het beste de opmaak met alleen css regelen!

Ook gebruik je absolute posities om dingen een plaats te geven. Dat lijkt handig, maar dat kan ook gevaarlijk zijn, zeker in combinatie met tabellen. De elementen met absolute posities blijven dan op hun plaats staan, maar de tabellen gaan zich uitrekken of krimpen op grond van de schermbreedte.
Samen loopt het dan door elkaar heen (bv. als je in jouw testpagina het browserwindow verkleint: dan zit de #LogohoekRechts aan de rechterkant van het scherm, maar als je naar rechts scrollt, komt erna nog het laatste stukje van de kop van het midden. Maak je het scherm nog wat kleiner, dan schuift het rechterlogo er gewoon overheen...).

Probeer bv. maar eens dit met alleen css te stylen (zonder tabellen, en zonder absolute posities te gebruiken):

HTML:

<div id="topbalk">
    <img src="images/Logo.png" width="136" height="136" alt="Logo">
    <img src="images/Etalage.JPG" width="180" height="120" alt="Etalage">
    <img src="images/TitelKlein.png" width="641" height="134" alt="Slogan">
    <img src="images/Winkel1.JPG" width="180" height="120" alt="Winkel">
    <img src="images/Logo.png" width="136" height="136" alt="Logo">
</div>

Tip 1: gebruik {float: left;} om alle images precies naast elkaar te krijgen, zonder spaties ertussen.
Tip 2: geef het linkerlogo en het rechterlogo elk een id, waarmee ze het randje rechts of links kunnen krijgen.

Met vriendelijke groet,
CSShunter

CSS probleem in Internet Explorer

NickyOll

Gebruiker

Remq

Gebruiker

csshunter

Meubilair

NickyOll

Gebruiker

csshunter

Meubilair

NickyOll

Gebruiker

csshunter

Meubilair

NickyOll

Gebruiker

csshunter

Meubilair

NickyOll

Gebruiker

csshunter

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy