[CSS] Background-image in border

[Verwijderd]

Het gaat om het volgende:

Firefox:


IE:


Het witte wat je ziet is een border om de div linksboven, a 10px breed. Het probleem is dat het plaatje van de gekrulde hoek (een background-image) in FF netjes buiten de border rendert, maar in IE er middenin. Is er een manier om dit op te lossen, anders dan een nieuwe div aanmaken voor het witte?

Hier is de CSS voor de div waar de background-image in zit:

code:

{background-color: #ededed;
 border-width: 0px 10px 10px 10px;
 border-color: #fff;
 border-style: solid;
 padding-bottom: 10px;
 background-image: url('images/_side.gif');
 background-position: bottom right;
 background-repeat: no-repeat;
}

[Verwijderd]

Gebruik je een doctype (en zo ja, welke)?

[Verwijderd]

HTML 4.01 Transitional, kwil nie aan de strict want ik doe nogal wat aan <a target> enzo

[JHS]

Met of zonder URL ? Of eigenlijk, in welke modus zit IE volgens deze pagina? En als 'ie in quirksmode zit zou ik een ander doctype uitkiezen die IE wel in standardmode duwt .

[Verwijderd]

Met url

Voordak vragen krijg die ik niet kan beantwoorden, ik heb em ff draaiend gezet op http://foto.trijsberg.nl/foto/default.asp

(nee, hij valideert voor geen kant, zover ben ik nog niet)

[JHS]

Zaken voor een doctype zoals comments halen IE uit standardsmode. Die zou ik dus even weghalen .

[Verwijderd]

Done, probleem nog niet gefixt

[Chimera]

Box Model Hack

[Verwijderd]

Chimera schreef op woensdag 26 april 2006 @ 23:32:
Box Model Hack

Dit zou ook zonder hack moeten kunnen lijkt me.

edit: Even getest net. Wanneer je een height toevoegt werkt het wel goed in IE. Ik dacht zelf aan een height van 0, maar waar IE 'm dan wel mee laat schalen met de inhoud doet FF dat niet. Ik heb alleen snel je css gekopieerd, dus ik weet verder niet hoe dat komt.

[ Voor 37% gewijzigd door Verwijderd op 27-04-2006 08:33 ]

[Verwijderd]

Is dat niet altijd al zo geweest dat height verschillend wordt geïnterpreteerd door IE en FF? wat height doet voor IE doet min-height voor FF, dacht ik

[Verwijderd]

in FF ziet hij er bij mij helemaal niet uit. alles staat door elkaar (kan nu ff geen sshot posten)
in IE is hij wel goed

[BtM909]

Verwijderd schreef op woensdag 26 april 2006 @ 22:50:
Met url

Wil je dit voortaan ook wat duidelijker vermelden? Simpele antwoorden van 2 a 3 woorden gaan ook normaliter in de prullenbak, sinds ze eigenlijk niet zo heel veel toevoegen. Daarnaast komt je topic dan ook vrij snel over als een afhaalgerecht topic waar je alleen maar op je antwoord wacht

[Verwijderd]

Verwijderd schreef op donderdag 27 april 2006 @ 11:54:
in FF ziet hij er bij mij helemaal niet uit. alles staat door elkaar (kan nu ff geen sshot posten)
in IE is hij wel goed

Klopt, ik was de oplossing van crazaay aan het testen. Zoals hij al zei zakte mijn hele layout inelkaar. Hij is nu weer zoals hij zou moeten zijn.

[Verwijderd]

Verwijderd schreef op donderdag 27 april 2006 @ 11:42:
Is dat niet altijd al zo geweest dat height verschillend wordt geïnterpreteerd door IE en FF? wat height doet voor IE doet min-height voor FF, dacht ik

Niet echt. Min-height wordt gewoon niet ondersteund door IE. Verder doet height in principe voor IE en FF hetzelfde: de hoogte aangeven. Het enige verschil waar ik tegenaan liep in de zeer snelle testopstelling was de manier waarop er met overflow om werd gegaan.

Verwijderd schreef op donderdag 27 april 2006 @ 12:13:
Klopt, ik was de oplossing van crazaay aan het testen. Zoals hij al zei zakte mijn hele layout inelkaar. Hij is nu weer zoals hij zou moeten zijn.

Maar in IE werkt het wél

[ Voor 22% gewijzigd door Verwijderd op 27-04-2006 12:18 ]

[Verwijderd]

Verwijderd schreef op donderdag 27 april 2006 @ 12:17:
Het enige verschil waar ik tegenaan liep in de zeer snelle testopstelling was de manier waarop er met overflow om werd gegaan.

Yup, dat bedoel ik. IMO waar in IE altijd met height de minimale hoogte wordt bedoeld (dus groeit mee met overflow), is in FF de hoogte ingesteld met height vast. in FF doet min-height dus wat in IE height doet. Toch?

Maar in IE werkt het wél

Ik heb height er nu weer uitgehaald, met als gevolg dat alles weer netjes de juiste hoogte heeft. Maar m'n krulletje is nog steeds half verstopt

Ik weet dat er een hack is om zowel height als min-height te gebruiken, maar ik los et liever zonder hacks op.

[ Voor 9% gewijzigd door Verwijderd op 27-04-2006 12:39 . Reden: Toevoeging ]

[JHS]

Je hebt daar in het geheel geen hack voor nodig? Althans niet voor het gebruik van height in IE en min-height in FF: conditional comments .

[Verwijderd]

Mijn excuses dat ik conditional comments onder de noemer hacks gooi.

Ik heb het volgende aan m'n pagina toegevoegd

code:

<!--[if IE]>
<style>
div.imgdiv  { height: 0px;}
</style>
<![endif]-->

Hiermee lijkt het probleem opgelost Maar als iemand een nettere manier weet hoor ik het graag.

Wat is trouwens de beste manier om in een .CSS bestand alleen op IE te filteren?

[ Voor 7% gewijzigd door Verwijderd op 27-04-2006 15:59 ]

[Boelie-Boelie]

Verwijderd schreef op donderdag 27 april 2006 @ 15:58:

code:

<!--[if IE]>
<style>
div.imgdiv  { height: 0px;}
</style>
<![endif]-->

[..]
Wat is trouwens de beste manier om in een .CSS bestand alleen op IE te filteren?

Ik zou er <style type="text/css"> van maken.

Je kunt het beste IE-specifieke styling toevoegen m.b.v. conditional comments. Zie bijv. Quirksmode voor specifiekere conditional comments.