Avatar billede visto Professor
23. oktober 2010 - 16:23 Der er 10 kommentarer og
1 løsning

<div>: Hvorfor virker padding ikke i venstre side i Firefox?

Jeg "leger" med et minidesign bestående af div'er for at prøve at blive lidt klogere på, hvordan div'er opfører sig: http://vinsiderne.dk/div_test/divside.html

Jeg har W3 valideret både nævnte side og tilhørende typografi.css. Resultatet ser dog forskelligt ud i Firefox og Internet Explorer 7. Både div'erne #content, #inside1 og #inside2 er tildelt padding: 10px. I FF har padding tilsyneladende ingen effekt i venstre side.
Hvorfor ikke?
Avatar billede Slettet bruger
23. oktober 2010 - 16:53 #1
Prøv at gøre din Left Column halvt gennemsigtig:
<div id="leftcolumn" style="opacity: 0.5;">Left Column</div>

Så kan du se, hvad der sker.
Avatar billede Slettet bruger
23. oktober 2010 - 17:03 #2
Hele problematikken i det her er float: left;-kommandoen, som du sætter på Left Column.

Float fortolkes anderledes af IE 7, mens alle andre større browsere (også IE 8) gør det ens.
Din venstre-padding er der hele tiden, ligegyldig hvor du kigger.

I IE 7 regnes div-boksen med float: left; blot som et element som alle andre elementer, hvorimod andre browsere lader boksen flyde ovenpå de andre bokse.
Det mærkværdige er så, at denne flydende boks åbenbart skubber til teksten i de andre bokse men ikke til selve boksene.
Avatar billede visto Professor
23. oktober 2010 - 17:27 #3
Tak for svar.
Jeg er godt nok overrasket, ville egentlig lære om det her med div for at lave et mere nutidigt design på min hjemmeside og troede så at hvis jeg deklarerede doctype og validerede, så var jeg sikker på et nogenlunde ens layout i de store browsere.

Læg venligst svar for point.

Hvis du gider må du godt svare på følgende:
Hvordan ville man kode i denne situation for at opnå virkningen som den tager sig ud i IE7 (for det var det, der var meningen)?

Endelig: Hvis du (eller andre) kender en fra tutorial om div-design, så hører jeg gerne om det. Den må gerne starte fra bunden og arbejde sig op til en vis kompleksitet.
Avatar billede Slettet bruger
23. oktober 2010 - 17:58 #4
Hvis du ønsker at lave afstand mellem to elementer, så er padding en forkert kommando at bruge.

Padding er indre afstand (mellem indhold og kant) - brug i stedet margin, som er ydre afstand (mellem boksen og andre elementer udenfor).

Når du arbejder med float, så vil det fungere, når du fx sætter float på et billede placeret i en tekst. I det tilfælde vil teksten placere sig udenom billedet.
Når der arbejdes med bokse, så vil float fungere godt, når alle elementerne har fx en float: left;.

Altså, prøv engang at sætte følgende css på dine indre bokse:
float: left;
margin: 10px;
width: ...

Jeg har her vist, at du også bør sætte en bredde på boksen, da den masses sammen under float-kommandoen.

Jeg kender ikke umiddelbart nogen egentlige tutorials i div-design, men søg på Google, og du kan finde alt: http://www.google.dk/search?sourceid=chrome&ie=UTF-8&q=design+with+div
Avatar billede Slettet bruger
23. oktober 2010 - 18:01 #5
Altså:
Når et div-element sættes til float, vil det flyde ovenpå de andre div-elementer (i nogle browsere, som du så). Hvis alle div er sat til float, vil de flyde alle sammen og lægge sig ved siden af hinanden.
Avatar billede Slettet bruger
23. oktober 2010 - 18:15 #6
Generelt vil man selvfølgelig altid komme længst med at validere siden, men det er bare bidende nødvendigt lige meget hvad hele tiden at se efter i flere andre browsere end sin egen, når man udvikler på nettet.

At bruge et <div>-design frem for et <table>- (eller et hvilket som helst andet)-design gør ikke nødvendigvis siden nemmere at lave eller mere overskuelig for en browser at forstå og vise. Det er ikke direkte forkert, og den kan i princippet sagtens validere alligevel.
Der er kun to ting i det:

- Koden bliver simpel og overskuelig. Lækkert for Google, for dig, der skal vedligeholde siden, og for mig, der samler tips og tricks fra andre hjemmesider.

- <table> er ikke tiltænkt som sideskelet. <table> skal ikke udgøre nogen form for struktur, det skal blot én eneste ting, nemlig at opstille data.
<div> derimod er i den kategori, der bruges til struktur og opbygning. Det er en kontainer, og det er alt, hvad det er. Derfor skal det bruges til at indeholde og placere, mens <table> viser.
Nogen vil være yderst pernible med at bruge det korrekte her. Andre er måske mere ligeglade...

Alt i alt - det er ikke verdens undergang.
Men simpel kode udgør fremtidens internet.
Avatar billede visto Professor
24. oktober 2010 - 11:12 #7
Ang. #4: Jeg er med på padding kontra margin. Der var faktisk også en margin-bottom på #inside1 som skaber afstanden mellem de to indre div. Men for tydeligheds skyld har jeg sat en margin på begge indre bokse. Jeg har også sat float: left på begge, men var derudover nødt til at sætte clear: left på inside2, da de jo ellers ville ligge ved siden af hinanden. Men her går det galt i FF, hvor inside2 bliver smidt helt ned i bunden under leftcolumn! Mens det ser ud efter mit ønske i IE7. Den nye "version" kan ses her: http://vinsiderne.dk/div_test2/divside.htm

Man skal åbenbart lave to designs, hvis det skal virke både i IE7 og FF? Om jeg så begriber hvad de standarder og valideringer skal til for!! (Jeg har også valideret både den nye html og css side, hvor den kun brokker sig over opacity, men det er jo også kun til anskuelighedsformål at den er med.)

Nå, nu er det her jo ikke et design jeg skal bruge, blot et forsøg på at se, hvad de forskellige parametre gør. Men hvis browserne ikke er mere enige i fortolkningerne forekommer det mig helt uoverskueligt at lave mit design om...
Avatar billede visto Professor
24. oktober 2010 - 11:14 #8
Hov, linket ovenfor var forkert, det skal være http://vinsiderne.dk/div_test2/divside.html
Avatar billede visto Professor
24. oktober 2010 - 14:29 #9
Jeg fik jo svar på mit oprindelige spørgsmål, men hvis nogen kan fortælle mig, hvordan kodningen skal være for at det i FF kommer til at se ud i IE7, vil jeg være både glad for og nysgerrig efter at vide det, da jeg ikke forstår hvad der foregår.
Hvis du ikke har IE7, er her et billede af hvordan det tager sig ud i den browser: http://vinsiderne.dk/billeder/divs.gif
Avatar billede visto Professor
29. oktober 2010 - 18:03 #10
#9 er ikke længere aktuel.
Avatar billede Slettet bruger
30. oktober 2010 - 17:29 #11
Ok. Det kan godt lade sig gøre, men det kræver en del tests undervejs i kodningen.
God fornøjelse med dine eksperimenter. Fortæl endelig, hvis du opdager noget bemærkelsesværdigt undervejs.
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
Alle kurser indenfor Microsoft 365 – både til begyndere og øvede.

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