Avatar billede lsskaarup Nybegynder
09. marts 2012 - 13:12 Der er 23 kommentarer og
1 løsning

Underlig cellebredde

Jeg har igennem længere tid undret mig over et træls problem jeg har på nogle websider.

Jeg har en celle, hvor der er defineret en fast baggrundsfarve. I denne celle står der noget tekst, som jeg gerne vil have centeret. Problemet er at det virker som om tekstens bredde ikke følger cellens bredde, eller at der ligger en margin i højreside, som ødelægger det hele.

Synes bare jeg har tjekket alt i gennem ude at kunne finde synderen, men måske I kan se skoven for bare træer.

Se et eks. af problemet her: http://i43.tinypic.com/t892lg.png

Selve cellen og dens tabel:
<table class="ordreTabel" width="100%" border="0">
<td <?php echo cellefarve($foo['date530b'], $foo['r542a'], $ntal, $foo['r575a']);?> class="content" valign="top" style="width: 30px; color: <?php echo $tFarve;?>; text-align:center;"><?php echo $statik;?></td>
</table>


css-koden:
td.content {
    font-size: 11px;
    line-height: 16px;
    color: #363636;
    text-align: justify;
}

.ordreTabel{border-collapse:collapse;}
.ordreTabel td{width:65px;padding:0px;}
Avatar billede olebole Juniormester
09. marts 2012 - 13:24 #1
<ole>

Prøv at vise HTML-koden. PHP-koden kan ikke bruges til noget  =)

/mvh
</bole>
Avatar billede lsskaarup Nybegynder
09. marts 2012 - 13:35 #2
Cellens htmlkode:
<td bgcolor="#F2F2F2" class="content" valign="top" style="width: 100px; text-align:left;">Johny Dall</td>

Kan se jeg åbenbart fik kopieret en forkerte td.content herind:
td.content {
    font-size: 11px;
    line-height: 16px;
    color: #363636;
    /*text-align: justify;*/
    padding-right:0px;
}
Avatar billede lsskaarup Nybegynder
09. marts 2012 - 13:36 #3
Men hov, hvor kommer den tekst-align:left i html'en fra, når koden bagved siger center?
Avatar billede lsskaarup Nybegynder
09. marts 2012 - 13:39 #4
Nå, det var åbenbart en opdatering som ikke overskrev cachen.

Men tilbage til problemet, det virker på mig, som om teksten ikke kender cellen fulde bredde, for uanset hvor stor jeg gør cellen, og sætter teksten til at står til højre, så er der ca. 5 pixels luft.
Avatar billede olebole Juniormester
09. marts 2012 - 13:48 #5
Jeg kan ikke genskabe dit problem. Der må være noget, du ikke fortæller/viser:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
td.content {
    font-size: 11px;
    line-height: 16px;
    color: #363636;
    /*text-align: justify;*/
    padding-right:0px;
}

.ordreTabel{border-collapse:collapse;}
.ordreTabel td{width:65px;padding:0px;}
</style>
</head>
<body>

<table class="ordreTabel" width="100px" border="0">
<td bgcolor="#F2F2F2" class="content" valign="top" style="width: 100px; text-align:center;">Johny Dall</td>
</table>

</body>
</html>
Avatar billede lsskaarup Nybegynder
09. marts 2012 - 13:53 #6
Vil du have hele kildekoden, for den er altså godt lang?
Avatar billede olebole Juniormester
09. marts 2012 - 13:57 #7
Så smid den her og link til koden
Avatar billede olebole Juniormester
09. marts 2012 - 13:57 #8
PS: Det skal være en kopi af HTML-koden - ikke PHP-koden
Avatar billede lsskaarup Nybegynder
09. marts 2012 - 14:14 #9
Så ligger kildekoden her: http://pastebin.com/c0Vw27XQ

Der er et eller andet i koden, som overstyrer et sted, for hvis jeg kopiere hele kildekoden over i en ny fil, så har jeg stadigvæk problemet, men hvis jeg kun tager en lille del, så er der ingen problemer.

Så det er lige at med at finde det rigtige sted.
Avatar billede lsskaarup Nybegynder
09. marts 2012 - 14:17 #10
Okay, det har fatter jeg ikke.

Koden er lavet sådan, at rækkerne er dynamiske alt efter hvor mange sage en medarbejder har. Jeg prøvede så første gang, at smide samtlige sager op på pastebin, men det gik ned hver gang. Så jeg fandt en medarbejder, som havde så mange sager, at de fik scrollbaren frem.

Det mystiske er nu, at da jeg lavede en ny fil ud fra alle sager, så fejlede celle/tekste placeringen, men hvis jeg kun gør det ud fra den ene medarbejdes liste, så fejler den ikke.
Avatar billede olebole Juniormester
09. marts 2012 - 14:22 #11
Den DTD (Doc Type Definition), du bruger disabler store og vigtige dele af CSS i IE. Brug én, der sætter dokumentet i 'standard compliant mode':

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Det giver muligvis anledning til rettelser i CSS'en, men det er bare fordi, dokumentet nu understøtter CSS  =)

Din nuværende kode vises faktisk som forventet i andre browsere, men IE sætter den i 'quirks mode'
Avatar billede olebole Juniormester
09. marts 2012 - 14:25 #12
#10: Uanset hvad, kan du ikke regne med noget som helst, når du bruger den DTD. Du er nødt til at bruge den i #11
Avatar billede lsskaarup Nybegynder
09. marts 2012 - 14:26 #13
Hvordan kan dette lade sig gøre?
http://i43.tinypic.com/t892lg.jpg

Siden til venstre er kildekoden taget fra siden til højre
Avatar billede lsskaarup Nybegynder
09. marts 2012 - 14:26 #14
Hov, fik ikke lige opdateret, prøver lige at ændre DTD'en
Avatar billede lsskaarup Nybegynder
09. marts 2012 - 14:29 #15
Det gør ingen forskel, selvom jeg ændre til
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
Avatar billede olebole Juniormester
09. marts 2012 - 14:34 #16
#15 er ikke den DTD, jeg skrev i #11. Brug den, jeg skrev i #11 - så virker det som forventet i IE
Avatar billede olebole Juniormester
09. marts 2012 - 14:35 #17
URL'en i DTD'en skal være tilstede!
Avatar billede lsskaarup Nybegynder
09. marts 2012 - 14:58 #18
Det gjorde jeg nu også, fik bare ikke pastet URL'en med herind, men det gør altså ingen forskel.
Avatar billede olebole Juniormester
09. marts 2012 - 15:08 #19
Jo, det gør! Med den kode, du har skrevet på PasteBin, gør det en meget væsentlig forskel. Med den gamle DTD står teksten til venstre - med DTD'en fra #11 er teksten centreret.
Avatar billede lsskaarup Nybegynder
09. marts 2012 - 15:39 #20
Ja, det ved jeg godt den gør eller i hvert fald burde. Men det ser jo ikke det jeg oplever, så der må være noget andet, som fucker op i det.
Avatar billede olebole Juniormester
09. marts 2012 - 15:45 #21
Ja, din kode  =)

Du har valgt at bruge flere tabeller under hinsanden. Skal alle celler følges ad, skal du naturligvis rette en celle i samme kollonne - i alle tabellerne
Avatar billede olebole Juniormester
09. marts 2012 - 15:50 #22
Sorry, nu roder jeg trådene sammen!  =)

Jeg ved ikke, hvad der fucker op. Den kode, du har skrevet, er vel den samme, som du tester og kikker på
Avatar billede lsskaarup Nybegynder
09. marts 2012 - 19:30 #23
#21 Grunden til at jeg har flere tabeller under hinanden, er fordi brugerne gerne vil have at kolonne overskrifterne ikke scroller med, når de scroller i tabellen nedenunder. Men cellerne i den nederste tabel, blvier lavet dynamisk, så de burde have de samme forudsætninger, derfor undre det mig også lidt, at de ikke allesammen tilpasses.

#22 No problemo... :-)
Altså jeg afvikler php koden, som frembringer en php side, der afkodes til html. Den tager jeg så kildekoden fra, og ligger ind i et ny html side, for så at afvikle den. Det burde da give det samme, men jeg har altså oplevet, at der godt kunne være forskel.
Avatar billede lsskaarup Nybegynder
15. marts 2012 - 08:31 #24
Uhh, har låst problemet, det var åbenbart et eller andet med tabellens bredde. På trods af, at tabellens bredde var den samme som alle cellerne lagt sammen, så blev teksten kastet rundt i cellen.
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