Avatar billede pnr Nybegynder
22. juni 2005 - 15:12 Der er 11 kommentarer og
1 løsning

Problemer med vide af baggrundsbillede i Gecko browser

Jeg har et menu punkt som er stylet på følgedne måde:

div#menu ul li a
{
    color:            black;
    width:             179px;
    line-height:         18px;
    margin:            0;
    background:         url("images/menu.jpg");
    background-repeat:     no-repeat;
    font-weight:        bold;   
    text-decoration:     none;
    padding:         0 6px 1px 8px;
    text-transform:     uppercase;
    text-align:         left;
    display:        block;
    letter-spacing:     4px;
}

Problemet er at i Gecko browsere fylder billedet 10 - 20 px mere end i IE. Hvis jeg sætter viden til ca 160px passer det i Gecko browsere, mens det i IE skal være 179px.

Hvad er problemet?
Avatar billede sukos Juniormester
22. juni 2005 - 15:15 #1
muligvis linie-height og/eller letter-spacing
Avatar billede pnr Nybegynder
22. juni 2005 - 15:21 #2
Det hjalp ikke at ændre på dem...
Avatar billede roenving Novice
22. juni 2005 - 15:26 #3
At IE gør det forkert, sikkert fordi du ikke har en fuldt kvalificeret doctype inklusive dtd-link !-)
Avatar billede roenving Novice
22. juni 2005 - 15:26 #4
F.eks.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
Avatar billede pnr Nybegynder
22. juni 2005 - 15:33 #5
Jeg vil jo mene at IE gør det rigtigt, for billedet er 179 px i breden!

Jeg har følgende doctype:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Avatar billede roenving Novice
22. juni 2005 - 15:51 #6
-- hvis du har _nogetsomhelst_ (også xml-deklarationen !-) foran doctype-tagget, vil IE fejlagtigt placere f.eks. margin, border og padding indenfor den angivne bredde, mens box-modellen helt entydigt fastslår, at en bredde skal beregnes således (og en højde tilsvarende):

margin-left + border-left-width + padding-left + element-bredde + padding-right + border-right-width + margin-right !o]

I dit tilfælde er den korrekte fortolkning af dine css-angivelser ifølge w3c (http://www.w3.org/TR/REC-CSS2/box.html) altså:

padding-left: 8px +
element-width: 179px +
padding-right: 6px =
total bredde: 193px !-)

PS. Du bruger vel egentlig heller ikke xml-funktionaliteten i din html-side, så det er bare at fjerne xml-deklarationen ...

-- og du burde iøvrigt læse oleboles artikler om bagdelene ved at benytte sig af xhtml, når der nu alligevel ikke er een eneste browser, som kan forstå det:

http://www.eksperten.dk/artikler/537
http://www.eksperten.dk/artikler/538
Avatar billede pnr Nybegynder
22. juni 2005 - 17:00 #7
Det køre i et CMS system så jeg skal bruger XHTML
Avatar billede roenving Novice
22. juni 2005 - 17:06 #8
Fint nok, men fjern xml-deklarationen !-)
Avatar billede pnr Nybegynder
23. juni 2005 - 06:27 #9
Ja det afhjalp problemet :-)

Vil det sige at man aldrig bør have en xml-deklartion på sin side?

Et andet lille problem der opstod i IE efter jeg havde fjernet xml-deklartionen, var at der lige pludselig var scroll på alle sider, også selv om de lang fra fyldte siden ud. Jeg havde lavet en padding-top 20px da jeg fjernede den og indsatte følgende i stedet for forsvandet scroll :

<tr>
    <td style="20px">&nbsp;</td>
</tr>

Men hvorfor kan jeg ikke bruge padding?

roenving, mange tak for din hjælp smid et svar så er der point...
Avatar billede roenving Novice
23. juni 2005 - 14:04 #10
Scrollet kommer fordi den korrekte tolkning af 100% i højden skal tages fra det nærmest omkransende element, som har en defineret højde, 's højde ...

-- og højden af et element skal efter standardens box-model beregnes sådan:

margin-top + border-top-width + padding-top + element-højde + padding-bottom + border-bottom-width + margin-bottom

-- så derfor vil den samlede højde blive 100% + 20px !-)

-- og velbekomme '-)
Avatar billede pnr Nybegynder
28. juni 2005 - 09:08 #11
Det var noget af et regne stykke :-)

Men det vil så sige at jeg ikke kan bruge padding uden at få scroll?
Avatar billede roenving Novice
28. juni 2005 - 12:29 #12
Ja, sådan er box-modellen lavet ...

-- og tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester