WN - bakgrund på länk med css

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - bakgrund på länk med css (https://www.wn.se/forum/showthread.php?t=15296)

Jag vill sätta en bakgrund på en länk.
Bilden jag ska andvända är width : 116px - height : 29px.

Jag får altså bara bakgrundsbilden smal som texten inte 116x29.

i htmlfilen ser kåden ut såhär

Kod:

<div class="top_menu_top">

        <ul>

 <li><a href="#">länk 1</a></li>

 <li><a href="#">länk 2</a></li>

 <li><a href="#">länk 3</a></li>

 <li><a href="#">länk 4</a></li>

        </ul>

</div>

och cssen ser ut såhär

Kod:

.top_menu_top UL {

        padding : 25px 0px 0px 0px;

        margin : 0px;

}

.top_menu_top li {

        background-image : url(img/menu_knapp_stangd.gif);

        background-position : top;

        background-repeat : no-repeat;

        width : 106px;

        height : 29px;

        display : inline;

        list-style-type : none;

        text-align : center;

        padding-right : 2px;

        padding-left : 2px;

        list-style-position : inside;

}

.top_menu_top A {

        vertical-align : middle;

        font-size : 11px;

        font-weight : bold;

        font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

        width : 116px;

        height : 29px;

        text-align : center;

        color : Black;

        padding-top : 8px;

        text-decoration : none;

}

Det funkar fint i IE (6.0) men inte i FF (1.5.0.5)

om du sätter display:block på .top_menu_top A?

För att kunna bestämma bredd och höjd måste elementet vara fast.

Då hamnar länkarna under varandra så det funkar inte

Varför sätter du då:

Citat:

display: inline;

Om li är ett inline-objekt så kan du inte påverka höjden med height...
(använd istället li {float: left;} och skapa om nödvändigt en * html lösning för trilskande IE)

(och om jag får gnälla lite, varför skriver du A och UL med stora bokstäver, samt varför ett blanksteg efter namndeklarationen? sådant kan ställa till det i vissa fall.)

Jag skulle stark råda till att utveckla i Firefox och se till att det fungerar bra där först eftersom IE oftast beter sig annorlunda (än i stort sett alla andra webläsare och html/css-standarden) och man enkelt kan göra speciallösningar för IE i efterhand.

Tack för tippset.. verkar funka perfekt!

Jag skiver A och UL med stora bokstäver för att min css editor (TopStyle 2) skiver det.

Citat:

amt varför ett blanksteg efter namndeklarationen?

Menar du att allt ska stå på samma rad?

Jag i utveckla Firefox men kolla kontinueligt i IE också.

Citat:

Originally posted by Jocke@Jul 29 2006, 20:26
Menar du att allt ska stå på samma rad?

Njäe, det kan man göra som man tycker, jag undrade bara över varför skriva t ex
display : none;
istället för
display: none; eller display:none;
(Den undre är det mer "vanliga" sättet att skriva och det blir ju också lite kompaktare, men det här är kanske något din editor gör automatiskt... Och det spelar väl kanske, ärligt talat, ingen större roll.)

Spelar a och A någon roll?