Avatar billede ravnkilde Nybegynder
23. november 2004 - 12:29 Der er 9 kommentarer og
3 løsninger

Padding i td gør cellen bredere

Hej!

Jeg har en tabel med en celle med en bredde på 125 px. Så har jeg en class style, der har left og right padding på hver 9px. Men bruger jeg stylen på teksten i cellen, bliver cellen bredere end de angivet 125 px - og det skal den ikke.

Hvordan løser jeg dette problem?

--- style ---

.menu_bg {
    background-color: #7DC2ED;
    padding-left: 9px;
    padding-right: 9px;
Avatar billede olebole Juniormester
23. november 2004 - 12:33 #1
<ole>

Jo, det skal den i følge CSS-standarden ... og det kan du ikke ændre på  :)

/mvh
</bole>
Avatar billede olebole Juniormester
23. november 2004 - 12:35 #2
Du må sætte dine elementer til den bredde/højde, de skal have, minus padding og/eller margin. Sådan er nu engang den teknologi, du har valgt at arbejde med ... HTML/CSS  ;o)
Avatar billede ravnkilde Nybegynder
23. november 2004 - 12:37 #3
Hej!

Ja, indtil videre har jeg løst problemet ved at trække 9+9 px fra den samlede bredde på cellen, men det virker som noget juks!

Kan jeg bruge andet end padding til at rykke det tekstmæssige indhold fx 9px fra venstre kanten af cellen?
Avatar billede notes2c Nybegynder
23. november 2004 - 12:39 #4
style="text-indent: 10px;"
Avatar billede olebole Juniormester
23. november 2004 - 12:40 #5
Det er ikke noget juks ... det er måden, man skrive HTML/CSS. Du kan lægge et andet element indeni cellen og give dette en margin. Men dét er da noget juks - i stedet for at angive den korrekte bredde  :)
Avatar billede notes2c Nybegynder
23. november 2004 - 12:40 #6
Gælder dog kun første linie
Avatar billede olebole Juniormester
23. november 2004 - 12:42 #7
... så det hjælper jo meget ikke her  :)
Avatar billede skovenborg Nybegynder
23. november 2004 - 16:34 #8
måske skulle det lige siges, at dette faktisk er netop dette tilfælde hvor IE5 skiller sig ud fra mængden med en temmelig træls bug.

Eksemplet med:
<div style="width:100px;height:50px;background-color:#f00">Indhold 1</div>
<div style="width:100px;height:50px;background-color:#00f;padding:9px;">Indhold 2</div>
skulle efter standarden (som sagt tidligere ;-) give den nederste boks en større bredde (og højde) end den øverste. Men en fejl i IE5 laver begge bokse lige store, men hvor indholdet blot er rykket ind - præcis som ravnkilde i starten troede det rigtigt skulle se ud.

Det så også her det efterhånden berømte CSS-boxmodel-hack er kommet frem:
http://www.tantek.com/CSS/Examples/boxmodelhack.html
Og ja, det er et hack, så derfor er det absolut ikke særlig pænt, men det virker da.
Avatar billede olebole Juniormester
23. november 2004 - 17:01 #9
Ja, dette hack diskuteres en hel del. Spørgsmålet er, om man skal skide på IE5 - eller fylde sin kode med buggy stuff.
Personligt skider jeg på dette punkt på IE5 - men det er jo en privat sag at afgøre  :)
Avatar billede skovenborg Nybegynder
23. november 2004 - 17:24 #10
Avatar billede ravnkilde Nybegynder
24. november 2004 - 08:45 #11
Hej!

Rart med alle de kommentarer. Jeg vil også gerne give nogle pts til skovenborg for de gode og interessante links, så du må lige lægge et svar.

Jeg vil læse mere på de henviste sider, og så p.t. løseproblemet med at trække min padding fra den samlede bredde -"juks" eller ej ;-)
Avatar billede skovenborg Nybegynder
24. november 2004 - 15:16 #12
jaja, et par points kan man vel godt leve med ;-)
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