Avatar billede Slettet bruger
23. juni 2009 - 11:00 Der er 14 kommentarer og
1 løsning

Design til forskel i browsers

Hej jeg er i gang med et deisgn.
Men så testede jeg designet i 11 forskellige browsers her er listen over hvad for nogle browsers det gik galt i samt et Screenshot:

Mozilla Firefox
http://i625.photobucket.com/albums/tt333/Wipez/MozillaFirefox.png

Avant browser
http://i625.photobucket.com/albums/tt333/Wipez/avantbrowser.png

Google chrome
http://i625.photobucket.com/albums/tt333/Wipez/chrome.png

Deepnet
http://i625.photobucket.com/albums/tt333/Wipez/deepnet.png

Flock
http://i625.photobucket.com/albums/tt333/Wipez/flock.png

Maxthon
http://i625.photobucket.com/albums/tt333/Wipez/maxthon.png

Opera
http://i625.photobucket.com/albums/tt333/Wipez/opera.png

Safari
http://i625.photobucket.com/albums/tt333/Wipez/safari.png

------------------------------------------------

så mit spørgsmål er hvordan jeg kan få det til at passe i alle browsere.

Tak på forhånd
Avatar billede keysersoze Ekspert
23. juni 2009 - 11:13 #1
Screenshots fortællers os desværre ikke så meget - men en oplagt grund, og løsning, til de problemer kan du læse lidt om her; http://web-dev.dk/post/2009/06/DOCTYPE-og-valid-kode---ens-udseende-i-Internet-Explorer-og-FireFox.aspx
Avatar billede Slettet bruger
23. juni 2009 - 13:26 #2
Det hjalp ikke.
og har valideret min css
Avatar billede keysersoze Ekspert
23. juni 2009 - 13:44 #3
Så kom med et link eller din kode - ellers vil det være umuligt at give et svar.
Avatar billede Slettet bruger
23. juni 2009 - 13:46 #4
Min hjemmeside er www.wipez.dk

og her er hele min css kode:

body {
    margin: 0 auto;
    background-color: #3a3a3a;
}
/* header */
#header {
    height: 150px;
    margin: 0 auto;
    background-image: url("images/header.png");
    border-bottom: 1px solid #767676;
}/* --------- slut med header --------- */
/* menu */
#menu{
    padding: 25px 15px 0 650px; /*flytter menuen rundt på linjen  */
    margin-top: 61px;
}

ul#simple-menu{
    list-style-type: none;
    width: 100%;
    height: 27px;
    font-family: "Trebuchet MS",Arial,sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin: 100px;
    padding: 11px 0 0 0;
}

ul#simple-menu li{
    display: block;
    border-top: 1px solid #727272;
    border-right: 1px solid #727272;
    border-left: 1px solid #727272;
    float: left;
    margin: 0 0 0 4px;
    height: 27px;
}

ul#simple-menu li.left{
    margin-left: 250px;
}

ul#simple-menu li a{
    display: block;
    float: left;
    color: #1a1a1a;
    background: #405554;
    line-height: 27px;
    text-decoration: none;
    padding: 0 17px 0 18px;
    height: 27px;
}

ul#simple-menu li a.right{
    padding-right: 19px;
}

ul#simple-menu li a:hover{
    background: #193f40;
}

ul#simple-menu li a.current{
    color: #2E4560;
    background: #fff;
}

ul#simple-menu li a.current:hover{
    color: #2E4560;
    background: #fff;
}
/* --------- slut med menu --------- */
/* content */
#content {
    background-color: #3a3a3a;
}
#content p {
    color: #1a1a1a;
    font-size: 14px;
    margin-left: 300px;
    margin-right: 300px;
    margin-top: 50px;
}
/* --------- slut med content --------- */
/* footer */
#footer {
    margin: 0 auto;
    height: 100px;
    width: 800px;
    line-height: 30px;
    border: 1px solid #1a1a1a;
    background-image: url("images/footer.png");
}
#footer p {
    margin-top: 5px;
    color: #1a1a1a;
    font-size: 14px;
    text-align: center;
}
#footer a{
    text-decoration: none;
    color: #1a1a1a;
}
/* --------- slut med footer --------- */
/* ekstra */
.date{
    font-size: 12px;
    color: #626262;
    margin-left: 5px;
    padding-bottom: 4px;
}
.ur {
    margin-left: 240px;
    margin-top: 2px;
}
a { text-decoration: none; }
a:hover { background: #405554; color: #fff; }
/* --------- slut med ekstra --------- */
Avatar billede keysersoze Ekspert
23. juni 2009 - 17:51 #7
Det du kigger på er udelukkende validaring af din CSS - og din CSS kan være tæt på ligegyldig med fejlbehæftet HTML.
Avatar billede keysersoze Ekspert
23. juni 2009 - 17:51 #8
... og det er HTML-valideringen jeg henviser til.
Avatar billede Slettet bruger
23. juni 2009 - 19:58 #9
ups, men den validere jo også at jeg slutter mine atributter forkert f.eks. <p">" der siger den at det der står i gåseøjne er forkert.
Avatar billede Slettet bruger
23. juni 2009 - 20:11 #10
jeg sidder og prøver at rette fejlene men den siger det er en fejl at dokumentet selv skriver:

<html xmlns="http://www.w3.org/1999/xhtml">


evt. kig selv de fejl den syntes der er linje 2
her:
http://validator.w3.org/check?uri=http%3A%2F%2Fwipez.dk%2F&charset=%28detect+automatically%29&doctype=HTML+2.0&group=0&user-agent=W3C_Validator%2F1.654
Avatar billede keysersoze Ekspert
23. juni 2009 - 21:38 #11
Den fejl du henviser til ang xmlns fremkommer kun hvis du i validatoren vælger en anden doctype end hvad documentet allerede har - så den behøver du ikke kigge på. Og ja, den melder fejl tilbage hvis du slutter dine elementer og/eller attributter forkert - alle ting, der strider imod reglerne i den angive DOCTYPE vil give en fejl, så jeg tror ikke helt at du har læst nok på den artikel jeg henviste til.

En måske knap så gennemskuelig ting omhandler &-tegnet i urls - disse problemer kan du løse ved at skrive &amp; i stedet for bare &.

Så snart du har løst disse problemer giver det mening at kigge på din HTML og CSS - mest oplagt er noget omkring dine margins både på id="simple-menu" og på id="menu", men hvis du evt installerer FireBug til FireFox kan du bedre se hvad der egentlig gør hvad i din kode.
Avatar billede Slettet bruger
16. august 2009 - 16:34 #12
.
Avatar billede keysersoze Ekspert
17. august 2009 - 17:51 #13
tak for hjælpen?
Avatar billede snowball Novice
19. august 2009 - 08:54 #14
Wipez: Forklar venligst hvorfor du selv tager pointene for spørgsmålet når du har fået så meget hjælp?
Avatar billede Slettet bruger
20. august 2009 - 19:29 #15
Det har været en fejl.
Kig forbi denne tråd her:
http://www.eksperten.dk/spm/884247

og opret et svar, altså jer der føler jer snydt :D

Jeg beklager meget, det skal ikke ske igen..
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
Kurser inden for grundlæggende programmering

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