Avatar billede super_glenn Nybegynder
21. september 2005 - 17:20 Der er 30 kommentarer og
1 løsning

Problem med firefox og padding?

Hej igen
Jeg prøver at kaste en boks sammen vha. <div> efter at jeg utalig steder har læst at det skal man i stedet for at bruge <table>, men nu har jeg så et problem med at firefox ikke læser det som jeg gerne vil have det... I IE ser det hele derimod fint ud. Hvad kan jeg gøre for at det ser ud lige som i IE i firefox og for såvidt også i safari og opera (har ikke selv de browsere)?

link: http://www.gymfest.frac.dk/test/boks.htm

css:

div.container {padding: 0px;}

div.headerbox {width: 250px; height: 20px; background: url(headerbox.gif); background-repeat:
no-repeat; border: 0px solid; border-color: black; padding: 0px; margin: 0px 0px 0px 0px; padding: 3px 3px;}

div.contentbox {width: 250px; height: 300px; border: 0px solid; border-color: black; padding: 0px;

background-color: #EAEAEA; color: #000; margin: 0px 0px 0px 0px; padding: 2px 3px;}

p.hvid {font: bold 8pt verdana,helvetica,sans-serif; color: #FFF; background-color: transparent;}

p.sort {font: 8pt verdana,helvetica,sans-serif; color: #000; background-color: transparent;}

/glenn
Avatar billede roenving Novice
21. september 2005 - 17:23 #1
Hvis du ikke sætter doctype på, vil du stort set aldrig få det samme ud af forskellige browsere, så prøv at starte med det !-)

F.eks.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
Avatar billede olebole Juniormester
21. september 2005 - 17:24 #2
<ole>

http://www.eksperten.dk/spm/649514
- min kommentar (21/09-2005 16:31:59) og efterfølgende. Der diskuteres samme emne  :)

/mvh
</bole>
Avatar billede olebole Juniormester
21. september 2005 - 17:25 #3
Avatar billede super_glenn Nybegynder
21. september 2005 - 17:38 #4
Jep det er selvfølgelig en god idé
Plejer at bruge xhtml 1.0 trans, så den har jeg brugt igen.
Nu ligner resultatet i browserne mere hinanden, men desværre er det ikke til det bedere.
Hvordan kan jeg optimere min css kode sådan at de to div med henholdsvis headeren og den grå kasse ligge helt tæt og hvordan styrre jeg paddingen sådan, at jeg selv kan kontrolere hvor i div boksen jeg har min tekst/indhold !?
Avatar billede roenving Novice
21. september 2005 - 17:46 #5
Hvis du nu fjerner xml-prologen, som IE bruger som undskyldning for ikke at overholde css-standarden ser det nok mere ens ud !-)
Avatar billede super_glenn Nybegynder
21. september 2005 - 17:48 #6
Ehm ja... men mit mål er ikke at få siden til at se ud som den gør i firefox. Målet er at få den til at se ud som i IE pt. men på en korrekt måde :)
Avatar billede roenving Novice
21. september 2005 - 18:01 #7
Så længe IE ikke overholder css-standarden, kan du godt opgive at få andre browsere til at vise det på andre måder !-)
Avatar billede super_glenn Nybegynder
21. september 2005 - 18:10 #8
suk! er det virklig umuligt at få noget så simpelt som sådan en boks der til at se så godt som ens ud i alle de store browsere.... det er da mega træls
Avatar billede roenving Novice
21. september 2005 - 18:16 #9
Det er faktisk meget nemt, men så skal selv IE tvinges til at overholde de samme standarder omkring box-modellen, som de andre browsere honorerer automatisk ...
Avatar billede super_glenn Nybegynder
21. september 2005 - 18:23 #10
okay jeg indleder mit korstog mod MS nu :P ej der må da være en måde at komme omkring det på... jeg er bekendt med boks modellen, men hvordan er den rigtig måde at style sin <div>'s på hvis man gerne vil kunne styrre hvor indholdet i dem skal placeres? og hvordan får jeg placeret de to <div>'s helt tæt på hinanden? jeg synes jeg har sat margin til 0, border og padding til 0 som vel grundlæggende er de tre ting boks modellen består af?
Avatar billede jesper-moeller Nybegynder
21. september 2005 - 18:28 #11
glenn >>

*S* ....giv ikke op ... *S* ....du er på rette vej...*S*
CSS virker temligt "forvirende" i starten.... men så komme den dejlige AHA dag hvor det  dæmre for en og man kan se lyset ... Pludselig begynder man at forstår hvordan CSS egenligt fungere ... og hvor  "simpelt" man skal tænke når man bruger det... *S*
Avatar billede roenving Novice
21. september 2005 - 18:33 #12
-- du afslutter jo begge style-rules med padding: noget !-)
Avatar billede roenving Novice
21. september 2005 - 18:34 #13
Jeg fatter ikke lige hvad det er du prøver, men sådan virker det ens for mig:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <style type="text/css">
  div.container {padding: 0px;}

div.headerbox {width: 250px; height: 20px; background: url(headerbox.gif) no-repeat red; border: 0; padding: 0px; margin: 0;}

div.contentbox {width: 250px; height: 300px; border: 0px solid; border-color: black; padding: 0px;

background-color: #EAEAEA; color: #000; margin: 0;}

.hvid {font: bold 8px verdana,helvetica,sans-serif; color: #fff;}

.sort {font: 8px verdana,helvetica,sans-serif; color: #000; background-color: transparent;}
</style>
    <title>boks</title>   
    <link href="stil.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="container">
        <div class="headerbox hvid">
          Hall of shame</div>

        <div class="contentbox sort">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque in ligula. Aenean nonummy. Suspendisse lobortis odio a nunc. Aliquam elit pede, accumsan et, condimentum id, mattis sed, libero. Integer fermentum urna quis pede. Curabitur ante metus, euismod at, vehicula eget, pretium a, purus. Vestibulum ut nunc. Pellentesque eget velit. Integer egestas magna sed sem. Sed aliquet lectus quis felis. Donec diam ante, dignissim ac, ultricies vel, pharetra eget, nulla. Mauris vulputate, quam ut tincidunt fringilla, dui quam scelerisque mauris, in dignissim est ligula quis elit. Aenean faucibus. Fusce eu libero eleifend leo ultricies interdum.

        </div>
    </div>

</body>

</html>
Avatar billede olebole Juniormester
21. september 2005 - 19:04 #14
Problemet er nok, at du benytter en XML-prolog før DTD'en. Det kan du ikke i IE, hvis du samtidig ønsker at bruge CSS.

Nu er der i forvejen al mulig grund til at undlade at bruge XHTML, så problemet er ikke så stort. Når XHTML endelig kan bruges til noget fornuftigt, understøtter browserne det også ... og så mangler koderne blot at lære at bruge teknologien  ;o)

Prøv at læse disse to:
    http://www.eksperten.dk/artikler/537
    http://www.eksperten.dk/artikler/538
Avatar billede super_glenn Nybegynder
21. september 2005 - 19:24 #15
Roenving ->Fiks sammenskrivning af koden, må man godt undlade at bruge tagget <p>?
Jeg har nok været lidt dårlig til at forklare mit problem. Jeg prøver igen mere systematisk denne gang :) :
Jeg vil gerne lave en boks.
Boksen skal bestå af to dele en header og en kasse til indhold
De to dele skal ligge helt tæt på hinanden
Jeg vil gerne have at boksen ser ordenlig ud i mindst FF og IE
Bl.a. derfor vil jeg også gerne overholde standarterne
Når det kommer til layout er jeg lidt pernippen
Derfor vil jeg gerne selv bestemme hvor teksten i henholdsvis boksens header og indholds kasse skal befinde sig.

Mit problem er at jeg ikke ved hvordan jeg får alle mine krav til at spille sammen...
Jeg har lavet en lille illustration for at symbolisere hvad det er jeg ønsker og hvordan det er pt. http://www.gymfest.frac.dk/test/cssproblem.gif

olebole-> Mener du at jeg i stedet skal bruge en html 4.01 som DTD ?

Jesper-> okay tak :)

For en god ordens skyld må jeg hellere understrege at jeg absolut er en glad amatør så i må bærer over med mig hvis jeg ikke lige er helt med på alt det tekninske.... :D
Avatar billede super_glenn Nybegynder
21. september 2005 - 19:28 #16
Hvis man ser på min lille illustration så kan man sige at det jeg godt kunne tænke mig var gældende for "alle" browsere er at at teksten inden i boksen placere sig ligesom det  vises i firefox og at de to dele af boksen hænger sammen ligesom det vises i IE
Hvis i forstår hvad jeg mener...
Avatar billede super_glenn Nybegynder
21. september 2005 - 19:32 #17
Heh hovsa der dummede jeg mig vist med roenvings kode ser boksen selvfølgelig ens ud både i IE og FF så er der kun problematikken tilbage med at få de to dele til at ligge helt op af hinanden og til at have samme width (jeg har rettet min illustration)
Avatar billede roenving Novice
21. september 2005 - 19:34 #18
I alle mine browsere ser koden nøjagtig ens ud !o]

-- men bemærk, at jeg har udeladt xml-prologen, rettet pt til px, samt fjernet nogle linjeskift og p-tags, som ser ud til bare at være overflødige (og de er bestemt ikke nødvendige nogetsomhelst sted !-)
Avatar billede super_glenn Nybegynder
21. september 2005 - 19:43 #19
okay men ehm hvordan ser din omskrivning ud rent visuelt ser den ud lige som her: http://www.gymfest.frac.dk/test/cssproblem.gif ?! for så har jeg stadig problemmet med at den røde header og den grå boks dels ikke har samme width og dels ikke ligger helt op ad hinanden...
Avatar billede roenving Novice
21. september 2005 - 19:46 #20
Har du prøvet bare at bruge den kode, jeg har lagt ?-)

-- for jeg kan ikke se andre forskelle i mine browsere, end at der er forskellige margin/padding på body-elementet !-)
Avatar billede super_glenn Nybegynder
21. september 2005 - 20:03 #21
hmm her er en copy/paste af din kode: www.gymfest.frac.dk/test/boks2.htm  (har kun ændret lidt på tekst størrelsen)
Avatar billede super_glenn Nybegynder
21. september 2005 - 20:04 #22
Det var mærkligt den ser anderledes ud på nettet end den gjorde på min egen computer?!
Avatar billede roenving Novice
21. september 2005 - 20:05 #23
Så mangler du kun lidt padding, så skulle den være fjong !-)
Avatar billede jesper-moeller Nybegynder
21. september 2005 - 20:06 #24
glenn

Husk at ryde din cache....*S*....den kan snyde en indimellem
Avatar billede super_glenn Nybegynder
21. september 2005 - 20:14 #25
Roenving-> Jeg bukker og takker roenving!

Jesper-moeller-> Hehe som sagt en glad amatør tak for tippet :)
Avatar billede nfk Nybegynder
21. september 2005 - 20:27 #26
Nu ser det vidst pænt ud i alle browsere også med paddingen så teksten ikke står helt til venstre og i toppen :)
Avatar billede nfk Nybegynder
21. september 2005 - 20:29 #27
det gør det i hvertfald i mine browsere <-> har været med på en lytter :D
Avatar billede super_glenn Nybegynder
21. september 2005 - 20:36 #28
hehe yes yes jeg har lige ændret det! og ja det virker også fino her sååå roenving kast et svar og scor de velfortjente point ;)
Avatar billede roenving Novice
21. september 2005 - 22:21 #29
Velbekomme '-)
Avatar billede roenving Novice
25. september 2005 - 01:12 #30
-- og tak for point ;~}
Avatar billede olebole Juniormester
03. oktober 2005 - 16:05 #31
Undskyld, jeg har været fraværende et par uger, men til din kommentar:
    "olebole-> Mener du at jeg i stedet skal bruge en html 4.01 som DTD ?"

- Ja, XHTML har dine brugere kun besvær af, som nettet ser ud idag. Desuden kommer der ikke XHTML udaf at følge anvisningerne i de fleste tutorials (herunder html.dk's) ... kun dårlig, fejlfyldt HTML4  :)
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