CSS fejler i firefox men ikke i explorer - HASTER

prøv at definere samme dimensioner for selve elementet, for som jeg ser det, er det IE der gør det forkert, da strøøelsen på bagrundsbilledet ikke bør have noget at sige for elementets størrelse

ah... glem hvad jeg sagde... det er jo elementet størelsen er defineret for D'oh

af en eller anden grund kan man i FF ikke definere størrelsen på <a> tags, men du kan stoppe en <div> in i linket, som du kan sætte størrelse og baggrund på.

lidt crude html som viser hvad jeg mener:

hmm.. linket virker i IE, men det bliver bare en alm. musemarkør, så smid

cursor:pointer

ind i style til div'en, så burde alt se ens ud...

hvis du skal angive a med width og height, skal position: inline; skiftes til position:block;

dvs:

<style type="text/css">
.Topmenu_TD{
background-image:url(/images/2012-design/topmenu-baggrund-1200x30.png);
}
#ShopLayOut_Topmenu_TD a{
background-image:url(/images/2012-design/fane.png);width:102px;height:30px;
Text-align:center;
display:block;
}

how, så lige på din side at din topmenu, ikke bestod af celler, med links i.

Hvis du sætter display:block på dine links, vil ligge sig under hinanden, så du skal lige tilføje float:left; brug så margin-right til at lave mellemrum.

#ShopLayOut_Topmenu_TD a{
background-image:url(/images/2012-design/fane.png);width:102px;height:30px;
Text-align:center;
display:block;
float:left;
margin-right: 10px;
}

desuden vil jeg anbefale dig at ligge lidt padding på de links, så undgår du at lange menu navne vil ligge til kant på dit grafik til et menupunkt. Altså tilføje 5px padding til left og right:

padding: 0 5px;
width: 92px;

Og samtidigt at benytte padding top/bottom til at centrere teksten verticalt og en lille line-height.

/J

<ole>

- og man kan også bruge display:inline-block i stedet for display:block og float. Så slipper man for de uheldige egenskaber ved float - herunder at 'hacke' rundt med clear.

Float er vældig hensigtsmæssigt, når man f.eks. skal lave tekstomløb ved billeder. Den omsiggribende 'abuse', som i disse år breder sig, hvor man flår flere og flere elementer ud af sidens naturlige flow - og ofte ser koder fyldt med overflødige elementer med det eneste formål at 'reparere' på uhensigtsmæssigheder - finder jeg ikke en fornuftig vej at gå.

Just my 2 cents  =)

/mvh
</bole>

JokkeJensen dit link virkede kanon :-)

#ShopLayOut_Topmenu_TD a{
background-image:url(/images/2012-design/fane.png);width:102px;height:30px;
Text-align:center;
display:block;
float:left;
margin-right: 10px;
}

smid et svar og jeg giver naturligvis point :-)

Tark.

@Ole > "og ofte ser koder fyldt med overflødige elementer med det eneste formål at 'reparere' på uhensigtsmæssigheder - finder jeg ikke en fornuftig vej at gå."

Tag at bruge clearfix til at undgå de overflødige elementer hvis du skulle komme i en situation hvor det er nødvendigt emd float. Så er det kun nødvendigt at give den omkring liggnede container en klasse, og ikke neste noget unødvendigt.

http://www.webtoolkit.info/css-clearfix.html

(så får du også IE6 og IE7 med)

http://www.quirksmode.org/css/display.html

Jamen, det fix kender jeg skam udmærket ... men det er i mine øjne stadig en omgang helt unødig lapperi. Ligesom når man bruger position:absolute til at 'kvæste' sidens naturlige flow, behøves oprettende hacks, når man gør det med float.

Hvormeget, man har lyst til at bringe sig i den situation, er sikkert det, der skiller os. Jeg opfatter dagens nærmest 'maniske' brug af af en metode til tekstomløb som en ligeså klar abuse som brugen af tabeller til layout. Det kan bruges, men elegant er det ved Gud ikke  =)

Men som sagt: Just my (og faktisk mange andres) $0.02  *o)