[CSS] IE probleem met margin van images en anchor

[Michali]

Ik probeer met pijn en moeite (valt wel mee hoor) een pagina te bouwen zonder tabbelen te gebruiken voor verkeerde doeleinden. Voor een gedeelte weet ik al dat het niet anders kan (hier gaat het niet om) maar voor een ander iets, namelijk een menutje, probeer ik het op een juiste manier te doen.

Voor een menu item gebruik ik een 3 tal plaatjes, een linker zijde, een rechter en een schaalbaar midden stuk. Ik heb geprobeerd om van het linker en rechter stuk simpel weg een img tag te gebruiken. Voor het midden stuk gebruik ik gewoon een a tag met een CSS background property.

In FireFox werkt het perfect (hoera ), maar IE geeft problemen. Bij een instelling van 0 pixels margin op alle 3 de elementen zegt IE lekker dat er alsnog maar even 3 pixels margin moet tussen zitten. Als ik de left en richt margin dus op -3px zet ziet het er in IE weer netjes uit maar in FireFox weer niet .

Mijn CSS skils reiken nu weer niet zo ver om met een oplossing te komen. Iemand een suggestie? (geen smerige IE css hack aub, want dan gebruik ik wel een tabelletje, dat is nog netter dan een hack imo).

IE:


FireFox:


HTML:

code:

<style>

img#left
{
    float: left; 
    height: 28px; 
    width: 3px;
    margin: 0px;
}

img#right
{
    float: left; 
    height: 28px; 
    width: 15px;
    margin: 0px;
}

a#link
{
    display: block;
    float: left; 
    height: 28px; 
    padding: 0px 5px 0px 5px; 
    margin: 0px; 
    background: URL(pic/button_center_tile.jpg); 
    background-repeat: repeat-x; 
    color: #FFFFFF;
    text-decoration: none;
}

</style>

[img]"pic/button_left.jpg"[/img]<a href="#" 
id="link">link</a>[img]"pic/button_right.jpg"[/img]

[-Mous-]

Probeer bij je images eens de border en de padding op 0 te zetten. Dat zou iig geen kwaad moeten doen in Firefox, maar misschien lost het je probleem in Internet Explorer wel op.

[Michali]

Nee, dat werkt ook niet. Zou ook vreemd zijn eigenlijk omdat 0px de standaard waarde is voor de eigenschappen. Ook voor margin trouwens, dus eigenlijk zou ik die ook uit mijn code kunnen halen.

[T-MOB]

Ik gok dat IE niet je images, maar juist je Anchor een border geeft. Je zou kunnen proberen om die eens op 0 te zetten.

Overigens zou ik het ietsje anders hebben opgelost, nl:

code:

<a href="blaat">[img]"left.jpg"[/img]Linktekst[img]"right"[/img]</a>

Het enige nadeel is dan dat je geen transparancy kunt toepassen voor je rechterhoek.

[Michali]

Dat zou ik toch niet doen zo, omdat als je goed kijkt bestaat het plaatje niet alleen uit de vlakje zelf, maar ook uit een soortvan schaduw en stukje achtergrond waar het ingeplaatst wordt. (mischien dat ik dat nog wel weg haal) Het hele vlak zou dan clickable zijn wat ik niet zo netjes vind. Het werkt overigens niet, de border van de a op 0 zetten.

[crisp]

zet je image in een div, en float de div
wat IE doet is default hspace toekennen; hspace=0 toevoegen is dus ook nog een optie

[ Voor 52% gewijzigd door crisp op 27-03-2004 10:05 ]

[Verwijderd]

Ik zou het A element 'line-height' geven, geen 'height'. Als je daarnaast nog wat met padding speelt een achtergrondplaatje moet je makkelijk hetzelfde effect krijgen.

(NB: een ID moet uniek zijn op de pagina.)

[Michali]

crisp schreef op 27 maart 2004 @ 10:04:
zet je image in een div, en float de div
wat IE doet is default hspace toekennen; hspace=0 toevoegen is dus ook nog een optie

De manier met de div werkt perfect. Thanks . De hspace is geen optie omdat ik met xhtml 1.1 werk en hij is deprecated.

Verwijderd schreef op 27 maart 2004 @ 11:09:
Ik zou het A element 'line-height' geven, geen 'height'. Als je daarnaast nog wat met padding speelt een achtergrondplaatje moet je makkelijk hetzelfde effect krijgen.

(NB: een ID moet uniek zijn op de pagina.)

Dat doe ik toch liever wel. Hij moet namelijk ook precies 25px hoog zijn. En het heeft niet zo veel te maken met de afstand tussen verschillende regels (want daar is line-height toch voor?). De optie is ook maar 1 enkele regel overigens.

(die ID was overigens alleen maar om even te testen (ik ben lui namelijk en id is minder typ werk dan class )

[ Voor 8% gewijzigd door Michali op 27-03-2004 12:46 ]

[Verwijderd]

Dat doe ik toch liever wel. Hij moet namelijk ook precies 25px hoog zijn. En het heeft niet zo veel te maken met de afstand tussen verschillende regels (want daar is line-height toch voor?). De optie is ook maar 1 enkele regel overigens.

'line-height' is niet voor tussen de regels maar voor de regel _zelf_. Subtiel, maar belangrijk verschil (met 'vertical-align' kun je dan vervolgens de letters op de regel-hoogte verticaal uitlijnen, mocht de 'line-height' verschillen van 'font-size').

Maar ik zie nu dat je op A 'display' hebt gebruikt, waardoor jouw oplossing ook mogelijk is, alhoewel ik me afvraag of je zoveel IMG elementen wilt hebben in je broncode.

[Michali]

Ik heb de img elementen weg gehaald en er gewoon div'jes van gemaakt. Werkt wel goed zo. Wilde het alleen eerst met img oplossen omdat me dat wat meer voor de hand liggend leek. Met een divje is het ongeveer een gelijk aantal tekens, maar kan ik nog de naam van de plaatje aanpassen als ik dat zou willen. Geeft toch wel weer iets voordeel boven een img. Ik hoop maar dat ze snel met css3 komen. Ik heb de features toch wel hard nodig. Denk dat het leven van de desinger dan weer wat gemakkelijker wordt (zal ook wel weer aan ms, mozilla en de andere browser bakkers liggen, omdat die uiteindelijk toch wel de ondersteuning bepalen. hopelijk wordt het in de toekomst allemaal wat beter)

[Verwijderd]

Wat is het toch altijd met dat ge*** over CSS3. Wat kan CSS2.1 niet doen in dit geval wat makkelijk mogelijk is met een van de gepubliceerde WD van CSS3?

Van een IMG element een DIV maken was niet bepaald m'n suggestie. Zo houd je inderdaad dezelfde hoeveelheid markup, waardoor het er niet flexibeler op wordt. Waarom zet je die plaatjes er niet in als achtergrondplaatjes?

[Michali]

Verwijderd schreef op 28 maart 2004 @ 14:40:
Wat is het toch altijd met dat ge*** over CSS3. Wat kan CSS2.1 niet doen in dit geval wat makkelijk mogelijk is met een van de gepubliceerde WD van CSS3?

Van een IMG element een DIV maken was niet bepaald m'n suggestie. Zo houd je inderdaad dezelfde hoeveelheid markup, waardoor het er niet flexibeler op wordt. Waarom zet je die plaatjes er niet in als achtergrondplaatjes?

Dat heb ik ook gedaan. Met dat CSS3 had ik het hierover: W3C WD CSS3 Border. En dan over properties als border-left-image etc. Als zoiets aanwezig was in CSS2 had ik dit heel gemakkelijk met alleen een a tag kunnen oplossen.

[Verwijderd]

Generated content?!!!

[Michali]

Wat?

[UltimateB]

Een truuk die ik regelmatig gebruik is het volgende:

code:

img#left
{
    float: left; 
    height: 28px; 
    width: 3px;
    margin: 0px;
    _margin: -3px;
}

De enige browser die de onderste margin zal uitlezen is IE. De anderen zullen het gewoon negeren.

[Tom-Eric]

Ultimateb schreef op 29 maart 2004 @ 08:14:
Een truuk die ik regelmatig gebruik is het volgende:

Cascading Stylesheet:

img#left
{
    float: left; 
    height: 28px; 
    width: 3px;
    margin: 0px;
    _margin: -3px;
}

De enige browser die de onderste margin zal uitlezen is IE. De anderen zullen het gewoon negeren.

In dat geval lijkt het me beter om gebruik te maken van wat IE niet kan ipv. wat IE wel kan, bijvoorbeeld dmv.

code:

img#left
{
    float: left;
    height: 28px;
    width: 3px;
    margin: -3px;
}
img[id="left"]
{
    margin: 0;
}