Søg
Avatar billede pemo123456 Novice
05. juli 2011 - 11:59 Der er 11 kommentarer og
2 løsninger

layout på side forskellig i forskellige browsere.

Hej

Jeg har et problem med en ny hjemmeside, som jeg håber på, at Jeg kan få lidt hjælp til her. Siderne er skrevet i PHP, hvorfor jeg poster i denne kategori, selvom en anden måske havde været bedre.

Problemet med siden er, at layout er forskelligt i forskellige browsere. Jeg har 2 kolonner, hvor forskellen ses. I venstre kolonne er der primært tekst, som bør/skal være align="left". I højre kolonne er der 3 forskellige objekter, som alle skulle være align="top". Som I kan se af nedenstående matrice er det desværre ikke tilfældet. Fejlene udmønter sig ved, at teksten i venstre kolonne centreres frem for at blive venstre stillet, mens de 3 objekter i højre kolonne laver align="center" fremfor align="top", således som det burde.

Kast evt. et blik her: http://golfindr.com/golf_courses_dominican_republic.php?pid=Golf%20Courses%20Dominican%20Republic


+--------+--------+------+
|        |venstre |højre |
+--------+--------+------+
|Mozilla | OK    | fejl |
+--------+--------+------+
|Chrome  | OK    | OK  |
+--------+--------+------+
|IE9    | fejl  | fejl |
+--------+--------+------+
|Opera  | fejl  | OK  |
+--------+--------+------+
Avatar billede kjeldsted Novice
05. juli 2011 - 12:06 #1
Du kan til at begynde med rette de 142 fejl der er i HTML'en: http://validator.w3.org/check?uri=http%3A%2F%2Fgolfindr.com%2Fgolf_courses_dominican_republic.php%3Fpid%3DGolf%2520Courses%2520Dominican%2520Republic&charset=%28detect+automatically%29&doctype=Inline&group=0

Hvis siden er valid i forhold til W3's validator burde siden vises korrekt i alle browsere (hvilket desværre ikke helt er tilfældet, selvom IE er ved at komme efter alle deres fejl). Men det er bestemt et skridt i den rigtige retning.
Avatar billede olsensweb.dk Ekspert
05. juli 2011 - 12:41 #2
#1 helt enig, det er først når en side er valid man bør begynde at tage højde for div. browsere's særheder, og forståelse af std.
en anden fordel ved en valid side er browseren ikke skal bruge tid på at gætte på fortolkningen af tags.

nb: Tabeller er til tabulære data ikke til Design, der er også en del validerings fejl her, hvilke nok er dit største problem, da det får dit design til at skøjte rundt
Avatar billede kjeldsted Novice
05. juli 2011 - 12:52 #3
Desuden. Har du sat en baggrundsfarve på siden???

Min Firefox viser grå baggrund, som jeg engang definerede under debug af noget PHP. Så tror ikke du har defineret en sådan, hvilket betyder browseren selv vælger.
Avatar billede pemo123456 Novice
05. juli 2011 - 13:58 #4
Hej

Tak for jeres tips. Har prøvet at rette, hvad mine evner nu rækker til. De fejl, der nu rapporteres i validatoren,er stort set kun fejl omkring google map og facebook comments. Det er kode, som jeg har taget fra deres sider, og som jeg ikke skal til at rode i. Ingen tvivl om, at de har væsentlig meget mere forstand på det, end jeg har. En gentagene fejl, jeg dog har, er denne, og som jeg ikke kender løsningen på (linie 174):


...    <td><img src="styles/camera.jpg"/> <a href="gal_images/Dominican_Republic...

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

Derudover har det fejl, jeg har rettet, desværre ikke gjort nogen forskel (men selvfølgelig godt, at de er væk).
Avatar billede webweaver Praktikant
05. juli 2011 - 16:33 #5
På billed tags, skal du altid have alt="" attributten med for koden kan validere.

<img src="styles/camera.jpg"/ alt="">

Du har lov til at lade den være tom. Men væn dig til at skrive den ind, hver gang du lavet et img tag.
Avatar billede webweaver Praktikant
05. juli 2011 - 16:33 #6
<img src="styles/camera.jpg"/ alt="">

skal selvfølgelig være

<img src="styles/camera.jpg" alt="" />
Avatar billede olsensweb.dk Ekspert
05. juli 2011 - 17:48 #7
nu ser det ens ud i min FF5 og IE9, dvs i højre side er der er et stort hul mellem FB og billed1, og igen et stort hul mellem1 og billel2 mens i min safari er hullerne væk.

hvis jeg i FireBug editerer virtuelt i siden og setter border=1 på tabellerne kan jeg se en for høj celle højde, men billedet er alignet top i dens respective cellen

og som webweaver skriver set alt="" på dine img, det er 10-15 fejl

google fejlen er også nem at rette udskift & med &amp;
<script src="http://maps.google.com/maps?file=api&v=2&key=
bliver til
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=

i linje 96 skal du escape / i dine tags
var html = "<table><tr><td align=\"center\"><b>" + markers_title1 + "</b><br />" + markers_title2 + "<br />" + pGalery + "</td></tr></table>";

bliver til 
var html = "<table><tr><td align=\"center\"><b>" + markers_title1 + "<\/b><br />" + markers_title2 + "<br />" + pGalery + "<\/td><\/tr><\/table>";
Avatar billede pemo123456 Novice
05. juli 2011 - 21:55 #8
stort tak for jeres hjælp - jeg er nu nede på "kun" at have 5 fejl på den pågældende side. Og de fejl går under min facebook comment plus en enkelt, der har med det javascript galleri, jeg bruger.

Desværre står tingene stadig ikke som de skal. @ #7 kan ikke helt forstå at firebug (som jeg desværre ikke kender, men det skal jeg til nu) ser det som om, at jeg har højde på cellerne, for det har jeg ikke.

Også vedr #2 skriver du, at tabeller ikke dur til layout. Må nok indrømme, at jeg har hørt det før. Hvad vil du i stedet foreslå til layout?? div tags eller? Og har du et link til noget god læsning om det, du foreslår.

Smid venligst begge et svar. I har været en stor hjælp, og jeg vil meget gerne uddele point.
Avatar billede olsensweb.dk Ekspert
06. juli 2011 - 18:10 #9
FireBug http://getfirebug.com/downloads

tabeller vs div
danske
http://www.webdesign101.dk/csslayout/
http://www.webdesign101.dk/artikler/lesstables.php

UK
http://stackoverflow.com/questions/702181/replace-html-table-with-divs
http://www.hotdesign.com/seybold/everything.html
http://www.tizag.com/htmlT/htmldiv.php
Avatar billede webweaver Praktikant
06. juli 2011 - 19:29 #10
Ved ikke lige om du mener et svar fra mig, men nu smider jeg et i hvert fald. Så kan du acceptere det eller lade være, hvis det ikke var myntet på mig :-)
Avatar billede pemo123456 Novice
07. juli 2011 - 10:04 #11
Alle svar har været en stor hjælp, så meget gerne dele.

@ kjeldsted: Smider du et svar, så jeg kan lukke - tak
Avatar billede pemo123456 Novice
08. juli 2011 - 19:26 #12
@ kjeldsted: jeg tager dit manglende svar som at du ikke vil have point og lukker her nu.

har i øvrigt læst lidt rundt om CSS og har også givet det et forsøg, men er desværre stødt ind i problemer - Se evt. med her, hvis I er på jagt efter lidt flere point.

http://www.eksperten.dk/spm/942642

Men under alle omstændigheder stort tak til alle for den hjælp I har givet her. :-)
Avatar billede kjeldsted Novice
09. juli 2011 - 03:15 #13
Det manglende svar betød nu jeg har arbejdet som en sindssyg de sidste par dage og har derfor ikke været online ;)

Men nu hjalp jeg jo heller ikke så meget så havde sikkert takket nej alligevel.
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 PHP kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hvordan får jeg reCAPTCHA på min hjemmeside? Af Strawberry i PHP 0 I går 21:11 -
MS Graph vis kalenderaftaler Af dane022 i PHP 0 06/11/202508:43 -
Hente data fra DEVICE via websocket Af nemlig i PHP 6 25/06/202512:37 25/06/202519:17
Login og redirect Af hrole i PHP 3 24/06/202518:52 24/06/202523:37
Batflat CMS Af sabumnim i PHP 0 06/06/202512:37 -
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 går 21:11 Hvordan får jeg reCAPTCHA på min hjemmeside? Af Strawberry i PHP
I går 16:10 Tomt felt i Start Af ErikHg i Windows
19/0123:00 Hyperlink til tekst Af Nanarsi i Excel
18/0121:03 Forlænge ringetid Af 1Dorte i Apps til Android
17/0117:38 Video ikoner Af Malm i Windows
White papers
Flere white papers »