Avatar billede htm Nybegynder
05. april 2004 - 21:50 Der er 6 kommentarer og
2 løsninger

IE og CSS layout

Hej

Hvad sker der for IE på mig side?

http://munchi.dk/misc/iebug.html
Sådan ser den ud i firefox:
http://munchi.dk/misc/firefox.jpg
Sådan ser den ud i IE:
http://munchi.dk/misc/ie.jpg

Hvad kan jeg gøre for at rette IE på plads, så det ligner den fra firefox ?
Avatar billede retry Nybegynder
05. april 2004 - 22:05 #1
Der skal url med i doctype, elelrs går IE i quirks mode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Avatar billede htm Nybegynder
05. april 2004 - 22:06 #2
Det hjalp desværre ikke...
Avatar billede retry Nybegynder
05. april 2004 - 22:15 #3
Prøv at få siden til at validere korrekt.
http://validator.w3.org/check?uri=http%3A%2F%2Fmunchi.dk%2Fmisc%2Fiebug.html&charset=%28detect+automatically%29&doctype=XHTML+1.0+Transitional

Hvis siden kan valideres, vil der komme et link til også at validere CSS'en
Avatar billede htm Nybegynder
05. april 2004 - 22:27 #4
Så er alt valideret OK - men det virker desværre stadig ikke...
Avatar billede retry Nybegynder
05. april 2004 - 23:25 #5
Følgende virker i IE. Tilsyneladende kan IE ikke finde ud af XHTML-doctypen. Jeg tror det er fordi doctype ikke er det allerførste i dokumentet.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>IE buggy?</title>
<style type="text/css">
#leftmenu {
    width: 130px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 2px;
    float: left;
    border-right: 1px solid #CCCCCC;
}
.boxheader {
    width: 90px;
    height: 15px;
    float:left;
    padding-left: 3px;
    border-left:1px #7E8480 solid;
    border-top:1px #7E8480 solid;
    border-bottom:1px #7E8480 solid;
    background-color: #80A0B9;
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: left;
}
.boxheaderend {
    width:36px;
    height: 15px;
    float:left;
    padding-top: 1px;
    border-bottom:1px #7E8480 solid;
    background: #FFFFFF url("http://munchi.dk/misc/img/container/container_back.jpg") repeat-x bottom;
    text-align: left;
}
</style>
</head>
<body>
<div id="leftmenu">
    <div class="boxheader">Artikler</div>
    <div class="boxheaderend"><img src="http://munchi.dk/misc/img/container/container_start.jpg" style="width: 11px; height: 15px" alt="" /></div>
</div>
</body>
</html>
Avatar billede stig69 Nybegynder
05. april 2004 - 23:41 #6
Prøv at fjern linieskiftet efter dine to sidste div, altså på denne måde:
<div id="leftmenu">
    <div class="boxheader">Artikler</div>
    <div class="boxheaderend"><img src="http://munchi.dk/misc/img/container/container_start.jpg" style="width: 11px; height: 15px" alt="" /></div></div>

Ved godt det lyder lidt mærkeligt, men det hjælper. Har selv haft problemet i følgende spg.: http://www.eksperten.dk/spm/483288

Stig
Avatar billede htm Nybegynder
06. april 2004 - 09:01 #7
Suk - hvordan kan man få lov til at lave en så buggy browser (IE)

Fejlen skyldes to ting.
1. DOCTYPE befandt sig ikke i toppen af dokumentet, så IE ignorerede denne.
2. font-størrelsen i <div class="boxheaderend"> var større end den kunne nå at være på de 15px i højden, dermed udvidede IE den.

2'eren kunne løses enten ved font-size: 0px; eller at fjerne linieskiftet efter <img>...

retry vil du lige lægge et svar?
Avatar billede retry Nybegynder
06. april 2004 - 09:14 #8
Svar.
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