[CSS] Pixel verschil tussen Firefox en Iexplore - Softwareontwikkeling

donderdag 23 december 2004 15:07

Acties:

Topicstarter

Inleiding
Na al een tijdje te zoeken naar wat nou het probleem veroorzaakt of oplost, probeer ik het hier. Ik ben dus bezig met het maken van me eigen website, en heb daarvoor een design gemaakt. Tijdens het maken van de website ben ik altijd bezig in firefox, aangezien die zich aan de standaarden houdt. Later kijk ik pas in Iexplore om te kijken hoe ik het bij die ook er mooi uit kan laten zien.

Het probleem
In firefox was het dus helemaal perfect, maar in iexplore ging het hele rechtergedeelte van mijn website, naar onderen. Een teken dat er voor die div niet genoeg ruimte is. Dus ik maak de div waar mijn menu inkomt dus 2 pixels minder breed, en in iexplore past het dus, maar nu heb ik in firefox dus het probleem dat er 2 pixels witte ruimte tussen de twee divs komt.

Specificaties
De breedte van de website is gebaseerd op de breedte van de browser van de bezoeker (relatief) en de hoogte is vast (absoluut). De opmaak taal is HTML 4.01 strict, en er wordt alleen maar gebruik gemaakt van divs en daarnaast css voor de rest van de opmaak. Mijn HTML en mijn css document zijn allebei valid.

Plaatjes ter verduidelijking
Afbeeldingslocatie: http://img134.exs.cx/img134/449/iexplore0cg.png

Afbeeldingslocatie: http://img134.exs.cx/img134/449/iexplore0cg.png

Internet exporer 6.0

Afbeeldingslocatie: http://img134.exs.cx/img134/2468/firefox6au.png

Firefox 1.0

Eigen input
Wat heb ik al allemaal geprobeerd:

overflow-x en overflow-y gebruikt.
padding en margin attributen aangebracht met waarde 0px.
Search gebruikt (google, got), maar heb niks verwants kunnen vinden.

Wat denk ik zelf?
Het ligt waarschijnlijk aan dat firefox en iexplore allebei andere standaarden gebruiken. Hierdoor gaat er waarschijnlijk iets mis met de borders.\

Nawoord
Alvast bedankt voor jullie hulp en een dikke Afbeeldingslocatie: http://crew.tweakers.net/SmartDoDo/gotverkiezing2004/pet.gif

Afbeeldingslocatie: http://crew.tweakers.net/SmartDoDo/gotverkiezing2004/pet.gif

voor iedereen die een nuttig antwoord durft te plaatsen.

Code

HTML:

 <!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="nl">
  <head>
    <title>Standard Style</title>
    <link rel="stylesheet" type="text/css" href="styles/standard.css">          
  </head>   
  <body>
    <div id="container">                
      <div id="imagecont">
        <div id="image"></div>
      </div>
      <div id="menu"></div>             
      <div id="maincont">
        <div id="top"><span id="left"><b><a href="#">link</a></b></span><span id="right"><a href="#"><b>home</b></a> | <a href="#">sitemap</a> | <a href="#">search</a></span></div>          
        <div id="main">
        </div>  
        <div id="bottom"></div> 
      </div>
      <div class="spacer"></div>
    </div>
  </body>
</html>

Cascading Stylesheet:

    body {
        background: url('../img/back.png') repeat-x;
        color: #000000;
        font-family: Verdana;
        font-size: 10px;
        margin: 0px;
    }
    
    div#container {
      width: 100%;
      height: 400px;
        position: absolute;
        margin-top: -200px;
        top: 50%;     
      background: #f4f3ef;
        border-width: 1px 0px;
        border-style: solid;
        border-color: #504b35;  
    overflow-y: hidden;         
    }
    
    div#imagecont {
        width: 400px;
        height: 400px;
        position: relative;     
        float: left;
        background: #dedacb;
        border-width: 0px 1px 0px 0px;
        border-style: solid;
        border-color: #504b35;      
    }
    
    div#image {
      width: 330px;
      height: 330px;
      margin: 35px;
      background: url('../img/bos.jpg');
        border: 1px solid #000000;    
    }
    
    div#menu {
      width: 28px;
      height: 100%;
        position: relative;     
        float: left;    
      background: #dedacb;  
        border-width: 0px 1px 0px 0px;
        border-style: solid;
        border-color: #504b35;        
    }
    
    div#maincont {
        position: relative;
        float: right;
      width: 100%;
      margin-left: -432px;            
    }

    div#top {
      height: 13px;
      margin-left: 432px;
      padding: 8px;
      background: #dedacb;
        border-width: 0px 0px 1px 0px;
        border-style: solid;
        border-color: #504b35;
    }
    
      span#left {
        float: left;
        padding-left: 15px;
        color: #ffffff;
      }
      
      span#right {
        float: right;
      }
    
    div#main {
      height: 300px;
      margin-left: 455px;    
      margin-top: 20px;
      margin-bottom: 20px;
    padding-right: 20px;
      overflow: auto;
    }
    
    div#bottom {
      height: 29px;
      margin-left: 432px;
      background: #dedacb;
        border-width: 1px 0px 0px 0px;
        border-style: solid;
        border-color: #504b35;        
    }   
    
    div.spacer {
        clear: both;
    }

Oplossing
Gebruik de volgende code in je html document (de eerste <link> staat al je css in, voor alle browsers, in de 2e link staat de css die speciaal voor iexplore zijn):

HTML:

    <link rel="stylesheet" type="text/css" href="styles/standard.css">          
    <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="styles/iexplore.css">            
    <![endif]-->

En het volgende gaat in iexplore.css:

Cascading Stylesheet:

1
2
3

    div#menu {
      width: 28px; 
    }

Dit is natuurlijk als voorbeeld, en kan je aanpassen naar eigen wens.

Wat hebben we hier van geleerd

Twee weten meer dan een
Gebruik altijd een goede doctype (in dit geval strict), krijg je geen boxmodel problemen mee
Gebruik conditional statements om css speciaal voor iexplore te laten gelden.

[ Voor 132% gewijzigd door dev icey op 25-12-2004 11:22 ]

donderdag 23 december 2004 15:11

Acties:

Woudloper

« - _ - »

Hmm, vind het lastig om zo 1, 2, 3 een antwoord te geven zonder dat ik daadwerkelijk de CSS source e.d. gezien heb van je pagina. Het kan namelijk te maken hebben met een box model probleem (margin, padding, border), maar het kan evengoed een andere oorzaak hebben.

Overigens is je startpost erg netjes qua opbouw!

donderdag 23 december 2004 15:12

Acties:

Willem

dev icey:
Het ligt waarschijnlijk aan dat firefox en iexplore allebei andere standaarden gebruiken. Hierdoor gaat er waarschijnlijk iets mis met de borders.

Dat wil dus eigenlijk al zeggen dat je ze bijna nooit exact hetzelfde krijgt...

[ Voor 5% gewijzigd door Willem op 23-12-2004 15:11 ]

donderdag 23 december 2004 15:12

Acties:

T-MOB

Heb je misschien een beetje code, zodat we niet hoeven te gokken wat er mis kan zijn?

Iets wat btw zowieso werkt is gewoon een hack gebruiken voor IE.

Cascading Stylesheet:

/* mogelijkheid 1*/
#element { width: 198px; /*voor ie*/ }
#parent>#element { width: 200px; /*standards compliant only*/ }

/*mogelijkheid 2*/

#element { 
  width: 200px;
  _width: 198px; /* Sja, IE eet het */
}

[ Voor 67% gewijzigd door T-MOB op 23-12-2004 15:16 . Reden: \0/ CSS highlighter ]

Regeren is vooruitschuiven

donderdag 23 december 2004 15:14

Acties:

Woudloper

« - _ - »

T-MOB schreef op donderdag 23 december 2004 @ 15:12:
Heb je misschien een beetje code, zodat we niet hoeven te gokken wat er mis kan zijn?

Die heeft hij inmiddels na een edit ook geplaatst....

donderdag 23 december 2004 15:15

Acties:

dev icey

Topicstarter

Woudloper schreef op donderdag 23 december 2004 @ 15:11:
Hmm, vind het lastig om zo 1, 2, 3 een antwoord te geven zonder dat ik daadwerkelijk de CSS source e.d. gezien heb van je pagina. Het kan namelijk te maken hebben met een box model probleem (margin, padding, border), maar het kan evengoed een andere oorzaak hebben.

Overigens is je startpost erg netjes qua opbouw!

Dank je, als ik van jullie hulp krijg, kan ik er tenminste een beetje moeite voor doen, dat het voor jullie wat overzichtelijker wordt.

De source heb ik al toegevoegd, ik voeg dat altijd nadat ik gepost heb toe, zodat er niks mis gaat

Overigens heb ik nietszeggende css weggehaald, het is al zo'n lap tekst (het gaat hier vooral om de a'tjes).

willem169 schreef op donderdag 23 december 2004 @ 15:12:
[...]

Dat wil dus eigenlijk al zeggen dat je ze bijna nooit exact hetzelfde krijgt...

Dat is juist het probleem. Maar ik hoopte dus dat via deze weg, misschien nog iemand een idee had om het te kunnen oplossen, zolang het geen ranzige code wordt.

[ Voor 7% gewijzigd door dev icey op 23-12-2004 15:16 ]

donderdag 23 december 2004 15:16

Acties:

Woudloper

« - _ - »

Als je overigens je margin-left van de div #top op 430px zet werkt hij in Firefox correct.

donderdag 23 december 2004 15:17

Acties:

dev icey

Topicstarter

Woudloper schreef op donderdag 23 december 2004 @ 15:16:
Als je overigens je margin-left van de div #top op 430px zet werkt hij in Firefox correct.

Ja dat klopt, maar lost mijn probleem niet op. In firefox werkte het ook perfect, maar dan weer niet in iexplore. En natuurlijk vica versa. Maar ik wil een cross-browser site, die ook nog een beetje mooi is.

donderdag 23 december 2004 15:20

Acties:

Woudloper

« - _ - »

dev icey schreef op donderdag 23 december 2004 @ 15:17:
Jah dat klopt, maar lost mijn probleem niet op. In firefox werkte het ook perfect, maar dan weer niet in iexplore. En natuurlijk vica versa. Maar ik wil een cross-browser site, die ook nog een beetje mooi is.

Als je 'Quirk' rendering aan IE toevoegd kan je wellicht ook nog beter uitzoeken wat er fout gaan, aangezien de pagina dan min-of-meer hetzelfde gedraagt onder Internet Explorer als onder Firefox.

Voeg een comment line toe aan je pagina:

HTML:

<!-- Quirk mode -->
<html>
 ....
</html>

donderdag 23 december 2004 15:22

Acties:

dev icey

Topicstarter

T-MOB schreef op donderdag 23 december 2004 @ 15:12:
Heb je misschien een beetje code, zodat we niet hoeven te gokken wat er mis kan zijn?

Iets wat btw zowieso werkt is gewoon een hack gebruiken voor IE.
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
/* mogelijkheid 1*/
#element { width: 198px; /*voor ie*/ }
#parent>#element { width: 200px; /*standards compliant only*/ }

/*mogelijkheid 2*/

#element { 
  width: 200px;
  _width: 198px; /* Sja, IE eet het */
}

Mogelijkheid 2 deed het hem, maar nu is mijn css niet meer valid en ik vind het alsnog ranzige methode om iets op te lossen. Denk dat precies hetzelfde geld voor mogelijkheid 1?

Woudloper schreef op donderdag 23 december 2004 @ 15:20:
[...]

Als je 'Quirk' rendering aan IE toevoegd kan je wellicht ook nog beter uitzoeken wat er fout gaan, aangezien de pagina dan min-of-meer hetzelfde gedraagt onder Internet Explorer als onder Firefox.

Voeg een comment line toe aan je pagina:
HTML:
1
2
3
4

<html>
 ....
</html>

Hier krijg ik dus dat er 1 pixel ruimte tussen de 2 divs zit.

[ Voor 27% gewijzigd door dev icey op 23-12-2004 15:24 ]

donderdag 23 december 2004 15:25

Acties:

Woudloper

« - _ - »

dev icey schreef op donderdag 23 december 2004 @ 15:22:
Hier krijg ik dus dat er 1 pixel ruimte tussen de 2 divs zit.

Klopt, en probeer vanuit die situatie je pagina aan te passen zodat het werkt! Wellicht in combinatie met 'mogelijk 1' zoals hierboven is beschreven...

donderdag 23 december 2004 15:28

Acties:

dev icey

Topicstarter

Woudloper schreef op donderdag 23 december 2004 @ 15:25:
[...]

Klopt, en probeer vanuit die situatie je pagina aan te passen zodat het werkt! Wellicht in combinatie met 'mogelijk 1' zoals hierboven is beschreven...

Oke, dat zal ik zeker doen. Ik moet nu in iedergeval weg, naar mijn werk. Dus de komende uren zal ik even niet antwoorden. Vanavond zal ik even verder gaan prutsen, en ik houd jullie op de hoogte. In iedergeval hartstikke bedankt voor jullie hulp zover.

donderdag 23 december 2004 15:32

Acties:

crisp

Devver

Pixelated

Woudloper schreef op donderdag 23 december 2004 @ 15:20:
[...]

Als je 'Quirk' rendering aan IE toevoegd kan je wellicht ook nog beter uitzoeken wat er fout gaan, aangezien de pagina dan min-of-meer hetzelfde gedraagt onder Internet Explorer als onder Firefox.

Voeg een comment line toe aan je pagina:
HTML:
1
2
3
4

<html>
 ....
</html>

Het is juist andersom: IE6 in strict rendermode gebruikt net als Firefox het W3C boxmodel; als je IE in quirksmode gaat zetten krijg je juist verschillen vwb boxmodel rendering...

Intentionally left blank

donderdag 23 december 2004 15:38

Acties:

Verwijderd

Snelle reactie, zonder diepgaand te lezen
Als je het nog steeds valid wil laten zijn moet je voor IE de width verklaring van een div als enige gebruiken en daarbinnen nog een div met de border/padding.

code:

<div style="width: 200px;">
<div style="border: 1px solid black;">
<!-- content-->
</div>
</div>

IE rekent de border + width anders dan Firefox namelijk.

donderdag 23 december 2004 15:39

Acties:

T-MOB

dev icey schreef op donderdag 23 december 2004 @ 15:22:
[...]
Mogelijkheid 2 deed het hem, maar nu is mijn css niet meer valid en ik vind het alsnog ranzige methode om iets op te lossen. Denk dat precies hetzelfde geld voor mogelijkheid 1?

Nee, methode 1 maakte gebruik van de '>' selector die gewoon geldige CSS is, maar niet wordt ondersteund door IE. Er is ook nog een bug qua important! geloof ik in IE die je ook kunt gebruiken om aparte CSS te voeren aan IE zonder de validator te laten nekken.

Zelf zal de validator me aan mijn *** roesten als het gaat om fixes voor IE (ik heb meetsl meer IE-gebruikers dan validators die mijn site bezoeken

). Mijn gok is dat als IE7 uitkomt de standaarden wél worden nageleefd (nou ja, iig qua CSS). Ik gebruik dus altijd de underscore hack omdat die het duidelijkst is in je source. Gewoon gelijk achter de standaard-code voeg je de IE-versie in.

Regeren is vooruitschuiven

donderdag 23 december 2004 16:04

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op donderdag 23 december 2004 @ 15:38:
Snelle reactie, zonder diepgaand te lezen
Als je het nog steeds valid wil laten zijn moet je voor IE de width verklaring van een div als enige gebruiken en daarbinnen nog een div met de border/padding.
code:
1
2
3
4
5
<div style="width: 200px;">
<div style="border: 1px solid black;">

</div>
</div>
IE rekent de border + width anders dan Firefox namelijk.

Enkel IE < 6 en IE6 in quirksmode hoor

Daarnaast ga ik dan liever voor een extra stylesheet die ik mbv een conditional comment aan IE voer; extra elementen aan je markup toevoegen om boxmodel-problemen te omzeilen vind ik eerlijk gezegd niet zo netjes... (en CSS-hacks ook niet

)

Intentionally left blank

donderdag 23 december 2004 16:33

Acties:

JoeKurr

Past niet in een MiG-21

Ik ben in het verleden ook tegen dit probleem aan gelopen, maar er is een truc waarmee je het box-model van IE en Mozilla gelijk krijgt.
Volgens mij is het nog valid CSS ook

Dit zet ik altijd standaard bovenaan mijn stylesheets:

Cascading Stylesheet:

* {
  box-sizing      : border-box;
  -moz-box-sizing : border-box;
}

Op deze manier valt bij beide browsers de border binnen de box en heb je geen last meer van ruimte tussen elementen in andere browsers.

Hier staat meer uitleg.

[ Voor 8% gewijzigd door JoeKurr op 23-12-2004 16:34 ]

Dutch Flanker Display Team
You can't be lost if you don't care where you are

donderdag 23 december 2004 16:51

Acties:

T-MOB

JoeKurr schreef op donderdag 23 december 2004 @ 16:33:
Ik ben in het verleden ook tegen dit probleem aan gelopen, maar er is een truc waarmee je het box-model van IE en Mozilla gelijk krijgt.
Volgens mij is het nog valid CSS ook

En wat doen Opera, Konqueror, Safari, etc, etc, etc daarmee? Juist niets (iig tot CSS3 volledig ondersteund is)! Dat soort trucjes is juist waarom de helft van de websites alleen werken in IE. (ow en valid is het evenmin, maar goed, daar geef ik dan wat minder om)...

[ Voor 4% gewijzigd door T-MOB op 23-12-2004 16:53 ]

Regeren is vooruitschuiven

zaterdag 25 december 2004 11:10

Acties:

dev icey

Topicstarter

JoeKurr schreef op donderdag 23 december 2004 @ 16:33:
Ik ben in het verleden ook tegen dit probleem aan gelopen, maar er is een truc waarmee je het box-model van IE en Mozilla gelijk krijgt.
Volgens mij is het nog valid CSS ook

Dit zet ik altijd standaard bovenaan mijn stylesheets:
Cascading Stylesheet:
1
2
3
4
* {
  box-sizing      : border-box;
  -moz-box-sizing : border-box;
}
Op deze manier valt bij beide browsers de border binnen de box en heb je geen last meer van ruimte tussen elementen in andere browsers.

Hier staat meer uitleg.

Volgens de site zelf heeft het geen zin. Om maar even een stuk tekst te quoten:

If you use a doctype to switch to 'Strict mode', Explorer 6 Windows and Opera 7 switch to the W3C box model.

Ik gebruik dus strict mode, en dan zou dus iexplore en firefox allebei volgens de w3c standaard werken. Deze 'hack' werkt, na het uitgeprobeerd te hebben, ook niet. Wat crisp dus al zei.

crisp schreef op donderdag 23 december 2004 @ 16:04:
Daarnaast ga ik dan liever voor een extra stylesheet die ik mbv een conditional comment aan IE voer;

Naar aanleiding van wat jij zei, ben ik gaan zoeken en kwam ik op dit uit. Ik neem aan dat jij dus ook het volgende bedoeld?

HTML:

<!--[if IE]>
<style>
div.logo {
    margin-left: 10px;
}
</style>
<![endif]-->

Ik vind het op deze methode, maar wel zonde dat je dan toch css in je html document moet gaan maken.

Het probleem is opgelost, zie topicstart voor oplossing
Mensen bedankt voor jullie hulp. Heb gebruik gemaakt van de conditional statements, en een aparte css document, voor iexplore, gemaakt met css declaraties die de originele moeten gaan overrulen.

[ Voor 20% gewijzigd door dev icey op 25-12-2004 11:17 ]