[html/css] Ronde hoeken i.c.m. ware-kleuren.

[Onbekend]

Inleiding:
Ik gebruik ronde hoeken op de site volgens het liquidcorners verhaal.
(Zie http://home.tiscali.nl/de...ners/liquidcorners-nl.htm)

Dat houdt het volgende in:

HTML:

    <div class="MainBox">
    <div class="TopLeftBox"></div><div class="TopRightBox"></div>
        <div class="ClientBox">
            Hier staat dan de tekst.        
        </div>
    <div class="BottomLeftBox"></div><div class="BottomRightBox"></div>
    </div>

Cascading Stylesheet:

div.TopLeftBox {
    background-position:    top left;
    background-image:       url('Images/TopLeft.gif');
    background-repeat:      no-repeat;
    margin-right:           8px;
    height:                 8px;    
    font-size:              2px;    /*IE*/
    padding:                0px;
}

div.TopRightBox {
    background-position:    top right;  
    background-image:       url('Images/TopRight.gif');
    background-repeat:      no-repeat;
    height:                 8px;
    margin-top:             -8px;
    margin-left:            8px;
    font-size:              2px;    /*IE*/
    padding:                0px;
}

div.BottomLeftBox {
    background-position:    bottom left;
    background-image:       url('Images/BottomLeft.gif');
    background-repeat:      no-repeat;
    margin-right:           8px;
    height:                 8px;
    font-size:              2px;    /*IE*/
    padding:                0px;
}

div.BottomRightBox {
    background-position:    bottom right;   
    background-image:       url('Images/BottomRight.gif');
    background-repeat:      no-repeat;
    height:                 8px;
    margin-top:             -8px;
    margin-left:            8px;
    font-size:              2px;    /*IE*/
    padding:                0px;
}

Elk plaatje is 600x8 pixels groot en heeft aan één van de kanten een afgeronde hoek waarvan de buitenkant transparant is.

Werking:
Even een samenvatting voor wat het precies doet:

• Met behulp van "background-position" kan ik de ankers (uitlijning) van het plaatje bepalen.
• Bij de rechter afbeeldingen staat "margin-top" op -8 om de linker en rechter div naast elkaar te zetten. Als ik dat niet zou doen komen ze onderelkaar te staan.
• Met de andere margins zorg ik ervoor dat de linker div niet over de rechter div wordt geplaatst. (Een soortgelijk voorbeeld is hier te vinden: http://home.tiscali.nl/de...top-overlapping380x18.gif)

Dit heb ik uitgebreid getest en de techniek werkt perfect.

Probleem:
Maar nu heb ik het probleem dat de kleuren van de gifjes iets anders zijn dan op de rest van de site. Op de site zelf gebruik ik alleen maar kleuren uit het veilige webpalet van 216 kleuren (dit is gelijkmatig verdeelt over 32-bit kleuren). Een gif-plaatje geeft maar 256 weer (maar dit is gelijkmatig verdeelt over 8-bit kleuren).
Totaal heb ik 4 verschillende kleuren (+ één transparante kleur) in het plaatje zitten.

Geteste oplossingen:

• PNG gebruiken i.p.v. GIF.
  FF werkt daarmee goed, maar IE6+7 geeft geen transparante kleur weer.
  Door gebruik te maken van het filter "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Images/TopLeft.PNG', sizingMethod='none');" lukt het me wel om ze transparant af te beelden, maar deze kan ik nu niet meer goed positioneren. D.w.z. de afbeelding van de linker div links uitlijnen en de afbeelding van de rechter div rechts uitlijnen.
• Het gebruiken van een 32-bit GIF-afbeelding.
  Het is namelijk mogelijk een index (van max 256 kleuren) in een GIF-afbeelding toe te voegen.
  Helaas ondersteunt de WinXP imageviewer, IE én zelfs FF niet eens dit formaat GIF terwijl het wel een standaard is!

Meer mogelijkheden heb ik niet gevonden. Het lijkt wel of ik de enige ben met dit probleem.

Heeft iemand een oplossing hiervoor?
Ik hoop niet dat ik terug moet vallen op tabellen of een ander oud gebruik?

[BalusC]

Is dit geen oplossing? http://www.html.it/articoli/nifty/index.html

[killercow]

Ik gebruik altjid gewoon de css regels om dit doe te voegen ana browsers die het wel kunnen.
Pech voor IE gebruikers, maar so be it, die nemen het hele internet toch niet echt serieus.

-moz-border-radius op een div met een border doet precies wat je wilt.
safari ondersteund zowel de normale css3 regel: border-radius, als de -moz-border-radius

Opera nodersteunde het, maar dit staat momenteel uit for some reason.

[Verwijderd]

Als je de 'denkwijze' precies omdraaid, heb je geen problemen meer. Dus in plaats van transparante hoeken en vulling de kleur die je wilt hebben, maak je de hoeken wit of de kleur van je background en de rest transparant. Kun je nog steeds dezelfde positionering gebruiken en de exacte kleurcode via css opgeven. Blijft er ook nog wat over als er 'zonder images' gebrowsed wordt.

[Blaise]

Ik gebruik altjid gewoon de css regels om dit doe te voegen ana browsers die het wel kunnen.
Pech voor IE gebruikers, maar so be it, die nemen het hele internet toch niet echt serieus.

Misschien dat Microsoft bepaalde zaken valt te verwijten, maar waarom zouden IE gebruikers het internet niet serieus nemen?

Ik zie geen enkele reden om 70-80% van de bezoekers een mindere website voor te schotelen omdat hun browser specificaties van een standaard die nog in ontwikkeling is (CSS3 dus), nog niet heeft geimplementeerd.

[Onbekend]

@BalusC: De Nifty corners kan ik niet (gemakkelijk) toepassen.
Dit omdat ik langs de ronde hoeken ook nog een klein randje (in een andere kleur) heb.

@killercow: Graag wil ik ook dat IE6 en IE7 gebruikers zonder problemen de site kunnen bekijken.
Net zoals Blaise al schreef hebben de meeste gebruikers een IE-versie.


@Goose-2-: Ik heb een effen achtergrond waardoor ik dit inderdaad zou kunnen toepassen.
Echter, IE negeert bij mij de positie van de rechterhoeken. Deze komen precies in het midden te staan doordat ik de AlphaImageLoader gebruik.

[ibmos2warp]

Ook onbekend schreef op woensdag 18 april 2007 @ 20:48:
@BalusC: De Nifty corners kan ik niet (gemakkelijk) toepassen.
Dit omdat ik langs de ronde hoeken ook nog een klein randje (in een andere kleur) heb.

En dat is een probleem? Kijk eens naar de voorbeelden van de nieuwere versie.

[Onbekend]

Ik heb na bijna een week eindelijk de ronde hoeken werkend.

De PNG afbeeldingen heb ik aan de kant gegooid en ik gebruik nu de techniek van Nifty corners.
(Ik wist alleen van de oudere versie af en niet van die nieuwe.)

Een nadeel van die Nifty corners was dat de borders maar 1px breed zijn.
Ik heb eerst de gehele code van Nifty doorgespit hoe het allemaal in z'n werk ging, en nu heb ik de code van Nifty deels aangepast zodat ik nu 2px brede borders heb.
Ook heb ik een ID toegevoegd (zat er ook niet in) waarmee ik via JavaScript de eigenschappen kan laten veranderen.

Enkel heb ik nog een klein grafisch oneffenheidje wat nauwelijks opvalt, maar daarvoor moet ik verder de code doorspitten.

Iedereen bedankt voor de input.

[benoni]

Mmm... de oplossing die ik vaak gebruik staat er nog niet bij zo te zien, al is 't misschien wel erg voor de hand liggend...

Ik exporteer vaak vanuit hetzelfde bronbestand ook een 1-pixel gif of 10-pixel vierkantje, en gebruik die als background image voor het middenvlak. Zo heeft 't allebei precies dezelfde kleurafwijking