CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede Mik2000 Professor
17. oktober 2012 - 01:36 Der er 17 kommentarer og
1 løsning

table-cell problem

Hej

Jeg har prøvet at lave noget en display:table og table-cell i css, og det virker fint i Chrome og IE, men i Firefox står kollonnerne ikke lige under hinanden (de rykker i forhold til hinanden. Afhængigt af hvor meget indhold der er i cellerne, rykker den lidt på rækkerne

Nogle der ved hvad der gør at firefox rykker dem, og hvad man kan gøre ved det.

KODE LIGE TIL AT KOPIERE - MESTE AF KODEN ER VOLAPYK TEKST FOR AT MAN KAN SE DER ER EN LILLE FORSKEL I FIREFOX:
-----------------------------------------------------------

<html>
<head>
<style type="text/css">
.css_table{
    width: 960px;
    display:table;
    margin-left: -12px;
    margin-right: -12px;
    border-collapse:inherit;
    border-spacing: 12px 0px;
}
.css_cell{
    width: 312px;
    display:table-cell;
    background-color: #000;
    color: #fff;
}
</style>
</head>

<body>

<div class="css_table">
    <div class="css_cell">
        dad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj <br><br>dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsad
    </div>
    <div class="css_cell">
        Test
    </div>
    <div class="css_cell">
        Test
    </div>
</div>
<br />
<div class="css_table">
    <div class="css_cell">
          testas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsad
    </div>
    <div class="css_cell">
        test
    </div>
    <div class="css_cell">
        test sdas dastestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsad
    </div>
</div>
</body>
</html>
Avatar billede olebole Juniormester
17. oktober 2012 - 03:20 #1
<ole>

Det er som tidligere nævnt ikke let at få HTML til at opstille indhold i kollonner. Det er formodentlig lettere at bruge inline og block elementer, som de er beregnet til: Inline elementer lægger sig ved siden af hinanden - og block elementer lægger sig over/under hinanden. Du kunne prøve denne kode i stedet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
    font: 14px verdana, arial, sans-serif;
}
.css_table{
    width: 996px;
    margin: 20px 0;
}
.css_cell{
    width: 312px;
    display: inline-block;
    vertical-align: top;
    margin: 0 10px;
    background-color: #000;
    color: #fff;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>

<div class="css_table">
    <div class="css_cell">
        dad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj <br><br>dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsad
    </div><div
    class="css_cell">
        Test
    </div><div
    class="css_cell">
        Test
    </div>
</div>

<div class="css_table">
    <div class="css_cell">
          testas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsad
    </div><div
    class="css_cell">
        test
    </div><div
    class="css_cell">
        test sdas dastestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsad
    </div>
</div>
</body>
</html>

/mvh
</bole>
Avatar billede olebole Juniormester
17. oktober 2012 - 03:24 #2
Du vil sikkert beklage dig over, at cellerne ikke fylder ud, vertikalt. Så bruger du bare det gamle trick med at lægge et baggrundsbillede i wrapperen (= hver række-DIV), som repeat'er lodret. Billedet kan være få pixels højt og bestå af tre sorte streger på hver 312px bredde med 20px imellem  =)
Avatar billede Mik2000 Professor
17. oktober 2012 - 13:01 #3
Hej Ole

Det var egentlig også min første løsning
Problemet er at kasserne i det endelige resultat skal være afrundede i alle fire hjørner, så ramte ind i et problem der.

Er det virkelig slet ikke muligt med css/css3 at lave 3 kasser ved siden af hinanden, med en defineret bredde, og samme højde, og med afrundede hjørner :(

PS: Doctype og alle de andre ting er med i det rigtige - lavede bare et meget hurtigt og simplere eksempel
Avatar billede olebole Juniormester
17. oktober 2012 - 16:08 #4
Jamen, så strikker du bare et par ekstra elementer ind, så hjørnerne kan blive runde. Det er en af de ting på Eksperten, der er bøvlet at forklare, fordi man ikke kan vise/udveksle billeder - men det er ikke svært at lave.

Ja, det er helt rigtigt. Og der er heller ikke muligheder for at lave en grøn trekant midt på siden, som omskriver en gul cirkel med et rødt, polkaprikket kvadrat som indhold.

Med den oprindelse HTML har, ville det være ret besynderligt, hvis det var muligt. Til gengæld er det jo helt fantastisk, at teknologien er nået så langt - lysår fra udgangspunktet - at så specielle og avancerede krav snarligt synes at blive en reel mulighed  =)
Avatar billede Mik2000 Professor
17. oktober 2012 - 19:19 #5
Sådan at man i princippet har 3 div nedaf

Og i den øverste ligger diver med afrundet top, og i den nederste div'er med afrundet bund
Og den midterste har så baggrundsbillede i den lange div, og så 3 diver inden i til boksene

Er det rigtigt forstået?
Avatar billede olebole Juniormester
17. oktober 2012 - 19:38 #6
Skal de runde hjørner være transparente - eller må de udenfor rundingen have en baggrundsfarve?
Avatar billede Mik2000 Professor
17. oktober 2012 - 21:50 #7
De skal være transparante, men vil helst skulle undgå at lave billeder, da der kan være forskellige farver mv. Så vil være bedre hvis man kunne benytte css3 på en måde til at lave rundingen
Avatar billede olebole Juniormester
17. oktober 2012 - 22:11 #8
Jamen, så har du jo selv givet løsningen. Den er at vente nogle år, til teknologien kan følge med dine krav. Hvis du kun kan bruge CSS3 - der, som du jo allerede ved, ikke er understøttet - er den gode løsning nok 'at lade være'
Avatar billede Mik2000 Professor
17. oktober 2012 - 22:36 #9
Det er fint nok den er understøttet i de fleste browsere og med IE 10 ser det jo frnuftigt ud, Chrome og Firefox ser også fornuftigt ud, og Safari ...... tja hvis man køber Mac er man selv uden om det ;););); ....... naah pjat den ser jo også fornuftig ud.

Men jeg må prøve mig lidt frem. Har jo ladet sig gøre 99,9% - er kun Firefox der laver lidt balade ;)
Avatar billede olebole Juniormester
17. oktober 2012 - 22:59 #10
IE 10 ...?!??!!! Ja, så nonchalant har man ikke råd til at være som professionel! En løsning, der kun fungerer i de seneste browserversioner - og på én platform - er en ikke-løsning.

Mange steder er det fornuftigt nok stadig et ufravigeligt krav, at siden skal understøtte IE7 - og enkelte steder IE6. At stille sig tilfreds med, at siden kan fungere i IE10, er komplet urealistisk. Set med professionelle øjne mangler du de 99,9%  *o)
Avatar billede Mik2000 Professor
17. oktober 2012 - 23:53 #11
Det kommer jo meget an på målgruppen ;)
... det er jo ikke noget man kan sige generelt. Men meget understøttes også tilbage, og ellers fungerer det jo tit bare som firkantede kasser i stedet for afrundede ;)
Men igen kommer jo i første omgang an på målgruppe, og i anden omgang an på kunden hvis det er prof ;)
Avatar billede olebole Juniormester
18. oktober 2012 - 00:21 #12
Ja, det kommer helt korrekt an på målgruppen. Da du ikke har voldsomt godt styr på resten, formoder jeg, at du nok heller ikke helt har styr på din målgruppe - eller hvordan man undersøger den.

"Men meget understøttes også tilbage, og ellers fungerer det jo tit bare som firkantede kasser i stedet for afrundede" >> Den antagelse bygger helt og holdent på tro  =)

Dine farver, bredder og margins vil holde - men visningen vil være fuldstændig off i ældre browsere ... endda i en grad så store dele af sidens indhold formodentlig ikke er synligt. Flere af kasserne vil simpelthen 'forsvinde' fra viewport'ens område. Hverken din egen kode eller min kode vil virke i IE7. Det vil en helt almindelig tabel.

Godt webdesign er webdesign, der understøttes bredt. Ofte er energien bedre brugt på indholdet end på 'glimmer og guirlander', som sjældent 'bringer handlingen videre' eller bidrager med noget brugbart - udover de få minutter, man opholder sig på siden  =)
Avatar billede olebole Juniormester
18. oktober 2012 - 01:33 #13
Du kan prøve denne kode med et par billeder, jeg har uploaded, så du kan se/downloade dem. Denne løsning kræver kun ét ekstra element pr. række:

<!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></title>
<style type="text/css">
body {
    font: 14px verdana, arial, sans-serif;
}
/*http://imageshack.us/g/1/9818208/
http://imageshack.us/g/1/9818198/*/
.css_table{
    position: relative;
    width: 955px;
    margin: 20px 0;
    background: url(http://imageshack.us/a/img853/6088/colstop.png) no-repeat;
}
.css_cell{
    width: 285px;
    padding: 10px;
    display: inline-block;
    vertical-align: top;
    color: #fff;
}
.mid {
    margin: 0 20px;
}
.cell-back {
    position: absolute;
    top: 20px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background: url(http://img845.imageshack.us/img845/2932/colsbottom.png) no-repeat left bottom;
    z-index: -1;
}
</style>
</head>
<body>

<div class="css_table">
    <div class="css_cell">
        dad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj <br><br>dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsad
    </div><div
    class="css_cell mid">
        Test
    </div><div
    class="css_cell">
        Test
    </div>
    <div class="cell-back"></div>
</div>

<div class="css_table">
    <div class="css_cell">
          testas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsad
    </div><div
    class="css_cell mid">
        test
    </div><div
    class="css_cell">
        test sdas dastestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsadtestas dasdasd asdad s adasd as dsa daj dbas dasj dasl dlsad slka dslak dlsad
    </div>
    <div class="cell-back"></div>
</div>

</body>
</html>

PS: Med baggrundsbilledet i bunden kan hver række højst være 1520px høj. Selvom billedet er 955x1500px fylder det kun 7.8KB  =)
Avatar billede olebole Juniormester
23. oktober 2012 - 17:57 #14
Fik du løst problemet?
Avatar billede Mik2000 Professor
23. oktober 2012 - 20:11 #15
Hej
Nåede ikke at få prøvet den, og nu er ferien slut, men prøver snarest og så melder jeg tilbage :)
Avatar billede Mik2000 Professor
28. oktober 2012 - 17:15 #16
Fik det til at virke med din løsning og fik det også til at virke med table-cell løsningen i css

Tak for hjælpen - smid et svar for point :)
Avatar billede olebole Juniormester
28. oktober 2012 - 19:26 #17
Ellers tak, jeg samler ikke point. Læg selv et svar og accepter det, så tråden lukes  =)
Avatar billede Mik2000 Professor
29. oktober 2012 - 01:22 #18
Okay - tak for hjælpen

Lukker
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 15:09 Mobilrouter mangler forbindelse i Sverige Af perhol i Routere & Switches
I dag 10:53 WordMat Af jgormm i Word
I går 16:58 Netværk bliver ved med at "hoppe af" når jeg åbner for mange faner eller specifike spil Af Lars i LAN/WAN
I går 14:44 MS Outlook Af lbc i Office & Kontorpakker
19/0917:14 Udvid partition - Mulighed er nedtonet, ikke aktiv Af Uvanga i PC
White papers
Flere white papers »


Premium
Teaser billede
Professor Christian Damsgaard: Her er de tre vigtigste sikkerhedsmæssige udfordringer ved at lægge dine data i clouden
Læs mere »
Her er Danmarks kommende AI-lov: Se det fulde lov-udkast fra regeringen
Microsoft vil træne AI på dine LinkedIn-opslag og kommentarer: Sådan undgår du det
Henrik Bodskov om sin exit fra Aeven: “Da jeg kørte ind på parkeringspladsen, løb tårerne lidt ned ad kinden”
Se alle »
Computerworld
Teaser billede
I aften sker det: Din iPhone får en monumental opdatering
Læs mere »
Alt om Apples store opdatering til iPhone, Mac, Watch og iPad
Microsoft tvangsinstallerer app i din Office 365 i næste måned: Du kan ikke slippe
Apple opdager alvorlig sårbarhed i ældre iPhones og iPads
Se alle »
CIO
Teaser billede
Til kamp mod legacy og teknisk gæld: Uffe har skrottet 200 servere og 1.000 routere og switches på 140 lokationer
Læs mere »
Microsoft opsplitter Office og Teams: Sådan fungerer opdelingen
”Det fylder helt oppe på direktionsgangene:" Danske topkonsulenter løfter sløret for det allervigtigste it-tema lige nu
Overgangen til Windows 11 kan udløse store bøder, hvis du ikke passer på
Se alle »
Job & Karriere
Teaser billede
Tryg skiller sig af med 225 it-medarbejdere: Outsourcer stor del af sin it-drift til indere
Læs mere »
Her er fidusen: Sådan fastholder KMD og Twoday deres it-folk i lang tid
Henrik Bodskov fratræder som topchef for Aeven: Her er den nye topchef
Novo Nordisks CIO og digitale topchef, Anders Romare, forlader selskabet
Se alle »
White paper
Teaser billede
Sikre og skalerbare datacentre med fokus på drift, energi og fremtid
Læs mere »
IT i front: Sådan bliver netværk en strategisk driver
Sådan samler du virtualisering og containerdrift i én løsning
Undgå at printeren bliver svageste led i sikkerheden
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »