[css]Borderprobleem IE & mozilla

Pagina: 1
Acties:

  • WouterG
  • Registratie: December 2000
  • Laatst online: 17:07

WouterG

Dit is geen ondertitel

Topicstarter
Ik ben bezig met een website die gebruik maakt van CSS maar nu ben ik op een vreemd probleem gestuit. In IE 6.0 ziet alles er prima uit maar zodra ik test met mozilla of opera worden veel elementen 2 pixels breder. Ik vermoed dat dit door de borders komt want als ik die allemaal weg haal gaat het goed.

Is hier een oplossing voor te vinden of moet ik met 2 style sheets gaan werken?

  • Raymond
  • Registratie: Maart 2000
  • Laatst online: 29-08 10:04
Ik heb gemerkt dat mozilla erg strikt is in het lezen van css files.
Ik vermoed dan ook dat er 1 van de volgende 2 dingen aan de hand is:

Je hebt een tikfout (een } teveel of te weinig bijvoorbeeld)

Of je maakt gebruik van een verkeerde syntax. Ik gebruik topstyle lite, zoals die bij homesite van macormedia zit. Die kan bijvoorbeeld een hover linkje op 2 manieren formuleren. De ene werkt wel met mozilla, de andere niet :)

  • WouterG
  • Registratie: December 2000
  • Laatst online: 17:07

WouterG

Dit is geen ondertitel

Topicstarter
Ik heb een klein voorbeeld gemaakt om het wat beter uit te leggen.

Volgens mij is de code goed. De code die ik gebruik is:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#top {
        background-color: #9999CC;
        width:30px;
        height:30px;
        border-top:0px solid #000;
        border-right:0px solid #000;
        border-left:0px solid #000;
        border-bottom:0px solid #000;
        }

    #menu {
        background-color: #FFFFFF;
        width:30px;
        height:30px;
        border-top:2px solid #000;
        border-right:2px solid #000;
        border-left:2px solid #000;
        border-bottom:2px solid #000;
        }

Dit word dan de html:
code:
1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
       <link rel="stylesheet" href="bla.css" type="text/css">
    </head>
<body>
<div id='top'>
</div>
<div id='menu'>
</div>
</body>
</html>


En dit is het resultaat in mozilla en in IE 6.0:

Afbeeldingslocatie: http://62.238.224.118/pics/csstest.jpg

Verwijderd

IE maakt de border onderdeel van die 30 x 30 pixels, moz zet de border eromheen. Je zou de specs erop na moeten lezen om te weten wie er gelijk heeft, maar ik gok op moz.
Als je dat bovenste blokje nou ook een border geeft, maar dan in dezelfde kleur als z'n background, dan ziet het er waarschijnlijk beter uit.

  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Gebruik het volgende eens in je CSS:
code:
1
-moz-box-sizing: border-box;

Intentionally left blank


  • edie
  • Registratie: Februari 2002
  • Laatst online: 16:36
crisp schreef op 03 november 2002 @ 18:09:
Gebruik het volgende eens in je CSS:
code:
1
-moz-box-sizing: border-box;
En dan heb je een Mozilla-only oplossing. Dan heb je hem nog niet voor Opera.

Volgens het W3C behoort de border buiten de width die je het element geeft (http://www.w3.org/TR/REC-CSS2/visudet.html#q6):
The following constraints must hold between the other properties:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

(If the border style is 'none', use '0' as the border width.)
De width die je opgeeft in de CSS, is hier vet gemaakt.

Moz en Opera doen het dus goed; IE niet.
Je moet imho dus een aparte CSS maken voor IE (of de oplossing van -J- gebruiken).

"In America, consumption equals jobs. In these days, banks aren't lending us the money we need to buy the things we don't need to create the jobs we need to pay back the loans we can't afford." - Stephen Colbert


  • Willem2
  • Registratie: Oktober 2000
  • Laatst online: 24-08 14:05

Willem2

Ω is futile

Nou, schiet mij maar lek; maar bij mij doet hij het met 'standaard' CSS goed in alle drie de browsers...:

Afbeeldingslocatie: http://www.vddh.com/pix/browsers.png

met vlnr: Opera 6.05, Mozilla 1.1, MSIE 6

en nee, ik houd niet van voetbal... :)


  • Raymond
  • Registratie: Maart 2000
  • Laatst online: 29-08 10:04
meet eens na, zijn die boxjes wel even groot?
Jij hebt overal een border omheen, dan zou die van IE alleen maar een stukje kleiner worden. Dat valt niet echt op.

Verwijderd

eddie19 schreef op 03 november 2002 @ 18:33:

Moz en Opera doen het dus goed; IE niet.

Dit klopt. Maar ik moet zeggen dat het systeem van IE logischer is.

Verwijderd

ie5.x doet het boxmodel fout, da's gefixed sinds 6
http://www.glish.com/css/hacks.asp <- hier staat er een artikel over met een workaround (een redelijk elegant trouwens)

  • Willem2
  • Registratie: Oktober 2000
  • Laatst online: 24-08 14:05

Willem2

Ω is futile

FYI: Opera zit er voor de donker blauwe box aan de bovenkant 1 pixel (te hoog) naast; Mozilla en MSIE zijn identiek...

en nee, ik houd niet van voetbal... :)


Verwijderd

Verwijderd schreef op 03 november 2002 @ 19:13:
ie5.x doet het boxmodel fout, da's gefixed sinds 6
http://www.glish.com/css/hacks.asp <- hier staat er een artikel over met een workaround (een redelijk elegant trouwens)

IE6 doet het toch echt fout. Als je in Mozilla een width van 400 pixels opgeeft, 10 pixels padding, en ook nog eens een border van 2 pixels, dan wordt het zichtbare geheel 424 pixels breed, en terecht, volgens het door W3C beschreven box model. In Internet Explorer (6.0 en ook 6.0 SP1) is het 400 pixels, en dat is fout.

De manier van IE vind ik wel logischer. Maar nog beter zou het zijn als de width bepaalt hoe breed alles binnen de border mag zijn. De padding zou dan van de width afgetrokken worden, en dan houd je de content width over. Dat vind ik voor mijn gevoel iets natuurlijker.

Het IE box model komt dan op nummer 2, en het W3C box model vind ik toch echt het minst logische van alle 3.

  • edie
  • Registratie: Februari 2002
  • Laatst online: 16:36
Verwijderd schreef op 03 november 2002 @ 19:13:

[...]

Dit klopt. Maar ik moet zeggen dat het systeem van IE logischer is.
Daarom wouden 'ze' (W3C) dat toch veranderen in CSS3? (tenminste, ik dacht dat ik dat hier ergens had gelezen O-))

Het is iig logischer voor de programmeur om de (margin,) border en padding binnen de width te zetten.

"In America, consumption equals jobs. In these days, banks aren't lending us the money we need to buy the things we don't need to create the jobs we need to pay back the loans we can't afford." - Stephen Colbert


Verwijderd

In de laatste versie van de CSS3 box model working draft is het voor zover ik kan zien nog hetzelfde als in de CSS2 box model.

offtopic:
Overigens kun je met veel lof spreken over een aantal nieuwe properties, maar helaas komt er ook een set marquee properties :X

  • Raymond
  • Registratie: Maart 2000
  • Laatst online: 29-08 10:04
Verwijderd schreef op 03 november 2002 @ 19:43:
In de laatste versie van de CSS3 box model working draft is het voor zover ik kan zien nog hetzelfde als in de CSS2 box model.

offtopic:
Overigens kun je met veel lof spreken over een aantal nieuwe properties, maar helaas komt er ook een set marquee properties :X


8) :*) :9 :D Woei Marquee :D :9 :*) 8)

Daar zullen veel beginnende website bouwers erg blij mee zijn. Het is net zo leuk als blink :P

/einde onmeunige offtopic

  • edie
  • Registratie: Februari 2002
  • Laatst online: 16:36
Verwijderd schreef op 03 november 2002 @ 19:43:
In de laatste versie van de CSS3 box model working draft is het voor zover ik kan zien nog hetzelfde als in de CSS2 box model.
uit diezelfde link (
http://www.w3.org/TR/2002...x-20021024/#the-box-width)
The property 'box-sizing' was first proposed to provide an upgrade path for certain browsers that interpreted 'width' the wrong way. 'Box-width' and 'box-height' are proposed as improved versions of 'box-sizing'. However, newer versions of those browsers have already fixed the bug and it is not clear that these properties are really needed anymore. In cases where they could be useful on their own, it might be both more powerful and easier to use if there were a more generic solution, based on the idea of an extra box around the element, that can have not just its own width, but also other properties, such as borders, position, etc. Such an extra box can result from a transformation (XSLT, behaviors or otherwise, even something expressed in CSS itself), or from an extension of the box model, where every element has an (or as many as needed) implicit parents, addressed by a pseudo-element ':container' or similar.
Hmm... afwachten dus...

"In America, consumption equals jobs. In these days, banks aren't lending us the money we need to buy the things we don't need to create the jobs we need to pay back the loans we can't afford." - Stephen Colbert


Verwijderd


Daar heb ik dan even overheen gelezen... :)
Maar dat zou een prima oplossing zijn, het is altijd fijn als je kunt kiezen uit meerdere mogelijkheden.

Verwijderd

volgens mij is hier een tijdje terug een keer een hele discussie over geweest (geen zin om topic te zoeken :P) maar ik vind het ie boxmodel niet logisch, het is trouwens ook inconsequent, bij een plaatje zou het bijvoorbeeld idioot zijn als de border binnen het element wordt gerendered, zelfde geldt voor padding.
je geeft naar mijn mening een width op om te zorgen dt iets erin past, dingen als padding en border moeten daar dus bij opgeteld worden.

aan de andere kant zou het ook weer vreemd zijn als je een div width:100% geeft en een border van 10px ofzo, dat het element dus breder zou worden dan de pagina.

't blijft vaag, maar het zou mooi zijn als alle browsers hetzelfde deden en dat je naar believen kan omschakelen van boxmodel, of een oplossing als hierboven met extra properties

  • WouterG
  • Registratie: December 2000
  • Laatst online: 17:07

WouterG

Dit is geen ondertitel

Topicstarter
Iedereen hartelijk bedankt voor het meedenken, ik weet nu genoeg. Jammer dat er geen kant en klare oplossing is, ik ben bang dat ik nu met twee stylesheets moet gaan werken.
Een oplossing zou zijn om gewoon alle browsers aan de standaarden te laten voldoen. Jammer dat microsoft daar nu tegeningaat. Een hoop extra werk voor me.

  • Clay
  • Registratie: Oktober 1999
  • Laatst online: 22-06 13:51

Clay

cookie erbij?

dr is inderdaad een hele discussie over geweest :) ik vind persoonlijk dat borders en padding _binnen_ de gedefinieerde width en height moeten vallen, die geef je niet voor niets op, en zodra je dan css wazigheden op gaat geven valt alles uit zijn verband? nee dank je. Maar godzijdank kan je het dus instellen zoals je het hebben wil :)

maareh tomcat, 2 stylesheets zijn dus niet nodig. j verandert toch gewoon de box model in moz met css?

code:
1
box-sizing:border-box; -moz-box-sizing:border-box;

zie ook de ppk site, heeft er een hele verhandeling over geschreven.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin


  • Woudloper
  • Registratie: November 2001
  • Niet online

Woudloper

« - _ - »

Als je het mij vraagt kan je nog wel tijden door blijven discuseren over het gebruik van het box-model e.d.

Sow, had ik laatst nog een discussie met een collega over het gebruik van een volgende situatie voor een <p> Paragraph:
HTML:
1
2
3
4
p.breedt {
   width: 100%;
   padding: 10px;
}

Als je dit gebruikt krijg je altijd een horizontale scrollbar omdat CSS eerst de padding, width en andere bij elkaar optelt alvorens hij de padding ervan aftrekt, zie deze quote maar:
Box dimensions (http://www.w3c.org/doc/org.w3/css/box.html#box-dimensions)
The box width is given by the sum of the left and right margins, border, and padding, and the content width. The height is given by the sum of the top and bottom margins, border, and padding, and the content height.
Pagina: 1