Avatar billede netpimp Nybegynder
31. december 2008 - 07:18 Der er 16 kommentarer og
2 løsninger

Designet virker ikke i IE

Hej,

Jeg har de seneste par dage arbejdet på et website og er nu endelig godt tilfreds med designet som det ser ud i FF, jeg kom så i tanke om jeg hellere lige måtte se hvordan det så ud i IE og, og kan til min store skræk se at det er fucket helt op i IE.

De forskellige div der er lavet sidder slet ikke de steder som de burde og gør at det ser tåbeligt ud.

Nu har jeg så natten igennem forsøgt at finde ud af hvordan jeg kan rette det, men har måtte opgive, så jeg håber der er en her der kan hjælpe mig lidt på vej.

Sitet er: www.123porn.dk (Bemærk at det er et porno site).

På forhånd tak.
Avatar billede zips Juniormester
31. december 2008 - 13:55 #1
Med så mange fejl på siden kan det kun gå galt http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.123porn.dk%2F så start med at rette dem.
Avatar billede olebole Juniormester
31. december 2008 - 17:24 #2
<ole>

- og hvis vi starter fra toppen, så disabler denne linje:
    <?xml version="1.0" encoding="iso-8859-1"?>

- de væsentligste dele af CSS i IE6. Derudover understøtter IE7 slet ikke XHTML 1.0 Strict, hvis dokumentet serves med den korrekte MIME-type. Den vil i stedet tilbyde brugeren at downloade dokumentet.
Det gør ikke så meget nu, hvor du sender dokumentet som alm. 'taxt/html' - men der er tilgængæld heller ikke en browser på WWW, der opfatter en XHTML-kode, sendt som 'text/html', som andet end skidt HTML-sovs.

HTML 4.01 er den seneste markup-version, som understøttes på WWW - og hvis du ændrer din DTD, 'forsvinder' langt de fleste af dine fejl formodentlig  ;o)

/mvh
</bole>
Avatar billede olebole Juniormester
31. december 2008 - 17:25 #3
"og hvis du ændrer din DTD, 'forsvinder' langt de fleste af dine fejl formodentlig" >> forudsat, du ændrer dine XHTML-lukninger til alm. lukninger: ' />' --> '>'
Avatar billede netpimp Nybegynder
01. januar 2009 - 05:18 #4
Så nu har jeg prøvet at skrive hele siden om til HTML 4.01 Transitional, og koden skulle gerne være valid, dog uden at de har hjulpet på nogen af problemerne.
Min CSS skulle også være valid CSS level 2.1, jeg ved dog ikke om der er noget af dette der ikke er understøttet af IE.
Avatar billede zips Juniormester
01. januar 2009 - 15:54 #5
Når man kun bruger en halv doctype med Transitional virker det lige så dårligt som det var, sæt denne doctype på.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Og prøv denne tilpasset css

body{
    margin: 0;
    padding: 0;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
    vertical-align: top;
    background: #fff;
    color: #333;
}

a{
    text-decoration: underline;
    color: #000;
}

a:hover{
    text-decoration: underline;
}

h1{
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 18px;
}

#content{
    float: left;
    width: 680px;
    overflow: hidden;
    background: #f1f1f1;
}
#wrapper{
    width: 980px;
    margin: 0 auto;
    text-align: left;
}

#header{
    width: 680px;
    height: 250px;
    background: #dde6fe;
    text-align: center;
    margin: 0 auto;
}

img {
    border-style: none;
}

#top{
    width: 680px;
    background: #41b6fb;
    line-height: 16px;
    text-align: center;
    color: #fff;
    margin: 0 auto;
    padding: 12px 0 ;
}

#top p{
    padding: 0px;
    font-size: 12px;
    display: inline;
}

#middle{
    float: left;
    width: 680px;
    line-height: 2px;
    text-align: center;
}

#middle p{
    padding: 0px;
    color: #000;
    font-size: 24px;
    font-weight: bold;
}

#middle2{
    float: left;
    width: 680px;
    line-height: 2px;
    text-align: center;
}

#middle2 p{
    padding: 0px;
    color: #000;
    font-size: 24px;
    font-weight: bold;
}

#gallerys {
    text-align: center;
}

#gallerys2 {
    text-align: center;
}

#ad {
    text-align: center;
    padding: 20px;
}

#ad2 {
    text-align: center;
    padding: 20px;
}

#footer{
    width: 680px;
    background: #41b6fb;
    line-height: 24px;
    text-align: center;
    color: #fff;
    margin: 0 auto;
}

.sidebar-left{
    float: left;
    width: 149px;
    margin: 0 0 0 1px;
    padding: 0 0 10px 0;
    display: inline;
}

.sidebar-left ul li{
    border: 0;
    font-size: 14px;
    font-style: normal;
    line-height: 26px;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #000;
    text-decoration: none;
    background-color: #fff;
    padding: 0px;
    margin: 0px;
    text-align: right;
}

.sidebar-right{
    float: left;
    width: 147px;
    margin: 0 0 0 1px;
    padding: 0 0 10px 0;
    display: inline;
}

.sidebar-right ul li{
    border: 0;
    font-size: 14px;
    font-style: normal;
    line-height: 26px;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #000;
    text-decoration: none;
    background-color: #fff;
    padding: 0px;
    margin: 0px;
    text-align: left;
   
}

#container{
    float: left;
    width: 980px;
    background: #fff;
}
#footer p{
    padding: 10px;
}

#footer a{
    color: #fff;
}

#reklame{
    float: left;
    width: 680px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.reklame-billede{
    float: left;
    width: 280px;
    display: inline;
    text-align: center;
}

.reklame-tekst{
    float: left;
    width: 380px;
    overflow: hidden;
    padding-right: 5px;
}
#sidebar-ad {
    text-align: center;
}

#sidebar-ad2 {
    text-align: center;
}
Avatar billede olebole Juniormester
01. januar 2009 - 18:58 #6
- og vedr. DTD i IE6:
    http://msdn.microsoft.com/en-us/library/bb250395(VS.85).aspx#cssenhancements_topic2
Avatar billede netpimp Nybegynder
01. januar 2009 - 19:54 #7
zips > Det var vist lige hvad der skulle til, nu ser det rigtig ud hos mig i IE, der er kun en lille fejl tilbage, ved header billedet ser det ud som om i IE at der er en border på 1 pixel eller sådan noget under den, og har ikke kunnet få det væk.
Avatar billede roenving Novice
01. januar 2009 - 22:03 #8
Har du et linjeskift foran en </td> ?-)
Avatar billede netpimp Nybegynder
01. januar 2009 - 22:10 #9
roenving > Nej jeg bruger slet ikke tables og har derfor ingen </td> :)
Avatar billede olebole Juniormester
01. januar 2009 - 22:13 #10
- så en </div>
Avatar billede olebole Juniormester
01. januar 2009 - 22:42 #11
Når det sidste indhold i et block element - eller et block-lgnende element - er inline indhold, laver IE en smule luft i bunden af block elementet. Du kan se forskellen på disse to div:

<div style="background:red"><img src="http://www.eksperten.dk/img/elogo.png"></div>

- og:

<div style="background:red"><img src="http://www.eksperten.dk/img/elogo.png">
</div>
Avatar billede olebole Juniormester
01. januar 2009 - 22:43 #12
"[...] laver IE en smule luft i bunden af block elementet, hvis der laves et linjeskift til allersidst"
Avatar billede zips Juniormester
01. januar 2009 - 23:11 #13
Prøv at sætte dette ind i din css.

#header img {float:left;}
Avatar billede netpimp Nybegynder
01. januar 2009 - 23:29 #14
Så lykkes det vist, hvis zips og olebole lige smider et svar så får i lige nogle point som tak for hjælpen :)
Avatar billede zips Juniormester
01. januar 2009 - 23:40 #15
Her er et svar :)
Avatar billede olebole Juniormester
02. januar 2009 - 01:33 #16
- og et her  =)
Avatar billede zips Juniormester
02. januar 2009 - 09:40 #17
Tak for point :)
Avatar billede olebole Juniormester
03. januar 2009 - 19:22 #18
Tak for points  ;o)
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