[CSS] box-sizing van <button> in mozilla en IE - Softwareontwikkeling

dinsdag 29 juli 2003 14:39

Acties:

mOrPhie

❤️❤️❤️❤️🤍

Topicstarter

Ik zit in de knoop. Dit probleem is er niet alleen bij "<button", maar ik heb het probleem toevallig met een button

Dit stukje code:

HTML:

<html>
<head>
<style>
    BUTTON.Test {
        -moz-box-sizing: padding-box; 
        border-width: 1px;
        border-color: #000000;
        width: 20px;
        padding-left: 20px;
    }
</style>
</head>
<body>
    <button class="Test">hoi</button>
</body>
</html>

Wat ik varwachtte is dat de text "hoi" niet meer te zien was, omdat de padding even groot is als de breedte. Zou ik de padding 15 maken, dan zou alleen de "H" te zien moeten zijn bijvoorbeeld

En hier het plaatje van het boxing model, voor al je het niet kent

http://www.w3.org/TR/REC-CSS2/images/boxdim.gif

W3c zegt dat de uiteindelijk te renderen breedte van iets (in dit geval een button) een optelsom van de margin, padding, border en content is. Een width van 20 (width is de breedte van de 'content' dus volgens het w3c-boxing-model?) en een padding-left van 20, geeft dus een button van 40px breed. Dit is dan ook precies zoals mozilla dit doet. Mozilla volgt dus perfectemoendo het w3c echter komt dit me nu slecht uit.

Dit is niet wat ik wil namelijk.

Wat ik wil is zoals IE het rendered. Die telt namelijk de padding niet op bij het bepalen van de te renderen breedte. Zij gaan er vannuit dat padding binnen de content zit en niet tussen de Margin en de content in! Er valt iets voor te zeggen natuurlijk, maar het geeft wel een incompatibiliteit. In dit geval doet IE echter wel met het stukje HTML zoals ik wilde. Namelijk dat het het woordje "hoi" dus niet te zien is.

Nu hoorde ik van iemand dat je het boxing-model van IE in mozilla kunt simuleren middels "-moz-box-sizing: padding-box;" echter lijkt dit niet te werken. Ook "border-box" en "content-box" waren beide niet de oplossing.

Weet iemand een oplossing zodat ik krijg wat ik wil? Dus dat padding niet wordt meegenomen in de breedte-bepaling van een button in mozilla. En dat ik ook in mozilla (en netscape dus) het woordje "hoi" niet te zien krijg,

_{disclaimer: vertrouw me erop dat ik dit wil voor het maken van een feature in een webapp, het is dus niet nutteloos en ik wil, nu mijn nieuwsgierigheid gegroeit is, hier wel een antwoord op weten, in plaats van alternatieven voor de feature}

Een experimentele community-site: https://technobabblenerdtalk.nl/. DM voor invite code.

dinsdag 29 juli 2003 14:46

Acties:

Verwijderd

Ik begrijp niet precies wat je nu voor elkaar wilt krijgen?

- wil je een knop van 40px zonder content.
- wil je een knop van 20px zonder content.
- wil je een knop met de text 'hoi' van 40px
- wil je een knop met de text 'hoi' van 20px
- wil je een knop die niet zichtbaar is

graag wat meer uitleg...

dinsdag 29 juli 2003 14:52

Acties:

Verwijderd

ik vermoed dat je alle knoppen dezelfde breedte wil hebben, ongeacht de content...

Maak dan een transparant gifje van 1 px groot, en voeg binnen iedere button toe:

<br>[img]"./blank.gif"[/img]</img>

of zoiets... (ff uit mijn hoofd)
zo zet die op de volgende regel van je tekst die pixel, uitgerekt naar de breedte die jij wil...

[edit]
na nog een keer doorlezen ben ik er vrij zeker van dat dit NIET is wat je bedoeld

maar goed...

[ Voor 19% gewijzigd door Verwijderd op 29-07-2003 14:54 ]

dinsdag 29 juli 2003 14:55

Acties:

BtM909

Watch out Guys...

Verwijderd schreef op 29 July 2003 @ 14:52:
ik vermoed dat je alle knoppen dezelfde breedte wil hebben, ongeacht de content...

Maak dan een transparant gifje van 1 px groot, en voeg binnen iedere button toe:

<br>[img]"./blank.gif"[/img]</img>

of zoiets... (ff uit mijn hoofd)
zo zet die op de volgende regel van je tekst die pixel, uitgerekt naar de breedte die jij wil...

Pixel plaatje in een button

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 29 juli 2003 15:04

Acties:

mOrPhie

❤️❤️❤️❤️🤍

Topicstarter

Verwijderd schreef op 29 July 2003 @ 14:46:
Ik begrijp niet precies wat je nu voor elkaar wilt krijgen?

- wil je een knop van 40px zonder content.
- wil je een knop van 20px zonder content.
- wil je een knop met de text 'hoi' van 40px
- wil je een knop met de text 'hoi' van 20px
- wil je een knop die niet zichtbaar is

graag wat meer uitleg...

Nog meer uitleg

Wat ik wil is een button van 20px breed waar je "hoi" niet ziet omdat deze 20px is ge-padding-d. Dit doet IE wel (zet de code maar 'ns in IE), maar Mozilla niet (terwijl mozilla het wel volgens de w3c doet en dus opzich niets fout doet). Mozilla maakt de button namelijk 40 breed, en laat "hoi" beginnen van de 20px. Ik zoek dus een oplossing waardoor ik het IE resultaat, in mozilla voor elkaar krijg. Het idee is dat als ik de padding op 0 zet, dat dan "hoi" wel te zien is, terwijl de breedte hetzelfde blijft(20px).

Verwijderd schreef op 29 July 2003 @ 14:52:
[edit]
na nog een keer doorlezen ben ik er vrij zeker van dat dit NIET is wat je bedoeld maar goed...

Dit is inderdaad niet wat ik wil.

Een experimentele community-site: https://technobabblenerdtalk.nl/. DM voor invite code.

dinsdag 29 juli 2003 15:05

Acties:

Verwijderd

misschien een paar &nbsp's toevoegen voor de text 'hoi'

dinsdag 29 juli 2003 15:09

Acties:

Verwijderd

volgens mij komt dit gewoon doordat je button zich aanpast aan de text die erin staat, dus oprekt. Lost overflow: hidden niks op?

let erop dat css op buttons niet altijd lekker wil werken bij alle browsers, dus ik kan je niks garanderen

. Ik heb wel het sterke vermoeden dat mijn verhaaltje bij een spannetje ofzo wel opgaat

@_Birkoff: als je niet weet waar je over praat zeg dan niets, witmarge om text binnen een element regelen we met padding en zeker niet door het toevoegen van &nbsp's

[ Voor 34% gewijzigd door Verwijderd op 29-07-2003 15:12 ]

dinsdag 29 juli 2003 15:10

Acties:

mOrPhie

❤️❤️❤️❤️🤍

Topicstarter

Verwijderd schreef op 29 July 2003 @ 15:05:
misschien een paar &nbsp's toevoegen voor de text 'hoi'

Misschien dat jij uit het topic moet blijven als je de vraag niet begrijpt of niet leest. Als ik de padding op 0 zet moet "hoi" wel te lezen zijn namelijk en dit is verder een CSS vraag en "een paar &nbsp's" is dus niet de oplossing.

Een experimentele community-site: https://technobabblenerdtalk.nl/. DM voor invite code.

dinsdag 29 juli 2003 15:13

Acties:

BtM909

Watch out Guys...

Verwijderd schreef op 29 juli 2003 @ 15:09:
volgens mij komt dit gewoon doordat je button zich aanpast aan de text die erin staat, dus oprekt. Lost overflow: hidden niks op?

Daar zat ik ook al naar te kijken, maar dat maakt geen verschil... Ik zit nog te kijken naar verschil van optellen van de verschillende box-models.

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 29 juli 2003 15:16

Acties:

mOrPhie

❤️❤️❤️❤️🤍

Topicstarter

Verwijderd schreef op 29 July 2003 @ 15:09:
volgens mij komt dit gewoon doordat je button zich aanpast aan de text die erin staat, dus oprekt. Lost overflow: hidden niks op?

Hier hoopte ik ook op, maar ik denk dat enige vorm van overflow niet wordt ondersteund in een button. Ergo: overflow: auto; bracht mij niet de verwachtte standaard scrollbar van mozilla.

Verder als ik het woordje "hoi" langer maak breid hij én naar rechts, maar _ook_ naar links uit. Om het geheel nog verwarrender te maken.

Het lijkt er dus ook dat de content inderdaad parte speelt als deze te lang is, en daarom de padding soms negeert (als de content groter woord, terwijl een vaste width is geset).

--edit--
Als ik de content weg haal (ik haal "hoi" dus weg), dan blijft de complete breedte wel gewoon 40 in mozilla.

In IE dus 20 gewoon nog steeds.

[ Voor 13% gewijzigd door mOrPhie op 29-07-2003 15:23 ]

Een experimentele community-site: https://technobabblenerdtalk.nl/. DM voor invite code.

dinsdag 29 juli 2003 15:33

Acties:

JeroenE

Het idee is dat als ik de padding op 0 zet, dat dan "hoi" wel te zien is, terwijl de breedte hetzelfde blijft(20px).

Als ik dit begrijp is je enige doel dus het wel of niet zichtbaar laten zijn van de tekst "hoi" in de button.

In plaats van een 'feature' in IE proberen na te doen in mozilla kan je niet gewoon beter de kleur van de tekst aanpassen? Zet de kleur hetzelfde als de background om de tekst niet te laten zien en zet hem op iets anders om de tekst wel te laten zien.

dinsdag 29 juli 2003 15:36

Acties:

Verwijderd

mozilla zit dus nog steeds in het ongewenste boxmodel. Hoe zit het met een div waarbij je hetzelfde probeert? definieren van een display: block; wil ook nog wel eens wat uitmaken. (omdat inline elementen geen width hebben geloof ik, maar dat weet ik effe helemaal niet zeker meer)

dinsdag 29 juli 2003 15:38

Acties:

mOrPhie

❤️❤️❤️❤️🤍

Topicstarter

jeroene schreef op 29 July 2003 @ 15:33:
[...]

In plaats van een 'feature' in IE proberen na te doen in mozilla kan je niet gewoon beter de kleur van de tekst aanpassen? Zet de kleur hetzelfde als de background om de tekst niet te laten zien en zet hem op iets anders om de tekst wel te laten zien.

Ja, dit had ik er natuurlijk bij moeten vertellen.

In de button zit wel een background-image. En als ik de text dus een andere kleur geef, dan zie je die text alsnog.

Een experimentele community-site: https://technobabblenerdtalk.nl/. DM voor invite code.

dinsdag 29 juli 2003 16:09

Acties:

JeroenE

Ja, dit had ik er natuurlijk bij moeten vertellen. In de button zit wel een background-image. En als ik de text dus een andere kleur geef, dan zie je die text alsnog.

Tja, dat stond er in je code niet bij

Je kan wel de font-size op 0px zetten, maar dan moet je ineens ook de height gaan meegeven anders worden de buttons ook 'plat'. Als je dat doet komt er in mijn IE wel weer een - in de box te staan: het font wordt blijkbaar niet echt 0px, maar er blijft er altijd 1tje over?

Bovendien werkt het natuurlijk niet als je in de browser instelt dat fontsize's e.d. genegeerd moeten worden. Hm, deze post wordt er zo niet nuttiger op

Edit: Toch nog een nuttige post geworden

Als je dit doet werkt het wel onder Mozilla en IE (niet alle versies geprobeert, dus dat moet je zelf maar even doen)

code:

    BUTTON.Test {
        border-width: 1px;
        border-color: #000000;
        width: 20px;
        max-width: 20px;
        padding-left: 40px;
    }

Let op dat de padding wel groter moet zijn dan je max-width anders krijg je alsnog een gedeelte van je tekst te zien in Mozilla!

[ Voor 28% gewijzigd door JeroenE op 29-07-2003 16:23 ]

dinsdag 29 juli 2003 16:50

Acties:

mOrPhie

❤️❤️❤️❤️🤍

Topicstarter

jeroene schreef op 29 July 2003 @ 16:09:
[...]
Edit: Toch nog een nuttige post geworden

Als je dit doet werkt het wel onder Mozilla en IE (niet alle versies geprobeert, dus dat moet je zelf maar even doen)
code:
1
2
3
4
5
6
7
    BUTTON.Test {
        border-width: 1px;
        border-color: #000000;
        width: 20px;
        max-width: 20px;
        padding-left: 40px;
    }
Let op dat de padding wel groter moet zijn dan je max-width anders krijg je alsnog een gedeelte van je tekst te zien in Mozilla!

Held!
Het mag dan misschien een houtje touwtje oplossing zijn, het werkt in elk geval wel. Ik weet alleen niet wat er gaat gebeuren als de text (content) langer gaat worden. Maar dat zoek ik nog wel 'n keer uit. (men mag dus gewoon nog met suggesties komen

)

Tnx!

Een experimentele community-site: https://technobabblenerdtalk.nl/. DM voor invite code.

woensdag 30 juli 2003 00:35

Acties:

creative8500

freedom.

HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <title>working example</title>
  <style type="text/css">
  button.test {
    border: 1px solid black;
    width: 20px;
    height: 20px; }
  button span {
    display: none; }

  a img {
    border: 0px; }
  </style>
 </head>
 <body>
  <p>
   <button class="test"><span>hoi</span></button>
  </p>
  <p>
   <a href="http://validator.w3.org/check/referer">
    [img]"http://www.w3.org/Icons/valid-xhtml11"
[/img]
   </a>
  </p>
 </body>
</html>

working example
Nu zijn ze in Mozilla Firebird 0.6 en Internet Explorer 6 20*20 precies, het is goede CSS (geen -moz- meer) en de borders werken ook goed in Mozilla

_{piece-of-cake, said a w3c-nerd}

[ Voor 43% gewijzigd door creative8500 op 30-07-2003 00:48 ]

woensdag 30 juli 2003 00:45

Acties:

crisp

Devver

Pixelated

waarom moet het eigenlijk per-se een button zijn? Het verwondert me niets dat de CSS regels daar soms nog niet volledig op werken. Met een beetje DHTML en wat divjes en images kan je toch ook hetzelfde bereiken?

Intentionally left blank

woensdag 30 juli 2003 12:09

Acties:

mOrPhie

❤️❤️❤️❤️🤍

Topicstarter

creative8500 schreef op 30 juli 2003 @ 00:35:

working example
Nu zijn ze in Mozilla Firebird 0.6 en Internet Explorer 6 20*20 precies, het is goede CSS (geen -moz- meer) en de borders werken ook goed in Mozilla
_{piece-of-cake, said a w3c-nerd}

Dat is nog een mooiere oplossing inderdaad. Tnx

crisp schreef op 30 July 2003 @ 00:45:
waarom moet het eigenlijk per-se een button zijn? Het verwondert me niets dat de CSS regels daar soms nog niet volledig op werken. Met een beetje DHTML en wat divjes en images kan je toch ook hetzelfde bereiken?

Uit mijn startpost de eerste regel:

Ik zit in de knoop. Dit probleem is er niet alleen bij "<button", maar ik heb het probleem toevallig met een button

[ Voor 33% gewijzigd door mOrPhie op 30-07-2003 12:11 ]

Een experimentele community-site: https://technobabblenerdtalk.nl/. DM voor invite code.

donderdag 31 juli 2003 21:44

Acties:

dArtagnan

Een voor allen, allen voor een

crisp schreef op 30 July 2003 @ 00:45:
waarom moet het eigenlijk per-se een button zijn? Het verwondert me niets dat de CSS regels daar soms nog niet volledig op werken. Met een beetje DHTML en wat divjes en images kan je toch ook hetzelfde bereiken?

Ik heb hetzelfde probleem met een div en kom er ook niet uit. Ik heb twee kolommen naast elkaar. De linker is 535pixels breed en de ander 225pixels. Nu werkt het perfect in IE. Maar als ik het wil bekijken in mozilla dan wordt mijn linker kolom een stuk breeder. Dit komt door de padding die ik gebruik die telt mozilla er bij op. Is dit een hopeloos probleem of is ook hier iets aan te doen?

mijn css bestand:

code:

#leftcontent
{
    float: left;
    width: 535px;
    height: 750px;
    text-align: justify;
    overflow: visible;
    padding: 30px;
    background-color: #ffffff;
    font-family: verdana, helvetic;
    font-size: 10pt;
    color: black;
}
#rightcontent
{
    float: left;
    width: 225px;
    background-color: #D7DBEE;
    margin-left: 1px;
}

en de twee divjes:

code:

<div id="leftcontent">
    {INHOUD}
</div>

<div id="rightcontent">
    iets anders hier
</div>

donderdag 31 juli 2003 21:49

Acties:

Rickets

Finger and a shift

Cascading Stylesheet:

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

http://www.xs4all.nl/~ppk/css2tests/box.html

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.

donderdag 31 juli 2003 21:52

Acties:

dArtagnan

Een voor allen, allen voor een

Rickets schreef op 31 July 2003 @ 21:49:
Cascading Stylesheet:
1
2
3
4
5
*
{
    box-sizing      : border-box;
    -moz-box-sizing : border-box;
}
http://www.xs4all.nl/~ppk/css2tests/box.html

Exact wat ik zocht. Maar toch vind ik het wel wat vaag van mozilla.

donderdag 31 juli 2003 22:12

Acties:

creative8500

freedom.

Koraalduivel schreef op 31 July 2003 @ 21:52:
[...]

Exact wat ik zocht. Maar toch vind ik het wel wat vaag van mozilla.

Nee, Mozilla doet het goed. De width die je opgeeft is: border-links + padding-links + content + padding-rechts + border-rechts. Dat is ook waar je in css de width voor opgeeft. Internet Explorer doet het fout, daar is de width: content. Da's te weinig dus

donderdag 31 juli 2003 23:11

Acties:

dArtagnan

Een voor allen, allen voor een

creative8500 schreef op 31 July 2003 @ 22:12:
[...]
Nee, Mozilla doet het goed. De width die je opgeeft is: border-links + padding-links + content + padding-rechts + border-rechts. Dat is ook waar je in css de width voor opgeeft. Internet Explorer doet het fout, daar is de width: content. Da's te weinig dus

Goed, dat weet ik maar soms is mozilla iets te strikt. Zeker als je internet explorer gewent bent.

vrijdag 1 augustus 2003 01:02

Acties:

mOrPhie

❤️❤️❤️❤️🤍

Topicstarter

creative8500 schreef op 31 juli 2003 @ 22:12:
[...]
Nee, Mozilla doet het goed. De width die je opgeeft is: border-links + padding-links + content + padding-rechts + border-rechts. Dat is ook waar je in css de width voor opgeeft. Internet Explorer doet het fout, daar is de width: content. Da's te weinig dus

Tis andersom. w3c stelt dat css-width de content is, en internetexplorer doet de css-width vanaf de border. De uiteindelijke breedte van de box (zoals die op je beeldscherm komt) in internet explorer wordt berekend middels: Content+margin+border (= css-width volgens IE... zonder padding dus). En in mozilla, die het dus volgens w3c-standaarden doet: Content + padding + margin+border, maar stelt alleen de content als de css-width (w3c-compliant). Ofwel, als je Width + Padding tezamen gebruikt wordt dit in Mozilla de breedte van Width en Padding samen. In IE wordt dit alleen de Width, omdat IE Padding als overflowable onderdeel van de Width ziet. En daarom worden IE-boxes in zo'n geval kleiner

Koraalduivel schreef op 31 July 2003 @ 23:11:
[...]

Goed, dat weet ik maar soms is mozilla iets te strikt. Zeker als je internet explorer gewent bent.

Naja, het is juist goed dat mozilla zo strict is omdat je dan weet waar je aan toe bent en dus altijd terug kan vinden op de w3c-pages welk boxingmodel gebruikt wordt.

Het probleem is dat de termen doen vermoeden dat bijvoorbeeld "width" de complete box inhoud, terwijl dit w3c-gezien alleen de content is, wat dus een hoop ingewikkelde misverstanden met zich mee brengt. Daarom wordt er wel 'ns geroepen dat w3c gewoon een verkeerd boxing-model gebruikt en dat dient aan te passen naar de wensen van de usergroups. Mozilla zelf, zoals je in de nieuwsgroepen en mailings kunt lezen, is zelf ook niet gecharmeerd van het boxing-model van w3c, maar is wel consequent in het standaard ondersteunen van de standaarden die w3c maakt. Zij bieden wel een extra optie om het boxingmodel aan te passen, maar doen dit niet standaard, zoals IE dat wel doet en hiermee dus inspeelt op het humeur van de devver, die beter gestemt is bij IE, dan bij mozilla, terwijl mozilla niks fout doet.

Tis ietwat krom natuurlijk, maar zoals je in dit topic ziet is alles wel weer w3c-like op te lossen, echter als je met incompliant browser te maken hebt moet je je soms door rare bochten wringen.

_{Moraal: Width had gewoon ContentWidth moeten heten. Dan had IE er ook niet omheen gekunt}

[ Voor 33% gewijzigd door mOrPhie op 01-08-2003 01:24 ]

Een experimentele community-site: https://technobabblenerdtalk.nl/. DM voor invite code.