Website anders in IE dan in FireFox

Status
Niet open voor verdere reacties.

Gunneweg

Verenigingslid
Lid geworden
22 okt 2002
Berichten
574
Besturingssysteem
Windows 10 22H2
Ik gebruik al jaren FF voor het editen van mijn website. Pagina's zien er in de browser goed uit, maar bekijk ik ze in IE dan klopt er niets meer van. Dat is met een tekst niet zo erg maar met bepaalde menu's is dat toch wel vervelend.

Ik heb twee websites, er deugd van de code waarschijnlijk niet veel, maar ik heb er te weinig verstand van om het in beide (of nog andere browsers) te laten kloppen.
Is hier een (simpele) methode voor?

Bekijk de volgende link eens in beide browsers en zie dan het verschil.

http://www.smaakversterkers.eu/verklaringen/index.html
 
dat komt waarschijnlijk omdat je niet alles declareert, als je bijvoorbeeld voor een text geen margin, padding, font opgeeft etc, zal hij dit automatisch zelf kiezen aan de hand van je browser instellingen. nu is het zo dat firefox voor margin automatisch 0 rekent, terwijl ie hier bijvoorbeeld 1 voor rekent.

je moet dit oplossen door alles specificieren. zet om te beginnen in de css maar eens in deeltje waar nog GEEN margin en padding zijn aangegeven, dus in elke
naam {
content
}

maar de regeltjes:

margin: 0;
padding: 0;

het is ook handig om bij je menu enzo even neer te zetten wat de textgrootte en het font moet zijn


hopelijk helpt dit je wat
 
Hi,
Je hebt ons geen extene css laten zien...
Intern zie ik dit:style="position:absolute; width:350px; left:650px; top:300px;

Je positioneert hier absoluut. Waarom gebruik je eigenlijk geen Float?
Absoluut positioneren doet MS (vooral 6.0 en minder) anders dan FF en andere W3C compliant browsers vanwege hun andere interpretatie van het Box Model.
Hier vind je meer uitleg.
Kun je daar wat mee?
 
Laatst bewerkt:
Solaris

Je hebt ons geen extene css laten zien...
Intern zie ik dit:style="position:absolute; width:350px; left:650px; top:300px;
Heb absolute veranderd in "float" dit is in IE inderdaad iets beter, maar nu staan de kolommen niet meer naast elkaar maar onder elkaar.
De regel style="position:absolute; enz heeft jaren geleden van een ITer voor mij gemaakt. Maar ja de tijd gaat verder en de browsers ook.
Ik heb wel de volgende DTD op de pagina: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Het Box model begrijp ik helaas niet wat ik er mee zou moeten.


Exemple5
Ik heb in de CSS in alle declaraties bijgevoegd:
margin: 0;
padding: 0;
maar dit geeft eigenlijk geen verandering.
 
Hoi Ed,
De regel style="position:absolute; enz heeft jaren geleden van een ITer voor mij gemaakt. Maar ja de tijd gaat verder en de browsers ook.
Zeker weten!
Een {position: absolute;} heeft gevaarlijke kanten: vaak hangt het van het formaat van het beeldscherm af wat er dan gaat gebeuren ... en meestal gaat het dan fout. En bijna altijd, als de site tegelijkertijd gecentreerd op het scherm moet verschijnen bij alle resoluties.
Floaten van de twee kolommen is inderdaad de oplossing. Door de breedte van de floats goed in de gaten te houden, moeten ze naast elkaar kunnen passen.

De hele codering ademt eigenlijk een beetje de sfeer van de vervlogen tijden. In de scripts wordt rekening gehouden met de browser Netscape 4. Tja...: de laatste was Netscape 9, en die is al weer een geruim aantal jaren geheel opgedoekt (zie de site van Netscape!); vooral Firefox heeft de plaats van Netscape ingenomen.

De HTML-versie (in het Doctype) is 4.0. Die is al in 1999 vervangen door html-4.1; ook de variant "Transitional" is niet nodig. Die was in die tijd bedoeld om websites met oude coderingen nog goed te laten draaien. Voor het beste gebruik van de standaarden (= de beste cross-browser resultaten) moet html-"Strict" worden gebruikt. Daarvoor moet bv. de "font"-eigenschap (achterhaald) uit de html weg.
Met wat css ervoor in de plaats ruimt dat lekker op. ;)

De opmaak is in de vorm van een tabel gegoten, en ook dat is zwaar verouderd. Tegenwoordig wordt de opmaak met CSS geregeld (dat kan dat veel mooier), en staat in de html-code helemaal geen opmaak meer; alleen verwijzingen met classes of id's naar de styles in de css: zoals voor een goed deel al in de pagina staat.
Doctype aangepast, wat nieuwe css-styles in de <head>, tabel gewipt, kolommen gefloat.
Een strakke html blijft dan over, bestand tegen IE6 en IE7. (ook 100% valid html4.1 Strict) :)

In de broncode kan je de structuur zien: die is zo voort te zetten met de andere uitklap-links van de kolommen.

Succes!
Met vriendelijke groet,
CSShunter
___________
PS: Het "box-model" is de manier waarop breedtes, margins en paddings van een element (<div>, <p> enz.) worden gedefinieerd. Vroeger waren daarin aanzienlijke verschillen tussen de browsers, met manke websites als gevolg als je 'm in een andere browser ging bekijken dan de browser waarvoor de site gemaakt was. Vooral de oude Internet Explorers (t/m IE6) hadden daar last van; Microsoft hanteerde toen eigen opvattingen i.p.v. de internationale w3c standaarden. Daar zijn ze gelukkig van teruggekomen (toen ze merkten dat daardoor -- en door beveiligingslekken -- hun marktaandeel flink aan het zakken was). De moderne browsers kunnen allemaal goed met html-Strict omgaan: IE incluis (op een enkele uitglijder na, die bij ingewikkelde opmaak tevoorschijn kan komen). Maar dat is heel wat anders dan de volle gereedschapkist aan IE-hacks die je vroeger nodig had! - Dus over het box-model hoef je je niet druk te maken.
 
Laatst bewerkt:
Hoi CSSHunter

Dat is een antwoord waar ik heel blij van word en waar ik denk ik veel mee kan.

De hele codering ademt eigenlijk een beetje de sfeer van de vervlogen tijden. In de scripts wordt rekening gehouden met de browser Netscape 4.
Dat klopt ook wel van ik ben zelf ook bijna van vervlogen tijden. Vandaar de verouderde code.

Ik ga lekker aan de slag en heb er veel zin in om de boel een beetje te vernieuwen. Het zal wel geen xhtml worden want dat gaat me denk ik te ver, maar het zal in ieder geval wel beter worden.
Ik kwam er bij toeval achter dat IE mijn website goed weergaf omdat FF de Google reclame (voor de benodigde hosting kosten) niet meer weergaf en ik tijdelijk naar IE uitweek.
Nogmaals ontzettend bedankt

Met vriendelijke groet,
Ed
 
Hoi CSSHunter,
Als ik de zin:
<base href="http://www.smaakversterkers.eu/verklaringen/"><!-- alleen voor deze testpagina -->

weghaal in mijn artikel dan verandert de kleur van de kop van blauw in groen en ik kan niet ontdekken waar dat door komt.
 
Hoi Ed,
Hé, dat is merkwaardig. Het regeltje:
HTML:
<base href="http://www.smaakversterkers.eu/verklaringen/"><!-- alleen voor deze testpagina -->
had ik er in gezet om niet alle relatieve links op de pagina te hoeven veranderen in absolute links (anders zouden die relatieve links naar mapjes en bestanden bij mij op de server gaan, waar ze niet in staan).
Als het zonder deze regel verandert, zou dat betekenen dat in je pagina de relatieve links niet helemaal kloppen.
Of, wat ook kan, het zit 'm in de html-code van de kopregel.
Bij mij staat er:
HTML:
<h1 class="titel">Uw klachten door MSG</h1>
Deze <h1> heeft volgens het stylesheet styles.css de opdracht om groen te worden (regel 159): h1 {color: green;}. Maar een eind verder in het zelfde stylesheet (regel 402) staat dat bij de class .titel de kleur blauw moet worden: .titel (color: #0000C0;}.

Als er twee instructies voor de kleur staan, zegt het cascade-principe van de CSS dat de meest specifieke opdracht wint. In dit geval is de algemene opdracht: groen. De class van de <h1> is specifieker: bij een <h1> met class="titel" moet de kleur blauw worden.

Als de kleur toch groen wordt, staat misschien de class="titel" niet in de html voor de <h1>.
Of in de css is voor de .titel de kleur weggevallen.

Kan dat?

Met vriendelijke groet,
CSShunter
 
Hoi CSSHunter,

Ik heb de regel

HTML:
<base href="http://www.smaakversterkers.eu/verklaringen/"><!-- alleen voor deze testpagina -->
uit de tekst weggehaald en in het stylesheet styles.css h1 blauw gemaakt.
Nu werkt het wel. Ik heb wel wat bijscholing nodig blijkt wel zowel voor html als voor CSS.
Ik ga een cursus CSS zien te vinden op internet. Want mijn twee website zijn wel aan een opfrisbeurt toe.

Met vriendelijke groet,
 
Hoi Ed,
Mooi, nu kan de <h1> niet meer ontsnappen.
Ik ga een cursus CSS zien te vinden op internet.
Dat kan wel eens link zijn: want veel spul is erg verouderd, of gewoon slecht. En dat staat er dan niet bij. Maar er zijn gelukkig ook goede.
  • Deze bijvoorbeeld: www.web-garden.be/cursus-html/cursus-html/

  • Met als vervolg het gratis te downloaden boek dat onderop die pagina staat:
    klik, en er komen > 500 pagina's html+css uitleg&tips binnen in een mega-pdf. :)
Met vriendelijke groet,
CSShunter
 
Hoi CSSHunter,

Bedankt voor de link.
De site
is inderdaad een hele goede tip.
Ze schijnen niet diep in te gaan op het gebruik van een extern stylesheet, maar daar werk ik al mee het gaat uiteraard om het gebruik van CSS

Wat denk je trouwens van: http://www.html-site.nl/website_maken_voor_beginners.php
Ik weet niet of dit erg verouderd is, maar het is in het Nederlands en hoewel ik makkelijk Engels begrijp is in het Nederlands toch net iets makkelijker.

Met vriendelijke groet,
 
Laatst bewerkt:
Hoi Ed,
Ik heb eens even rondgeneusd op die site.
De eerste bladzijde met css-voorbeelden die ik bekeek, was de Width-eigenschap.
Daar staat:

width-def-a.gif

En dat had moeten zijn:

width-def-b.gif
  • In de broncode zie je ook .voorbeeld {width: 75%;} staan in plaats van .voorbeeld {width: 100px;}!
Misschien was dit net een toevalstreffer, maar al met al durf ik er dus niet mijn hand voor in het vuur te steken dat alles van deze site 100% klopt.

Voor NL tekst en uitleg (en vele voorbeelden) valt er ook veel weg te slepen uit de handleidinghtml.nl, hoewel die langzamerhand ook achterloopt op de ontwikkelingen (met name waar de resultaten in verschillende browsers besproken worden). Het beste kan je een bepaald iets altijd zelf testen in verschillende browsers!

Met vriendelijke groet,
CSShunter
___________
PS: De tip voor de Webdeveloper Toolbar voor Firefox is uitstekend!
 
Laatst bewerkt:
Hoi CSSHunter,

Wat een geluk dat je naar die website hebt gekeken. Ik vind dat toch wel een misser van de {width 100px;} want het is toch een eerste vereiste om dat goed uit te leggen.

Bedankt voor de links en ik ga verder studeren. En sinds ik weet dat er verschillen tussen browsers bestaan zal ik dat zeker testen.

Met vriendelijke groet,
 
Hoi CSSHunter,

Het lijkt me een hele uitdaging om mijn websites aan te passen aan de nieuwste visies.
Ik wil me daar ook heel graag mee bezig houden, maar als ik naar mijn websites

http://www.aspartaam.nl en
http://www.smaakversterkers.eu
kijk dan weet ik eigenlijk niet zo goed waar ik moet beginnen.
Ik heb in de loop der jaren diverse JS geïmplementeerd en als ik opnieuw zou moeten beginnen lijkt me dat heel moeilijk.
Maar dit onderwerp gaat zo een beetje off-topic kan dit ook per e-mail o.i.d?
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan