Avatar billede claushelth Nybegynder
18. januar 2005 - 21:31 Der er 26 kommentarer

height width problem IE/FF

Hej Eksperter

Jeg har længe kæmpet med at få lavet en generisk boks i css/html til tekst, som virker både i IE og Firefox, men jeg kan simpelthen ikke få det til at virke!

Jeg har lavet et lille eksempel, men det virker ikke i Firefox :-(
Eksemplet består af en div, ud over 3 andre bokse. De to bokse i siderne indeholder et billede som er 100% height, og boksen i midten indeholder tekst. Problemet er et jeg ikke vil angive højden på min boks, da den skal udvide sig efter hvor meget tekst der står i den. Men yderboksen (den røde), vil ikke udvide sig od over den blå.

<html>
<head>
    <title>fhelth</title>
</head>
<body>

<div style="border:1px solid red;height:30px;width:100px;">
  <div style="border:1px solid green;float:left;height:100%;">
    <img src="lineLeft.bmp" width="6px" height="100%" />
  </div>

  <div style="border:1px solid blue;float:left;width:82px;">
    hej der! hvem er du så min ven.<br />
    hej der!<br />
    hej der!<br />
  </div>

  <div style="border:1px solid green;float:right;height:100%;">
    <img src="lineRight.bmp" width="6px" height="100%" />
  </div>

</div>


</body
</html>
Avatar billede olebole Juniormester
18. januar 2005 - 21:36 #1
<ole>

Uden en fuld DTD kan du ikke bruge CSS i IE. Når noget ser rigtigt ud i IE og du ikke bruger en fuld DTD, er CSS'en formodentligt forkert:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

Dernæst skal du sætte body- og html-elementernes højde til 100%, hvis du vil bruge relative højder på elementer, der ligger i body'en:

<style type="text/css">
body, html {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
</style>

/mvh
</bole>
Avatar billede olebole Juniormester
18. januar 2005 - 21:38 #2
... derudover ville et link til eksemplet være dejligt ... eller en fuld sti til dine billeder
Avatar billede olebole Juniormester
18. januar 2005 - 21:42 #3
I øvrigt sætter du jo explicit boksen med den røde border til at være 30px høj - er det et problem, den opfører sig, som du beder den om?
Avatar billede claushelth Nybegynder
18. januar 2005 - 21:43 #4
hej igen

men nu virker det hverken i IE eller FF :-(
Avatar billede olebole Juniormester
18. januar 2005 - 21:45 #5
Jo, den opfører sig, som du beder den om. Prøv at uploade et billede af det, du ønsker dig - ellers bliver det rent gætteri
Avatar billede claushelth Nybegynder
18. januar 2005 - 22:11 #6
hej igen...
ok nu har jeg endlig fået lagt den online ;-)
og jeg har ændret den som jeg oprindelig ville have, så side billederne kommet ind i css'en igen.
Jeg kan dog stadig ikke få den vist korrekt...jeg har forsøgt rigtig mange ting, men kan ikke finde den korrekte måde at gøre det på :-(
vh
Claus
Siden kan findes her: http://www.fhelth.dk/test/
Avatar billede olebole Juniormester
18. januar 2005 - 22:18 #7
Fejl:
    <div style="border:1px solid green;float:left;height:100%;width:6px;background-image: url(./lineLeftTemp.bmp);">
&nbsp;
           
      </div>

Du har sat gåseøjnene forkert og du må ikke have tomme elementer
Avatar billede olebole Juniormester
18. januar 2005 - 22:20 #8
Fejl:
  <div style="border:1px solid green;float:left;height:100%;width:6px;background-image: url('http://www.fhelth.dk/test/lineLeftTemp.bmp');">

Du må ikke have dobbelte gåseøjne mellem dobbelte gåseøjne
Avatar billede claushelth Nybegynder
18. januar 2005 - 22:21 #9
ahh....sorry, det var en copy fejl..2 sec
Avatar billede olebole Juniormester
18. januar 2005 - 22:33 #10
Men derudover kommer du ikke udenom at give dit yderste div en højde. CSS-standarden foreskriver, at hvis man sætter en relativ højde på et element, skal denne beregnes udfra højden, sat på det omkransende element
Avatar billede olebole Juniormester
18. januar 2005 - 22:35 #11
Til kolonner er tables stadig det bedste element - som W3C da også anbefaler til brug ved kolonne inddeling og visning af tabullerede data  :)
Avatar billede claushelth Nybegynder
18. januar 2005 - 22:37 #12
ja det har jeg også tænkt, men jeg kan ikke finde dokumentation til css til at lave denne beregning. Ved du hvordan jeg kan gøre dette?
Avatar billede claushelth Nybegynder
18. januar 2005 - 22:40 #13
ok..jeg har tit benyttet tabeller, men jeg kunne godt tænke mig at lave en generisk boks (som jeg senere vil ligge ind i en kontrol i C#).
På den måde vil jeg kunne sætte mine div bokse ind i hinanden. (jeg har både top og bund klar, men højden på midten driller hele tiden)
Avatar billede claushelth Nybegynder
18. januar 2005 - 22:48 #14
hov tror jeg misforstod din besked om beregning af højden. Men er det ikke muligt at lave en div der har relativ højde, og inden i den en anden div med 100% som højde, som kan benyttes til tekst. Når teksten er blevet renderet i div elementet ville jeg jo så se om jeg kunne finde højden på det inderste element, og derefter give den yderste div denne højde.
Jeg mener det er blevet gjort på jubii's side, men det er ret uforståeligt at læse deres css.
Avatar billede claushelth Nybegynder
18. januar 2005 - 23:31 #15
jeg har kigget i jubii's html, og de bruger kun table et sted, og det er ikke til at lave en boks. Deres design ændrer sig afhænigt af indholdets størrelse, men de bruger ikke tables...derfor må man jo kunne manipulere højden på et div element!

vh
Claus
Avatar billede claushelth Nybegynder
19. januar 2005 - 01:05 #16
ahh..ok, jeg ved ikke om det helt passer det jeg skrev før. Jeg har testet noget mere, og det ser ud som om det bliver gjort på en lidt anden måde.

Dog kunne det være meget interessant at vide om det er mulligt via css at læsse en anden div's højde, for der efter at kunne give en anden div samme højde!

Jubii's små bokse ude i siden består af lange baggrundsbilleder, som har en fast width. billedet er sat nederst i det ene hjørne, og jo mere man skriver i boksen jo mere af baggrundsbilledet bliver vist.
Avatar billede olebole Juniormester
19. januar 2005 - 01:39 #17
Kan du ikke lige banke en gif/jpg op af, hvordan du vil have det færdige resultat til at se ud (med top og bund). Så skal jeg lige klippe grafikken og banke HTML'en af
Avatar billede olebole Juniormester
19. januar 2005 - 02:15 #18
Dooohhh ... hvorfor tænker jeg mig dog ikke om?  :)

<div style="width:100px;background:url(http://www.fhelth.dk/test/lineLeftTemp.bmp) repeat-y left;border:1px solid red">
<div style="width:100px;background:url(http://www.fhelth.dk/test/lineRightTemp.bmp) repeat-y right;text-align:center">

    <div style="width:82px;border:1px solid blue;margin:0px auto;text-align:left">
            hej der! hvem er du så min ven.<br />
            hej der!<br />
            hej der!<br />
      </div>

</div>
</div>

'text-align:center' for at centrere i ældre opdateringer af IE6 end den seneste.
'margin:0px auto' for at centrere i alle andre brusere.
'text-align:center' - da teksten ellers arver centreringen
Avatar billede olebole Juniormester
19. januar 2005 - 02:17 #19
*host-host*  'text-align:left' - da teksten ellers arver centreringen  ;o)
Avatar billede claushelth Nybegynder
19. januar 2005 - 10:12 #20
Super cool, den løsning havde jeg faktisk været inde på uden at teste det, men man har det med at gøre tingene sværere end de i virkeligheden er ;-), takker mange gange.

Smid et svar...
Avatar billede claushelth Nybegynder
20. januar 2005 - 01:06 #21
Hej igen...håber du smider et svar!
Jeg ville lige vise resultatet af din hjælp :-)

http://www.fhelth.dk/test
Avatar billede quisifa Nybegynder
22. januar 2005 - 15:31 #22
Det er meget flot, men det virker ikke i firebird / mozilla
Avatar billede claushelth Nybegynder
23. januar 2005 - 19:50 #23
Olebole -> Giver du et svar!

quisifa -> Ja det har du ret i. Min holdning til html er at vi ikke altid kan tage højde for samtlige browsere på markedet. Jeg mener ikke man bruger sin tid effektivt nok, hvis man skal tjekke alle browsere på alt hvad man laver, da størstedelen af brugerne kun bruger et snævert udsnit. Jeg må indrømme jeg ikke havde prøvet firebird før. Men inden jeg gik i gang med at ændre hele mit design, tjekkede jeg en statistik på fdim's hjemmeside (http://www.fdim.dk/default.asp?vis=page&ID=73), og må desværre tørt konstatere at top 5 på mest benyttede browsere står for 98%, og ud over IE er de eneste andre to konkurrenter Netscape 4.0 og Firefox 1.0....men tak for hjælpen alligevel ;-)
Avatar billede olebole Juniormester
23. januar 2005 - 22:19 #24
quisifa >> Hvad er det, du ikke mener fungerer i FF/Moz?

claushelth >> Man kan næsten altid tage højde for stort set samtlige browsere på markedet.
Den slags statistikker er ikke en døjt værd og oplyser intet om, hvad dit site bør understøtte. Gå i en laaaang bue uden om dem ... det gør alle professionelle  ;o)
Avatar billede olebole Juniormester
23. januar 2005 - 22:20 #25
... og så går jeg i øvrigt ud fra, tiden er kommet til et svar  :)
Avatar billede claushelth Nybegynder
24. januar 2005 - 09:28 #26
Tak for det olebole, jeg kan iøvrigt sige at jeg har fået bygget denne generiske boks ind i en control i asp.net, og det er super nemt nu at lave hjemmesider med dem. Den understøtter bla.a. margin, padding og de 8 gfx elementer kan ændres via css'en. Nu skal jeg have bygget background-imae ind i den, samt lidt andre småtingt.
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