Avatar billede haken Nybegynder
13. marts 2009 - 12:05 Der er 12 kommentarer og
1 løsning

Firefox ignorere width tilknyttet span tag

Hej Eksperten

Jeg har følgende kode, hvor jeg har sat width i et style tag. Problemet er at det bliver ignoreret i FF.
Jeg har prøvet at finde løsningen på google, og har fundet ud af af det er FF der gør der rigtige.
Det jeg gerne vil have er at alle felterne er lige brede og der kommer en lille box efter første span tag.
D.v.s jeg ved at de står lige under hinanden, også selv om teksten i span tagget ikke er lige lang.
Men hvordan finder jeg en løsning der virker både i FF og IE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  width: 200px;
}
</style>
</head>
<body>
<ul>
    <li><span style="width: 160px; background-color: #CCCCCC;">fds fdsf</span><span style="width:10px;">s</span></li>
    <li>
        <span style="width: 160px; background-color: #CCCCCC;">qwe weqwe</span><span style="width:10px;">s</span>
    <ul>
        <li><span style="padding-left:10px;"></span><span style="width: 150px; background-color: #CCCCCC;">err ergrg</span><span style="width:10px;">s</span></li>
        <li><span style="padding-left:10px;"></span><span style="width: 150px; background-color: #CCCCCC;">dsfsdfs</span><span style="width:10px;">s</span></li>
    </ul>   
    </li>
</ul>
</body>
</html>
Avatar billede jensgram Nybegynder
13. marts 2009 - 12:22 #1
Hvis du vil tabulere data på den måde er der ikke noget i vejen med en gammeldaws tabel. Det er faktisk mere "korrekt".

Når det så er sagt: Det giver som udgangspunkt ikke mening at sætte dimensioner på et inline-element (e.g. span), hvis ikke det er float'ed.
Avatar billede keysersoze Guru
13. marts 2009 - 12:32 #2
jeg vil hellere sige det gælder om at sætte en korrekt DOCTYPE på - med den nuværende disabler du store dele CSS.
Avatar billede bitkid Nybegynder
13. marts 2009 - 12:37 #3
@keysersoze:
Hov... hvilke css ting virker ikke med html 4.01 men med noget andet? Og hvad er det andet? xhtml?

Håber du kan give et fyldestgørende svar evt. med links til dokumentation. Jeg skal bruge det til en diskussion jeg har med en kammerat :-)
Avatar billede haken Nybegynder
13. marts 2009 - 12:44 #4
Grunden til jeg gerne ville have det lavet på denne her måde var et, jeg tidligere har lavet en folde menu med træstruktur i javascript.
Og nu kunne jeg godt tænke mig at få nogle ikoner på ude i højre side som var tilknyttet.
Så jeg ville bare bygge videre på den eksisterende kode.
Og her ville  det være lettete at bygge videre hvis jeg ikke brugte tabeller.
Men hvis der ikke er nogen "rigtig" måde at gøre det på uden at lave det om til table. Så må jeg gøre det.
Avatar billede haken Nybegynder
13. marts 2009 - 12:48 #5
Selv om jeg brugte en anden DOCTYPE kunne jeg vel ikke få ovenstående til at virke?
Er der ikke en korrekt måde at gøre det på uden at bruge tabeller?
Avatar billede bitkid Nybegynder
13. marts 2009 - 12:50 #6
Man kan vel altid "hacke" sig frem til en løsning.

Hvis du sætter display: block; på din span så burde FF tage højde for din width.

Hvis det absolut skal fungere med den nuværende kode :-)
Avatar billede keysersoze Guru
13. marts 2009 - 12:51 #7
jeg har ikke sagt at der nogle ting der ikke fungerer med html 4.01 - kun at der ikke blev brugt en korrekt doctype. Der er alverden til forskel på

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

og

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Avatar billede keysersoze Guru
13. marts 2009 - 12:52 #8
for god ordens skyld skal nævnes at den første er den rigtige såfremt man laver HTML4 Transitional.
Avatar billede haken Nybegynder
13. marts 2009 - 12:57 #9
problemet er hvis jeg sætter display: block; på den første span kommer den næste span ned i en ny linie.
Avatar billede bitkid Nybegynder
13. marts 2009 - 13:08 #10
@keysersoze:
DOH... Ja, det burde jeg have set :-)

@haken:
Så tilføjer du både display: block; og float: left;

Det er ikke så kønt, men det virker ;-)
Avatar billede haken Nybegynder
13. marts 2009 - 13:41 #11
Jeps så virker det :-)

Hvorfor er det ikke en køn løsning?
Avatar billede bitkid Nybegynder
13. marts 2009 - 14:29 #12
well... man tager et inline-element og sætter en værdi som reelt set gør det til et block-element og så sætter man endnu en værdi som igen gør det til et inline-element.

Jeg ved faktisk ikke om bliver betragtet som korrekt kode, jeg synes bare det ville være kønnere at lave det korrekt, så man har de elementer man har behov for. Men det er aldrig let at skulle rode med andres/gammel kode.
Avatar billede haken Nybegynder
16. marts 2009 - 11:08 #13
Mange tak for hjælpen
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