Archief - HTML/CSS: vloeken op verschil tss IE en FF

Bram · 21 okt 2005

Ik heb een nieuwe template gemaakt, voornamelijk in CSS maar ik zit met het volgende. Ik heb een divje met m'n menu in maar in firefox is er precies een spatie tekort na de laatste link, in IE is het echter wel in orde...

www.bramme.vekien.co.uk/test
Hier staat de template, je moet maar eens kijken met FF en dan met IE, je zal onmiddellijk het verschil zien (onderste link), kan iemand me helpen dit op te lossen?
Thx, Bramme

Rvl · 21 okt 2005

Je kan deze bug oplossen door na je laatste link in je menu nog eens <br /> te zetten. Let wel dat deze manier niet echt de perfecte manier is om zul soort menu te maken. Een betere manier om dit effect zonder al te veel gepruts kan je vinden op http://css.maxdesign.com.au/listamatic/vertical01.htm

tikketim · 21 okt 2005

die verschillen liggen "meestal" niet aan de browsers maar wel aan 't ventje , menu's kan je beter in lijsten zetten en er zal een nieuwe wereld voor u opengaan

servi · 21 okt 2005

verander dit :
<div class="right">
<br /> <a href="#" class="anav">Home</a> Ω

eens in dit :
<div class="right">
<br /><a href="#" class="anav">Home</a> Ω

Bram · 21 okt 2005

tikketim zei:
die verschillen liggen "meestal" niet aan de browsers maar wel aan 't ventje , menu's kan je beter in lijsten zetten en er zal een nieuwe wereld voor u opengaan

hmm, ok, maar kan ik het met css zo maken dat inplaats van een bolletje ofzo, er dan aan de rechterkant zo'n omega tekentje staat? vond ik wel tof

edit: nvm, thx for replies, en ik beloof plechtig dat ik me in de wereld van lists zal verdiepen...

Dece · 22 okt 2005

ja:

Code:

<ul>
    <li><a href="#">Home</a></li>
    ....
</ul>

css wordt dan dit

Code:

ul
{
    list-style-type: none;
    width: XXpx;
    height: XXpx;
}
ul li
{
    background-image: url('omega_bg.gif');
    background-position: right;
    background-repeat: no-repeat;
    width: XXpx;
    height: XXpx;
}
ul li a
{
    float:right; /* Mogelijks te vervangen door text-align */
    padding-right: XXpx;
}

niet uitgetest btw

orez · 23 okt 2005

Dece zei:

ja:

Code:

<ul>
    <li><a href="#">Home</a></li>
    ....
</ul>

css wordt dan dit

Code:

ul
{
    list-style-type: none;
    width: XXpx;
    height: XXpx;
}
ul li
{
    background-image: url('omega_bg.gif');
    background-position: right;
    background-repeat: no-repeat;
    width: XXpx;
    height: XXpx;
}
ul li a
{
    float:right; /* Mogelijks te vervangen door text-align */
    padding-right: XXpx;
}

niet uitgetest btw

Je kan ook de tekstwaarden opgeven via css. Die Ω kan ook gebruikt worden in CSS, zo bespaar je toch alweer 4 kb aan images

Meer info over listings:
www.alistapart.com --> Zoeken op "Taming Lists"

Archief - HTML/CSS: vloeken op verschil tss IE en FF

Bram

Legacy Member

Rvl

Legacy Member

tikketim

Legacy Member

servi

Legacy Member

Bram

Legacy Member

Dece

Legacy Member

orez

Legacy Member