CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede coldray Nybegynder
06. august 2008 - 10:33 Der er 20 kommentarer og
1 løsning

Layout problem.

Hej eksperter,

Jeg sidder og arbejder på en html-side, men jeg er rendt ind i problemer med cross-browser layout problemer.

skabelonen kan ses på http://www.coldray.dk/projekt/main.html

siden vises fint i firefox, men i IE (7) er der mellemrum mellem top logo og det billede som giver en fade-effekt mellem grå og hvid.

jeg har forsøgt at indsætte en transparent 1x1 pixel i den table row for at se om det gjorde nogen forskel, men der opstod et helt andet problem uden at løse det pågældende.

håber på lidt hjælp her med det relativt lette spørgsmål - tak.
Avatar billede w13 Novice
06. august 2008 - 10:39 #1
Hmm. Ok.

For det første har du ingen gyldig doctype, så derfor er det ikke et gyldigt HTML-dokument. Du har heller ikke noget <head>-element, hvilket er obligatorisk.

Derudover afslutter du dine img-tags med " />", hvilket kun hører til under XHTML, men stadig uden en gyldig doctype er det heller ikke et gyldigt XHTML-dokument. =)

Du bruger en del forældede koder, bl.a. <center>, som ikke er gyldigt længere, og attributter såsom leftmargin, topmargin, marginwidth og marginheight.

Prøv at se, hvordan W3C validerer din side: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.coldray.dk%2Fprojekt%2Fmain.html&charset=%28detect+automatically%29&doctype=Inline&group=0

Alt i alt tror jeg, du ville få meget mere ud af at lave det med div-elementer og CSS.
Avatar billede w13 Novice
06. august 2008 - 10:40 #2
Ligeledes holder bgcolor- og background-attributterne heller ikke i dag.
Avatar billede gedekid Nybegynder
06. august 2008 - 10:53 #3
Du vil også med fordel kunne opbygge layoutet med <div> istedet for med tabeller... og layoutte med CSS...

og som w13 siger, så skal der en doctype med... Hvis der var en WWW domstol, så var sådan noget nok til noget nær til 3-4 gange livstid :)

http://www.w3schools.com/css/default.asp
Avatar billede coldray Nybegynder
06. august 2008 - 10:55 #4
Av.. takker for hurtig respons, sidder og retter til så den opfylder standarderne.

Jamen duer de gode tabeller da slet ikke mere? er det ikke uoverskueligt og besværligt at bruge divs til at opsætte layoutet med istedet for tabeller?
Avatar billede w13 Novice
06. august 2008 - 10:59 #5
coldray>> Nej. :)

Tabeller er jo ment til tabulære data, ikke til design. De virkede måske til design i 90'erne, men i dag er det for besværligt at arbejde med, og når du først lige har vænnet dig til div og CSS, vil du blive rigtig glad for det.

Og det er bestemt ikke uoverskueligt.

I dag gør man det jo sådan, at man lægger alle layoutmæssige informationer i et CSS-dokument, så når noget skal rettes, skal du kun rette der. Det bliver supernemt at arbejde med, og din HTML-kode kommer til at fylde enormt meget mindre. Dette bliver især Google også rigtig glad for, og du vil derfor komme højere på Googles liste. =)
Avatar billede coldray Nybegynder
06. august 2008 - 11:14 #6
Det lyder meget tiltalende, der er ikke andet for end at jeg må forsøge at kaste mig ud i divs til layoutet - troede dog stadig man primært brugte tabeller til layout?
Avatar billede coldray Nybegynder
06. august 2008 - 11:16 #7
Noget helt andet - siden er nogenlunde rettet til så den passer til DOCTYPE mv. dog er der nogle tags jeg helst ikke vil undvære fordi jeg ikke kan finde et alternativ til dem.

Men layout problemet er der stadig - nogle forslag?
Avatar billede w13 Novice
06. august 2008 - 11:46 #8
Nej, langt de fleste bruger i dag divs i stedet for tabeller.

Du kan undgå 4 fejl ved at rette dit body-tag til:

<body style="margin:0">

Så bliver bodys marginer sat til 0px vha. CSS og det er lidt nemmere og pænere end med leftmargin="0px" osv. :)
Avatar billede w13 Novice
06. august 2008 - 11:48 #9
En af de andre fejl er, at alle <img>-elementer _skal_ have en alt-attribut, som forklarer, hvad billedet forestiller. Nogle snyder lidt og skriver bare alt="" for så godtager validatoren det uden at give fejl.

Den sidste fejl lige nu er, at du afslutter det <center>-element, som du ellers har fjernet. I stedet for center-elementet kan du f.eks. bruge:

<div id="margin:auto;text-align:center">

...

</div>

Det burde gøre tricket.
Avatar billede w13 Novice
06. august 2008 - 11:49 #10
Hvis du så i øvrigt retter:

        <td colspan="2" height="100">
            <img src="editor.gif">
        </td>

til:

        <td colspan="2" height="100"><img src="editor.gif" alt="Logo"></td>

Så tror jeg, du undgår fejlen. Den opstår nemlig på grund af linjeskiftene, som Internet Explorer nogle gange tolker som mellemrum. Og mellemrummet er nok det, som skubber dit fade-billede for langt ned.
Avatar billede gedekid Nybegynder
06. august 2008 - 12:25 #11
Dit layout kunne sagtens laves med divs på følgende måde

<div id="container">

<div id="topBillede">billede tag her</div>

<div id="fadeBillede">Fade billede her...</div>

<div id="topMenu">Menu her</div>

<div id="

</div>
Avatar billede gedekid Nybegynder
06. august 2008 - 12:26 #12
Hov...

<div id="container">

<div id="topBillede">billede tag her</div>

<div id="fadeBillede">Fade billede her...</div>

<div id="topMenu">Menu her</div>

<div id="mainContent">Indhold</div>

</div>
Avatar billede coldray Nybegynder
06. august 2008 - 12:53 #13
Jeg sad faktisk og legede med de div'er.

http://www.coldray.dk/projekt/main.html

Siden er valideret, men alligevel kan firefox og IE ikke vise siden på samme måde.. suk..

Den grå linje som ses under logoet i IE kan ikke vises i firefox.
Avatar billede w13 Novice
06. august 2008 - 12:55 #14
Se FireFox's fejlkonsol (Funktioner --> Fejlkonsol)

Der er et par fejl i koden.
Avatar billede w13 Novice
06. august 2008 - 13:01 #15
Dit style-dokument må i øvrigt ikke indeholde:

<style>
<!--

og:

-->
</style>
Avatar billede w13 Novice
06. august 2008 - 13:02 #16
Det er disse, som forårsager fejlene i Fejlkonsollen.
Avatar billede coldray Nybegynder
06. august 2008 - 13:06 #17
Nu helt uden fejl - men stadig samme output
Avatar billede coldray Nybegynder
06. august 2008 - 13:07 #18
Jeg forstår ikke hvorfor de skal være så besværlige :)
Avatar billede w13 Novice
06. august 2008 - 13:20 #19
Hvorfor bruger du ikke bare border i stedet for en div, du kalder "line"?

F.eks. kan du på logoet lægge:

border-top:1px solid gray;
border-bottom:1px solid gray;

Det burde gøre tricket.
Avatar billede w13 Novice
19. august 2008 - 10:40 #20
? :)
Avatar billede coldray Nybegynder
07. august 2011 - 16:22 #21
lukker
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML 2 30/10/202409:37 30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML 2 29/09/202410:58 30/09/202412:04
Bredde på div elementer Af dane022 i HTML 2 16/02/202408:29 20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML 2 21/12/202322:51 22/12/202308:03
validering <input tlfnr. Af slein55 i HTML 5 15/10/202311:43 15/10/202314:51
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 06:10 Excel åbner fil i kæmpe format Af Aske i Excel
I går 22:00 Datafordeler Af Lsk i PHP
I går 12:37 Summere beløb pr. dato Af TTA i Excel
31/1022:44 Tilslutte chassic fans Af viking69 i PC
31/1020:28 LED lysstofrør Af ErikHg i Fri debat
White papers
Flere white papers »


Premium
Teaser billede
Staten vil selv udvikle kæmpe it-system til 650 millioner kroner: Nu tvinges regeringen til at lægge vigtige dokumenter frem
Læs mere »
Det går fantastisk på det danske Dynamics-marked: NNIT-selskabet Scales kan vælge og vrage mellem opgaver
Skelsættende GDPR-sag ændrer definitionen af 'følsomme oplysninger'
Microsoft: Tvungen skift til Windows 11 kan udskydes med et år, hvis du betaler os 200 kroner
Se alle »
Computerworld
Teaser billede
Russisk domstol: Google skal betale 20 kvintilliarder dollar i bøde - fordobles løbende
Læs mere »
Microsoft: Windows-opdateringer bliver nu 45 procent hurtigere
Test: Det er nærmest vanedannede at anvende disse mini-tastaturer
Så er den her: Apple Intelligence bliver tilgængelig på iPhone, iPad og Mac
Se alle »
CIO
Teaser billede
Novo Nordisk satsede på HoloLens, men nu har Microsoft dræbt produktet
Læs mere »
Microsoft: Sådan arbejder Google målrettet på at skade os i det skjulte
Efter markante prisstigninger: VMware-kunder får dummebøder hvis de ikke skifter hurtigt nok til ny licens-ordning
Trods "indlysende ulempe": CIO Torben Ruberg siger nej til at konsolidere Satairs stribe af ERP-systemer
Se alle »
Job & Karriere
Teaser billede
Pludselig exit fra Schultz kom som en overraskelse for Merete Søby: Derfor stoppede samarbejdet
Læs mere »
Merete Søby fratræder med omgående virkning som CEO for Schultz efter blot tre måneder på posten
Danske Aeven flytter hele hovedkontoret med 600 medarbejdere til ny adresse og tager Sentia med
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Se alle »
White paper
Teaser billede
Cyberstatus 2024: Her er truslerne – og her forbereder virksomhederne sig
Læs mere »
Vær proaktiv og prioritér IT-sikkerheden – før det er for sent
MDR: Transparent sikkerhed og overvågning i realtid
Sæt turbo på din cloudperformance og minimér risikoen for DDoS-angreb
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »