Avatar billede bgo Nybegynder
24. september 2008 - 15:07 Der er 12 kommentarer og
1 løsning

Indrykket div giver forkert tekst i FF

Løsningen findes sikkert herinde, men jeg aner ærligt ikke hvad jeg skal søge efter for at finde svaret :)

Sagen er, at jeg oplever at teksten i en indrykket div er besynderlig i FF når der er mere end én linje. Første linje er hvor den skal, men de efterfølgende er ikke indrykket i lige så høj grad. I IE vises det som det var tænkt, men FF laver denne underlige fortolkning.

Her er lidt kode:

<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Some title</title>
<style type="text/css">
.item {
line-height:16px;
font-size:12px;
margin-bottom:0px;
margin-top:0px;
margin-right:25px;
padding:3px 3px 3px 3px;
width:751px;
}

.item:hover {
background-color:#6f6f6f;
color:#ffffff;
}


.heading {
left:49px;
position:relative;
float:left;
width:140px;
}

.explain {
left:85px;
width:477px;
position:relative;
}
</style>
</head>

<body>
<div class="item"><div class="heading">Something</div><div class="explain">dfg
    dfgdfg dfgdfg dfggd</div></div>
<div class="item"><div class="heading">Something else</div><div class="explain">
    dfgdfg dfgdfg dfg dfg df gdg dg d gdfg gdfgdkfjg kdfjg kdjfgkdfgldfkgljdlkfg
    dfgj dlf dfgjdlkfgj dlkfgd dfjgldkfgjldkfgj dlkfgjd </div></div>
</body>

</html>


Hvordan får jeg dem til at stå korrekt? (det er div med class explain der er besynderlig)
Avatar billede roenving Novice
24. september 2008 - 15:42 #1
Tjah, hvorfor laver du ikke bare en tabel, den er da voldsomt mere dynamisk til dit formål ?-)
Avatar billede bgo Nybegynder
24. september 2008 - 15:51 #2
Det kunne jeg, men det må være en udvej hvis ikke denne måde vil ;) For det MÅ kunne lade sig gøre
Avatar billede ssv Nybegynder
24. september 2008 - 16:07 #3
<style type="text/css">
.item {
line-height:16px;
font-size:12px;
margin: 0 25px 0 0;
padding:3px;
width:751px;
float: left;
}

.item:hover {
background:#6f6f6f;
color:#fff;
}


.heading {
margin: 0 0 0 49px;
float:left;
width:140px;
}

.explain {
width:477px;
margin: 0 0 0 50px;
float: left;
}
</style>

--

<div style="width: 700px;">
<div class="item"><div class="heading">Something</div><div class="explain">dfg
    dfgdfg dfgdfg dfggd</div></div>
<div class="item"><div class="heading">Something else</div><div class="explain">
    dfgdfg dfgdfg dfg dfg df gdg dg d gdfg gdfgdkfjg kdfjg kdjfgkdfgldfkgljdlkfg
    dfgj dlf dfgjdlkfgj dlkfgd dfjgldkfgjldkfgj dlkfgjd </div></div>
</div>

- fungerer udemærket her.
Avatar billede olebole Juniormester
24. september 2008 - 16:15 #4
<ole>

Det ville ikke bare være dårlig kodestil - det ville også være direkte forkert - at bruge andet end en tabel i denne situation. God kodestil er at bruge de elementer, som er bedst egnet (og beregnet) til formålet  ;o)

Det har aldrig været W3C's mening, du skulle bruge andet end en tabel - og du lægger voldsomme hindringer i vejen for dine brugere ved at benytte div i stedet

/mvh
</bole>
Avatar billede bgo Nybegynder
24. september 2008 - 16:31 #5
ha, det sjove er, at jeg netop forsøger at benytte elementerne som de var tilsigtet - og det er ikke tabel-data det skal bruges til ;)

Anyway, detender med at jeg bruger en tabel alligevel - ssv: tak for forsøget, men den funker kun fint i FF og IE7, i IE6 virker den ikke

roenving: smider du et svar? :)
Avatar billede olebole Juniormester
24. september 2008 - 16:38 #6
"og det er ikke tabel-data det skal bruges til" >> det er da en tabullær opstilling, du viser  =)

Teksten i den venstre kolonne hører øjensynligt sammen med tekstblokken i højre kolonne. Er det tilfældet, er der præcis tale om tabullære data, som bør vises i en tabel. Ellers har blinde og svagtseende jo heller ikke kinamands chance for at få deres højtlæsere til at finde rundt i, hvad der hører sammen med hvad på din side (for ikke at tale om alle mulige andre ikke-browser klienter)  ;o)
Avatar billede olebole Juniormester
24. september 2008 - 16:57 #7
- og ellers kan man vel:

<style type="text/css">
.item {
line-height:16px;
font-size:12px;
margin: 0 25px 0 0;
padding:3px;
}

.item:hover {
background:#6f6f6f;
color:#fff;
}

.heading {
margin: 0 0 0 49px;
float:left;
width:140px;
}

.explain {
width:390px;
margin: 0 0 0 50px;
float: left;
}

.clear {
    clear: both;
    height: 0;
    overflow: auto;
}
</style>
<div style="width: 700px;">
<div class="item"><div class="heading">Something</div><div class="explain">dfg
    dfgdfg dfgdfg dfggd</div>
    <div class="clear">&nbsp;</div></div>
<div class="item"><div class="heading">Something else</div><div class="explain">dfgdfg
    dfgdfg dfg dfg df gdg dg d gdfg gdfgdkfjg kdfjg kdjfgkdfgldfkgljdlkfg
    dfgj dlf dfgjdlkfgj dlkfgd dfjgldkfgjldkfgj dlkfgjd </div>
    <div class="clear">&nbsp;</div></div>
</div>

- men brug en tabel i stedet  ;o)
Avatar billede roenving Novice
24. september 2008 - 23:10 #8
Jamen, så velbekomme '-)
Avatar billede bgo Nybegynder
25. september 2008 - 10:20 #9
olebole: hmm. måske er jeg for matematisk i min tankegang dér ;)
Avatar billede olebole Juniormester
25. september 2008 - 15:00 #10
Undskyld, men nu har jeg dagligt brugt matematik i ret rå mængder de seneste 35-40 år - men jeg genkender intet matematisk ved din tankegang. Matematik bygger jo netop på logik.

'Forført af en fjollet og grundløs mode' er mit bud  ;o)
Avatar billede roenving Novice
25. september 2008 - 16:32 #11
-- og jeg vil bare takke for point ;~}
Avatar billede bgo Nybegynder
26. september 2008 - 13:49 #12
olebole: Nu tænkte jeg mere på at for mig er tabeller noget man benytter til præsentation af eks. statistiske data, men nuvel, jeg kan udlede at jeg ikke længere er velkommen hér...
Avatar billede roenving Novice
27. september 2008 - 10:45 #13
I dette tilfælde ønskes jo netop en opstilling med kolonner og rækker, og det laves rasende nemt med tabeller -- og så er det ovenikøbet fuldt dynamis, så man ikke behøver at tænke på tekstmængder eller elemnt-størrelser !-)
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