Søg
Avatar billede compac Seniormester
14. august 2006 - 17:03 Der er 16 kommentarer og
1 løsning

CSS problem i Explorer

Jeg har en stump kode som virker i f.eks Mozilla:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>A frame document with CSS2</TITLE>
    <STYLE type="text/css">
      BODY { height: 8.5in } /* Required for percentage heights below */
      #header {
        position: fixed;
        width: 100%;
        height: 15%;
        top: 0;
        right: 0;
        bottom: auto;
          border:    5px solid #ccc;
        left: 0;
      }
      #sidebar {
        position: fixed;
        width: 10em;
        height: auto;
        top: 15%;
        right: auto;
        bottom: 100px;
        left: 0;
          border:    5px solid #ccc;
      }
      #main {
        position: fixed;
        width: auto;
        height: auto;
        top: 15%;
        right: 0;
        bottom: 100px;
          border:    5px solid #ccc;
        left: 10em;
      }
      #footer {
        position: fixed;
        width: 100%;
        height: 100px;
        top: auto;
        right: 0;
          border:    5px solid #ccc;
        bottom: 0;
        left: 0;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <DIV id="header">header ...  </DIV>
    <DIV id="sidebar"> sidebar...  </DIV>
    <DIV id="main"> main..  </DIV>
    <DIV id="footer"> .footer..  </DIV>
  </BODY>
</HTML>

- men problemet er: hvad skal jeg tilføje for at få det til at virke i Explorer?
Avatar billede apo Praktikant
14. august 2006 - 17:34 #1
En korrekt DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Avatar billede apo Praktikant
14. august 2006 - 17:38 #2
... En DOCTYPE (med linket) er nødvendig for, at IE (Explorer) kan fortolke CSS. Uden den fulde DOCTYPE har du ingen kontrol over hvordan, IE vælger at fortolke din CSS.
Avatar billede compac Seniormester
14. august 2006 - 17:55 #3
Ja den havde jeg glemt, men det løser ikke problemet.
Avatar billede mclemens Nybegynder
14. august 2006 - 17:56 #4
Det der med position:fixed; samt height:auto;
i IE har jeg set lave problemer før ...
Understøtter IE css 2 fuldt ud?
Avatar billede compac Seniormester
14. august 2006 - 18:06 #5
Nej, det ser ikke ud til det.
Jeg fandt et eksempel, som i princippet er bygget op på samme måde:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<HEAD>
<TITLE>Frame document</TITLE>
<STYLE type="text/css">
body {

background-color: #FFFFFF;
color: #000000;
margin: 0px;
padding: 0px;
}

#top {

position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 65px;
background-color: #990000;
color: #FFFFFF;
}

#menublok {

position: absolute;
left: 0px;
top: 65px;
width: 180px;
background-color: #F2F2F2;
}

#indhold {

padding-top: 80px;
margin-left: 190px;
margin-right: 10px;
}

#footer {

background-color: #F2F2F2;
color: #000000;
text-align:center;
margin-top: 40px;
clear: both;
}
</style>
</head>
<body>
<div id="indhold">
<h1>En sigende overskrift for indholdet</h1>
</div>
<div id="top">
<h1>Din sides overskrift</h1>
</div>
<div id="menublok">
<p>Menusektion</p>
<ul>
<li><a href="#">Menupunkt</a></li>
<li><a href="#">Menupunkt</a></li>
<li><a href="#">Menupunkt</a></li>
<li><a href="#">Menupunkt</a></li>
<li><a href="#">Menupunkt</a></li>
<li><a href="#">Menupunkt</a></li>
</ul>
</div>
<div id="footer">
<p>Her er teksten i footeren</p>
</div>
</body>
</html>
Avatar billede mclemens Nybegynder
14. august 2006 - 18:07 #6
Her er et par med height:100% hvis det andet
ikke virker med IE grundet manglende understøttelse
af automatisk højde beregning af elementerne...

(ved som sagt ikke om det er mangel på css understøttelse
i IE der gør det, men det er en mulighed
- der er jo andre css bugs hist og her ...)

http://www.eksperten.dk/spm/712486#rid6300689
http://www.eksperten.dk/spm/717767#rid6320320
Avatar billede mclemens Nybegynder
14. august 2006 - 18:12 #7
Update... prøv denne css i 14/08-2006 18:06:47
h1{margin:0px;}
- De er ikke enige om margin på h elementer browserne imellem
Avatar billede compac Seniormester
15. august 2006 - 14:18 #8
Problemet er bare, at når man fylder noget i "indhold"-blokken, så bliver footeren skubbet nedad.
Avatar billede mclemens Nybegynder
15. august 2006 - 17:27 #9
Ok, troede at menuen skulle skubbes nedad ...
- Apropo den første kode du selv har så virker den ikke så godt
hvis main bliver højere end det der er plads til (main<br>main<br> o.s.v.)

- Her er lige et eksempel på javascript alignment ser om jeg kan fikse lidt
med css - men der skal nok laves lidt tweaks afhængig af om det er IE eller
FF - da den css med position absolute og overflow's som jeg tror der kan løse det reagerer lidt forskelligt i henholdsvis IE og Firefox ...




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{margin:0px;padding:0px;}

#followit{
position:absolute;bottom:0px;left:0px;
background:#ccc;width:100%;height:50px;
}
#followitheight{height:50px;}
</style>

<script type="text/javascript">
var tpops="bottom"; // "top" eller "bottom"
var tpopt=0; // Antal pixels fra top/bottom position
var rpops="left"; // "right" eller "left"
var rpopt=0; // Antal pixels fra right/left position
var trefval=10; // Antal ms. mellem alignment af div

var ww,wh,fi,fioh,fiow;

window.onload=function(){
ww=document.body.offsetWidth;
wh=(tmp=window.innerHeight)?tmp:document.documentElement.clientHeight;

tmp=document.getElementById("followit");
fi=tmp.style;fioh=tmp.offsetHeight;fiow=tmp.offsetWidth;
alignit(0);
setInterval("alignit(1);",trefval);
}

function alignit(tmp){
if(tmp==0){fi.top="auto";fi.right="auto";}

var dmcst=(tmenu=document.documentElement.scrollTop)?tmenu:document.body.scrollTop;
var dmcsl=(lmenu=document.documentElement.scrollLeft)?lmenu:document.body.scrollLeft;

tmpy=(tpops=="bottom")?wh-tpopt-fioh+dmcst:tpopt+dmcst;
tmpx=(rpops=="right")?ww-rpopt-fiow+dmcsl:rpopt+dmcsl;

fi.top=tmpy+"px";
fi.left=tmpx+"px";
}

window.onresize=function(){alignit();};

</script></head>

<body>

a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a - slut<div id="followitheight"></div>

<div id="followit">Test</div>

</body></html>
Avatar billede mclemens Nybegynder
15. august 2006 - 22:40 #10
Når jeg kigger på eksemplet med venstre menu, top baren og bundbaren - kombineret med at du nævnte at bundbaren skal forblive der ved jeg ikke præcis hvordan eksemplet skal virke - da Firefox som sagt ikke giver mig et korrekt billede af hvad der skal ske når main overskrider vinduets højde... Nåh, skyder lige denne ud - så kan du sikkert sige præcis hvad der skal ændres i den :o)




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{margin:0px;padding:0px;height:100%;overflow:hidden;}
body{background:#666;}

#header{
  height: 15%;
  background:#888;
}

#sidebar{
  float:left;
  width:19%;
  height:70%;
  background:#666;
}

#main{
  width:80%;
  height: 70%;
  overflow:auto;
  float:right;
  background:#ccc;
}

#footer {
  clear:both;
  height: 15%;
  background:#888;
}

</style>

</head><body>

<div id="header">header ...  </div>

<div id="sidebar"> sidebar...  </div>

<div id="main">main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...slut</div>

<div id="footer"> .footer..  </div>

</body></html>
Avatar billede mclemens Nybegynder
15. august 2006 - 22:51 #11
Eller måske noget i denne stil?




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{margin:0px;padding:0px;height:100%;overflow:hidden;}

#bodyen{
  height:85%;
  width:100%;
  overflow:auto;
  background:#666; 
}


#header{
  height: 15%;
  background:#888;
}

#sidebar{
  float:left;
  width:18%;
  background:#666;
}

#main{
  width:80%;
  float:right;
  background:#ccc;
}

#footer {
  position:absolute;top:85%;left:0px;
  width:100%;
  height: 15%;
  background:#888;
}

</style>

</head><body>

<div id="bodyen">
<div id="header">header ...  </div>

<div id="sidebar"> sidebar...  </div>

<div id="main">main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...slut</div>
</div>

<div id="footer"> .footer..  </div>

</body></html>
Avatar billede mclemens Nybegynder
15. august 2006 - 23:07 #12
Jeg nåede også frem til et andet eksempel - men da IE opfatter det anderledes end Firefox har de hver deres kvaler med den - Firefox kan ikke scrolle på knappen i nederste højre hjørne. Og IE ved ikke hvad der menes med css delen bottom:0px;


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{margin:0px;padding:0px;height:100%;overflow:hidden;}

#bodyen{
  position:absolute;
  height:100%;
  width:100%;
  overflow:auto;
  background:#666;
}


#header{
  height: 15%;
  background:#888;
}

#sidebar{
  float:left;
  width:18%;
  background:#666;
}

#main{
  width:80%;
  float:right;
  background:#ccc;
}

#footerspc{
  clear:both;
  height:15%;
}

#footer {
  position:absolute;bottom:0px;left:0px;
  width:100%;
  height: 15%;
}
#footer2{
  margin-right:17px;
  background:#ddd;
  height:100%;
}
</style>

</head><body>

<div id="bodyen">
<div id="header">header ...  </div>

<div id="sidebar"> sidebar...  </div>

<div id="main">main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...slut</div>
<div id="footerspc"></div>
</div>

<div id="footer"><div id="footer2"> .footer..  </div></div>

</body></html>
Avatar billede mclemens Nybegynder
15. august 2006 - 23:07 #13
^ - Så den sidste virker ikke ...
Avatar billede mclemens Nybegynder
15. august 2006 - 23:24 #14
Med lidt css betinget fremvisning for IE vs. Firefox samt lidt rokering af elementerne - hjælper det lidt på det :/ ... men en af de 3 første giver nok det bedste resultat - lidt trals at browsere ikke håndterer css bedre end de gør...




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{margin:0px;padding:0px;height:100%;overflow:hidden;}

#bodyen{
  position:absolute;
  height:100%;
  width:100%;
  overflow:auto;
  background:#666;
}


#header{
  height: 15%;
  background:#888;
}

#sidebar{
  float:left;
  width:18%;
  background:#666;
}

#main{
  width:80%;
  float:right;
  background:#ccc;
}

#footerspc{
  clear:both;
  height:15%;
}

#footer {
  position:absolute;bottom:0px;left:0px;
  width:100%;
  height: 15%;
}
#footer2{
  margin-right:17px;
  height:100%;
  position:relative;
}
#footer3{
  background:#ddd;
  position:absolute;
  top:0px;left:0px;
  width:100%;
  height:100%;
  z-index:2;
}
</style>
<!--[if IE]><style type="text/css">#footer{z-index:2;}</style><![endif]-->
</head><body>

<div id="footer"><div id="footer2"><div id="footer3"> .footer..  </div></div></div>

<div id="bodyen">
<div id="header">header ...  </div>

<div id="sidebar"> sidebar...  </div>

<div id="main">main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...slut</div>
<div id="footerspc"></div>
</div>

</body></html>
Avatar billede mclemens Nybegynder
15. august 2006 - 23:27 #15
Ville ikke selv vælge den sidste
- men nu er der lidt at vælge imellem...
Jeg ville foretrække en af nedenstående...
15/08-2006 17:27:22
15/08-2006 22:40:57
15/08-2006 22:51:36

- Kaster lige et svar, hvis du kunne bruge en af eksemplerne...?
... Sig lige til hvis der er et af eksemplerne der lige skal have
en lille finjustering, så prøver jeg da lige at skubbe lidt til eksemplet :o)
Avatar billede compac Seniormester
20. august 2006 - 15:03 #16
Den sidste opfylder mit ønske om at kunne sætte vinduer (boxe) ind uden at det påvirker resten:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{margin:0px;padding:0px;height:100%;overflow:hidden;}

#bodyen{
  position:absolute;
  height:100%;
  width:100%;
  overflow:auto;
  background:#666;
}


#header{
  height: 15%;
  background:#888;
}

.floadtext  {
float: right;
width: 250px;
margin-top:0px;
margin-right: 10px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: rgb(192, 192, 192);
font-size: 12pt;
display: inline;
background:#ededed;
}

#sidebar{
  float:left;
  width:18%;
  background:#666;
}

#main{
  width:80%;
  float:right;
  background:#ccc;
}

#footerspc{
  clear:both;
  height:15%;
}

#footer {
  position:absolute;bottom:0px;left:0px;
  width:100%;
  height: 15%;
}
#footer2{
  margin-right:17px;
  height:100%;
  position:relative;
}
#footer3{
  background:#ddd;
  position:absolute;
  top:0px;left:0px;
  width:100%;
  height:100%;
  z-index:2;
}
</style>
<!--[if IE]><style type="text/css">#footer{z-index:2;}</style><![endif]-->
</head><body>

<div id="footer"><div id="footer2"><div id="footer3"> .footer..  </div></div></div>

<div id="bodyen">
<div id="header">header ...  </div>
<div id="sidebar"> sidebar...  </div>
<div id="main">main...<br>main...<br>main...<br><div class="floadtext">
her er floatvindue
</div>
main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...<br>main...slut</div>
<div id="footerspc"></div>
</div>

</body></html>
-så den vil jeg vælge
Avatar billede mclemens Nybegynder
20. august 2006 - 17:01 #17
Super og tak for point :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
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
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
27/0713:58 Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
25/0713:55 Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
24/0711:08 Forskel mellem klokkeslet start aften slut næste morgen Af krasmussen i Excel
23/0715:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
White papers
Flere white papers »