[CSS] IE5 != IE6 Borders

[André]

Heeft iemand ervaring met het verschil van de plaatsing van de border in IE5 ten opzichte van IE6?

Stel:

code:

<style>
  a {
    border: 1px solid #FFFFFF;
    width: 40px;
    height: 40px;
  }
</style>

Dit zou betekenen dat in IE5 het object inclusief border 40px breed en hoog is maar in IE6 word het object 42px breed en hoog. Wat is nu de juiste weergave
Moet een border er echt omheen of erin.

En hoe los ik zoiets op? Moet ik een browserdetectie doen en aan de hand daarvan de juiste breedte en hoogte zetten

[dominic]

Volgens mij niet, deze A is 40x40 px met een 1px border om het element heen (41x41px dus) in IE5 en IE6 volgens mij, of ik moet iets over het hoofd zien..

[Willem]

Volgens mij moet een border er omheen. (Uit het boxmodel W3 (http://www.w3.org/TR/REC-CSS2/box.html) wordt dit niet duidelijk) en sja, je kunt het inderdaad met een browsersniffer doen.. aan de andere kant why bother.

IE5 is nou ook weer niet de meest geweldige browser, en denk je dat de mensen die die browser gebruiken daar heel erg om geven?

[dominic]

willem169 schreef op 31 December 2002 @ 10:01:
bla

IE5 is nou ook weer niet de meest geweldige browser, en denk je dat de mensen die die browser gebruiken daar heel erg om geven?

Pas je op dat je niet gaat flamen?

[André]

willem169 schreef op 31 December 2002 @ 10:01:
Volgens mij moet een border er omheen. (Uit het boxmodel W3 (http://www.w3.org/TR/REC-CSS2/box.html) wordt dit niet duidelijk) en sja, je kunt het inderdaad met een browsersniffer doen.. aan de andere kant why bother.

Why bother?

Kijk eens naar mijn site, daar zijn de buttons gewone A's met een border. En aangezien ik met een grid werk moet het precies goed zijn.

dominic schreef op 31 December 2002 @ 10:01:
Volgens mij niet, deze A is 40x40 px met een 1px border om het element heen (41x41px dus) in IE5 en IE6 volgens mij, of ik moet iets over het hoofd zien..

42x42px dus.

Je hebt boven, onder, links en rechts een border.

[ Voor 28% gewijzigd door André op 31-12-2002 10:07 ]

[MBV]

probeer het eens met een browser die w3c compatible is (mozilla bijv). Ik ben geen expert hiermee, maar zoals het er staat is het 40*40 met een 1 pixel breed randje eromheen, dus 42*42. Ik dacht ook dat IE iets meer compatible is met w3c, dus het zou kunnen dat dat de standaard is.

[André]

MBV schreef op 31 december 2002 @ 10:09:
Ik dacht ook dat IE iets meer compatible is met w3c, dus het zou kunnen dat dat de standaard is.

Oke, maar welke IE is meer standaard: 5 of 6

[Willem]

Nee hoor ik flame niet tegenover IE 5, alleen denk ik dat het maar net ligt aan je prioriteiten. Als het dus op de pixel exact moet zoals Yogho aangeeft in de post hierboven, tja dan kan ik me voorstellen dat je je er druk om maakt, anders zou ik me om een pixeltje meer of minder echt geen zorgen maken

[Verwijderd]

6 en die doet het inderdaad goed.
W3C over borders van een tabel.

[..]This attributes specifies the width (in pixels only) of the frame around a table

[dominic]

willem169 schreef op 31 December 2002 @ 10:13:
Nee hoor ik flame niet tegenover IE 5, alleen denk ik dat het maar net ligt aan je prioriteiten. Als het dus op de pixel exact moet zoals Yogho aangeeft in de post hierboven, tja dan kan ik me voorstellen dat je je er druk om maakt, anders zou ik me om een pixeltje meer of minder echt geen zorgen maken

Sorry dan begreep ik je verkeerd, het leek erop alsof je zei: "Gebruikers van IE letten toch niet op layoutzaken en hebben geen benul van precisie."

[Willem]

Nee integendeel

Maar het was niet helemaal duidelijk wat Yogho bedoelde, en nu wel. En ik heb werkelijk waar geen idee hoe of wat, het zou best kunnen dat IE op dit punt gewoon buggy is. En dan heb je een probleem, althans; Dan zou je met CSS voor verschillende browsers aan de gang moeten.

[André]

Verwijderd schreef op 31 december 2002 @ 10:15:
6 en die doet het inderdaad goed.

Mmmm, dus dat word een browsercheck....
Ranzige oplossing, een stylesheet zou overal hetzelfde moeten werken.

Raar trouwens dat in IE5 de border in het object komt, als ik een lijst om een foto zet maak ik die lijst toch ook niet zo groot als die foto maar zorg ik ervoor dat de lijst om de foto heen gaat.

willem169 schreef op 31 december 2002 @ 10:19:
Nee integendeel

Maar het was niet helemaal duidelijk wat Yogho bedoelde, en nu wel. En ik heb werkelijk waar geen idee hoe of wat, het zou best kunnen dat IE op dit punt gewoon buggy is. En dan heb je een probleem, althans; Dan zou je met CSS voor verschillende browsers aan de gang moeten.

Of 1 stylesheet, en dan met JS de laatste aanpassingen doen ivm compatibiliteit.

[ Voor 35% gewijzigd door André op 31-12-2002 10:21 ]

[crisp]

handig topic over boxmodel verschillen: [rml][ CSS] Box Model tweaking[/rml]
voorbeelden: http://www.xs4all.nl/~ppk/css2tests/box.html

Ik meen trouwens dat als je IE6 in quircks mode laat renderen dat het resultaat hetzelfde is als in IE5.x - ik kan helaas hier geen testcase uitproberen...

[André]

crisp schreef op 31 December 2002 @ 10:28:
handig topic over boxmodel verschillen: [rml][ CSS] Box Model tweaking[/rml]
voorbeelden: http://www.xs4all.nl/~ppk/css2tests/box.html

Ik meen trouwens dat als je IE6 in quircks mode laat renderen dat het resultaat hetzelfde is als in IE5.x - ik kan helaas hier geen testcase uitproberen...

Ik heb het even doorgenomen, en je kunt dus zelf instellen welk box-model je wilt gebruiken. Maar dat werkt alleen op IE MAC. En het staat in de CSS3 standaard.

[Verwijderd]

IE mac en Mozilla je kan ze bijvoorbeeld allebei in de IE PC modus schakelen, maar wat je net zei over een image dat klopt wel, een border rond een image of een object tag gedraagt zich anders dan een border om een table.

[Willem]

Yogho:
Ik heb het even doorgenomen, en je kunt dus zelf instellen welk box-model je wilt gebruiken. Maar dat werkt alleen op IE MAC. En het staat in de CSS3 standaard.

WAT Er werkt iets wèl op IE 5 Mac ?!
Zou de krant maar bellen...

Als d'r 1 browser is waar ik dus geen rekening mee zou houden, dan was het wel Internet Explorer versie > 5.x voor Mac. Maar that's just me

[André]

Verwijderd schreef op 31 December 2002 @ 10:43:
IE mac en Mozilla je kan ze bijvoorbeeld allebei in de IE PC modus schakelen, maar wat je net zei over een image dat klopt wel, een border rond een image of een object tag gedraagt zich anders dan een border om een table.

Tja, waarom zouden ze ook alles hetzelfde laten werken Dit houd de spanning er wel in

willem169 schreef op 31 december 2002 @ 10:45:

[...]


WAT Er werkt iets wèl op IE 5 Mac ?!
Zou de krant maar bellen...

Als d'r 1 browser is waar ik dus geen rekening mee zou houden, dan was het wel Internet Explorer versie > 5.x voor Mac. Maar that's just me

* André pakt telefoon en belt journalist

En inderdaad met IE5 Mac hou ik ook geen rekening. Ik hou trouwens helemaal geen rekening met Mac maar dat komt omdat ik daarvoor geen testmogelijkheden heb.

[ Voor 41% gewijzigd door André op 31-12-2002 10:48 ]

[crisp]

Yogho schreef op 31 december 2002 @ 10:35:
[...]

Ik heb het even doorgenomen, en je kunt dus zelf instellen welk box-model je wilt gebruiken. Maar dat werkt alleen op IE MAC. En het staat in de CSS3 standaard.

...en je kan Mozilla dwingen het MS-model te gebruiken. Ik kan me zelf trouwens niet herinneren dat ik ooit problemen heb gehad mbt verschillen tussen IE5.x en IE6.
Zou het kunnen zijn omdat een <a> element inline is en geen block-level?
Probeer eens display: block toe te voegen aan de css.

[André]

crisp schreef op 31 December 2002 @ 10:46:
[...]

...en je kan Mozilla dwingen het MS-model te gebruiken. Ik kan me zelf trouwens niet herinneren dat ik ooit problemen heb gehad mbt verschillen tussen IE5.x en IE6.
Zou het kunnen zijn omdat een <a> element inline is en geen block-level?
Probeer eens display: block toe te voegen aan de css.

Dat is een goeie. Dit ga ik proberen...

Edit:

Tot mijn spijt kom ik er achter dat ik geen A's gebruik maar DIV's. Maar dat neemt niet weg dat het border probleem blijft.

En ik kan IE wel quirky laten renderen maar ik heb toch liever een doctype bovenin de html staan.

[ Voor 22% gewijzigd door André op 31-12-2002 10:53 ]

[Verwijderd]

neem IE 6 als basis en doe zoals Crisp al zei kies voor Mozilla en evt. IE 5 mac het bijbehorende box -model.

HTML:

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