[CSS] Image resize fout in opera

[We Are Borg]

* We Are Borg gaat zo steeds vaker in W&G komen

Ik wil graag een image een vaste height en width geven. Erg simpel te doen.

Cascading Stylesheet:

.imageverklein {
height: 60px;
width: 60px;
border: 1 px solid black;
}

HTML:

[img]"http://www.eensite.nl/eenplaatje.jpg"[/img]

Dit werkt dus prima in Internet Explorer en Mozilla. Nu doet Opera om een of andere rede moeilijk en 'mis' ik een paar pixels bij de height. Het plaatje wordt slechts 57 pixels hoog i.p.v. de 60. "Storend die paar pixels?". Ja, eerlijk gezegd wel . Een plaatje van 60x60 wordt hierdoor onscherp en dat is niet nodig vind ik .

Een simpele search actie levert weinig op helaas. Dit geeft veel resultaten over javascript resize, maar dat wil ik niet. Ik wil simpel een plaatje een vaste hoogte en breedte mee geven en ALS het plaatje dan toevallig te groot zou zijn, wordt dit meteen opgevangen.

Nu ben ik eens verder gaan kijken en wat blijkt: GoT heeft dit probleem ook. Het volgende plaatje geeft 'het probleem' goed weer. Het icoon van pelle is het slachttoffer.


Linker icoon is in Internet Explorer (werkt prima).
Het middelste icoon is in Opera (mis net een paar pixels).
Het rechter icoon is in Mozilla (werkt prima).

2 plaatjes eronder is de uitwerking van mijn code. Opera en Internet Explorer waarbij de kleinere die van Opera is.

Waarom pakt Opera de verkeerde height? Ik mis ongeveer 3 pixels, maar kan er best eentje naast zitten.

_{Ja, dit noemen ze nu idd pixelneuken . Het valt mij op en wil het graag oplossen. Zal uiteraard als er oplossing is even cheatah/crisp aanschieten voor de GoT template}

[crisp]

1 woord: boxmodel. Het verschil is de border

[Clay]

afhankelijk van het model valt een border binnen of buiten de opgegeven width en height. zie de talloze boxmodeltopics .

En DIT vind ik nou het schoolvoorbeeld van de logica van dat rare boxmodel. Een image is inderdaad x bij y pixels. Een border moet daar BUITEN vallen als je een width of height opgeeft, niet erbinnen, want dat vervormt dus je inhoud. En ja dan wordt de totale dimensie weer net iets anders, maar het klopt wel.

Eigenlijk is dat boxmodel dus best logisch.

[BtM909]

crisp schreef op 11 november 2003 @ 17:58:

Clay schreef op 11 november 2003 @ 17:58:

Ipv van verklaren, help TS eens op weg

[rml][ css] boxmodel gedonder en aanpakproblemen[/rml]

[Clay]

GoT is geen helpdesk, maar een discussiemedium!

[BtM909]

Clay schreef op 11 november 2003 @ 18:04:
GoT is geen helpdesk, maar een discussiemedium!

Wat is het nut van een discussie, als we het allemaal met elkaar eens zijn

[We Are Borg]

Bedankt voor de informatie . Had eigelijk wel kunnen bedenken dat die border het verschil was, maar kwam er niet op.

Ik heb nu deze site gevonden en ik denk dat er wel uit ga komen. Zo snel te zien houdt IE en Mozilla dezelfde boxing model erop na en Opera niet. Maar goed, ga me na het eten er even in verdiepen. Bedankt nogmaals.

offtopic:
Crisp: moet ik hier een bug melding van maken zodat het ook op de GoT bug fix planning komt te staan of weet je het nu wel ?

[crisp]

We Are Borg schreef op 11 november 2003 @ 18:21:
Bedankt voor de informatie . Had eigelijk wel kunnen bedenken dat die border het verschil was, maar kwam er niet op.

Ik heb nu deze site gevonden en ik denk dat er wel uit ga komen. Zo snel te zien houdt IE en Mozilla dezelfde boxing model erop na en Opera niet. Maar goed, ga me na het eten er even in verdiepen. Bedankt nogmaals.

offtopic:
Crisp: moet ik hier een bug melding van maken zodat het ook op de GoT bug fix planning komt te staan of weet je het nu wel ?

Het verbaast mij eigenlijk dat Mozilla het hier wel 'goed' doet. Bij Opera sta ik elke keer weer voor verassingen, ik heb het idee dat hij de ene keer weer wel de padding-box of border-box gebruikt, en de andere keer weer niet. Net hoe de wind waait zo'n beetje; ze proberen vaak wel heel krampachtig ervoor te zorgen dat de rendering zoveel mogelijk gelijk is aan IE, en in dit soort dingen gaan ze dan ineens weer de standaard volgen.

En ik onthoud het wel, zal er een style="box-sizing:border-box" inzetten (of een class toekennen).

[Verwijderd]

Vraagje: waarom telt Opera de border alleen mee in de hoogte en niet in de breedte?

Als dit werkelijk een box model probleem zou zijn zou ik verwachten dat het hele plaatje in Opera verkleind wordt (twee keer 1px border eraf in de breedte en in de hoogte), niet alleen in verticale richting. Volgens mij is dit gewoon een bug in Opera.

Even een voorbeeld om dit te verduidelijken:

• Een plaatje van 60x60 pixels:

• Plaatje opgenomen in HTML:

code:

[img]"qm.png"[/img]

of:

code:

[img]"qm.png"[/img]

• Van links naar rechts: weergave in Firebird 0.7+, IE 5.5, Opera 7.21:



• Wat ik zou verwachten als dit werkelijk een box-probleem zou zijn:


Er zijn twee work-arounds: verpak het plaatje in een DIV en geef niet het plaatje maar de DIV een border mee. Of: resize het plaatje in een tekenprogramma (of met Irfanview ofzo) en geef géén afmetingen mee in de HTML code of in de CSS:

code:

[img]"qm.png"[/img]

[ Voor 152% gewijzigd door Verwijderd op 11-11-2003 19:53 ]

[We Are Borg]

crisp schreef op 11 november 2003 @ 18:35:
[...]

Het verbaast mij eigenlijk dat Mozilla het hier wel 'goed' doet.
Bij Opera sta ik elke keer weer voor verassingen, ik heb het idee dat hij de ene keer weer wel de padding-box of border-box gebruikt, en de andere keer weer niet. Net hoe de wind waait zo'n beetje; ze proberen vaak wel heel krampachtig ervoor te zorgen dat de rendering zoveel mogelijk gelijk is aan IE, en in dit soort dingen gaan ze dan ineens weer de standaard volgen.

Ik heb al gemerkt dat Opera soms erg raar kan reageren t.o.v. andere browsers zoals Mozilla/IE.

En ik onthoud het wel, zal er een style="box-sizing:border-box" inzetten (of een class toekennen).

Ik heb dus het verhaal doorgelezen op deze pagina en weer een hoop bijgeleerd maar een oplossing is er nog niet .

Helemaal onderaan de pagina vertelt hij ook het volgende:

I added margin-box on the off chance that any browser might start supporting it, currently none does.

Nu zal deze info wel een beetje out of date zijn (hij heeft al een nieuwe website en Opera is al uit zijn 7.0 beta, maar blijkbaar werkt de ondersteuning nog niet lekker.

De volgende code heb ik toegevoegd aan mijn CSS die ik in de startpost geef:

Cascading Stylesheet:

.imageverklein {
height: 60px;
width: 60px;
border: 1 px solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

Het resultaat is eigelijk dat Mozilla nu niet liev bezig is:



Plaatje 1 is IE
Plaatje 2 is Mozilla
Plaatje 3 is Opera
Plaatje 4 is Mozilla met een andere -moz-box-sizing:

Opera en IE zijn dus hetzelfde, alleen mozilla ligt dwars. Ik heb de volgende moz box sizing toegepast:

-moz-box-sizing: border-box;
-moz-box-sizing: content-box;
-moz-box-sizing: padding-box;

_bron

Allemaal geen resultaat. Het blijft net wat anders dan in Opera en IE. Voor de duidelijkheid plaatje 4 onder de 2 gedaan om te laten zien dat de breedte niet klopt. Hoogte klopt dus wel perfect (zie je niet, maar heb het er naast gelegd).

Hoe krijg ik dit goed ?

Note:
Het rare is trouwens ook dat de breedte van plaatje 1 en 3 (IE en Opera) 60 is, terwijl de hoogte weer 57/58 pixels is (ben niet goed in meten maar mis 2 of 3 pixels). Plaatje 2 is dus mozilla met -moz-box-sizing: border-box; en die is 60 bij 60. Kortom. Opera in IE halen nu 3 pixels van de hoogte af en IE en Opera vormen nu het probleem

* We Are Borg snapt er helemaal niks meer van . Wat doe ik fout?

[ Voor 16% gewijzigd door We Are Borg op 11-11-2003 19:17 ]

[crisp]

We Are Borg schreef op 11 november 2003 @ 19:07:
[...]
Hoe krijg ik dit goed ?

HTML:

<div style="border:1px solid black"><img src="blaat.gif" style="height:60px;width:60px" alt="" /></div>

[We Are Borg]

Even hoop geedit. Is hoop veranderd aan mijn tekst

[Verwijderd]

We Are Borg schreef op 11 november 2003 @ 19:17:
Even hoop geedit. Is hoop veranderd aan mijn tekst

En aan de mijne: "MORA wijzigde dit bericht 11-11-2003 19:53 (152%)"

[We Are Borg]

crisp schreef op 11 november 2003 @ 19:15:
[...]

HTML:

<div style="border:1px solid black">
<img src="blaat.gif" style="height:60px;width:60px" 
alt="" /></div>

Werkt super in Opera/Mozilla! Ik heb aan de div ook een height en width mee gegeven, maar dat komt door mijn html code . Internet explorer maakt de border om een of andere domme reden 2 pixels groter in height.

Bedankt MORA voor het uitleggen waarom je de border nu in de div moet gooien. Was even niet zo snel duidelijk maar je post maakte het snel begrijpbaar.

Thanks!

---

Ik heb dus nu de volgende code:

HTML:

<table> 
<tr>
<td>
<div class="blaat1">
[img]"http://www.planet.nl/~terps407/sylvieicon.jpg"[/img]
</div>
</td>
</tr>
</table>

Cascading Stylesheet:

.blaat1 {
border: 1px solid black;
height: 60px;
width: 60px;
}

.blaat2 {
height: 60px;
width: 60px;
}

Werkt heerlijk in Opera en Mozilla, alleen IE gooit er een heel klein beetje lege ruimte onder het icoon voordat de border wordt afgemaakt. Natuurlijk even plaatje om te verduidelijken.



Ik heb allereerst mijn totale code gestript tot dit omdat ik anders bang was dat iets anders in de code hier voor zorgde. Nu puur dit over en het werkt dus niet in IE.

Ik heb al de height: 60px; en width: 60px; toegevoegd aan mijn div class vanwege wat andere code, maar als je dat weg haalt, werkt het nog steeds niet

[ Voor 102% gewijzigd door We Are Borg op 11-11-2003 21:05 . Reden: layout verneuking verholpen ]

[crisp]

zoals ik net al zei @IRC: die lege ruimte onder het plaatje in IE komt me bekent voor, een display:block op de image of een <br /> erachter lost het op

[We Are Borg]

Ik heb voor de <br/> gekozen. Dit werkt idd heerlijk, thanks again

[Sendy]

Lost een

code:

vertical-align: bottom;

niet die lege ruimte op?

[Verwijderd]

Overigens heb ik hier nog eens verder naar gezocht in de Opera forums en ook navraag gedaan in het MozillaZine forum en het probleem dat Opera de border in de hoogte (maar niet in de breedte) meetelt blijkt een bekende bug te zijn. Geen box-model probleem, dus!

Zie o.a. dit draadje in de Opera forums, waaruit blijkt dat het in Opera 7.20 en eerder wel goed werkt (dat wil zeggen: precies zoals in Mozilla). Binnenkort komt Opera 7.22 uit; dan moet deze bug als het goed is gefixt zijn.

[ Voor 21% gewijzigd door Verwijderd op 12-11-2003 03:57 ]

[Verwijderd]

Okee, zojuist heb ik Opera 7.22 geïnstalleerd. Helaas is de bug nog steeds aanwezig, dus voorlopig blijft die work-around noodzakelijk als je de image borders goed wilt krijgen in Opera.

(Vóór de edit dacht ik even dat het probleem was opgelost, maar helaas: ik keek verkeerd.)

[ Voor 100% gewijzigd door Verwijderd op 13-11-2003 03:22 ]

[Wolfboy]

mag ik vragen waar je 7.22 vandaan hebt?
7.21 is de nieuwste en het beta forum is gesloten

[Verwijderd]

Hm, beetje late reactie, maar ik had hem gewoon van de frontpage van Opera, hoor. Niks geheimzinnigs aan (7.22 is vooral een security update).