Søg
Avatar billede Slettet bruger
24. januar 2005 - 23:28 Der er 17 kommentarer og
1 løsning

100% i højde, fin i Mozilla, crap i IE

Hej!

Er der nogen der har et bud på hvordan http://cm3.dk/test/ kommer til at se korrekt ud i IE? Den ser ud som den skal i Mozilla Firebird, men i IE bliver siden for høj, så der kommer scrollbar uanset hhvor meget/lidt indhold der er på den.

Det har vel noget med de %-vise angivelser at gøre (100%)

På forhånd tak!
Avatar billede fommy Nybegynder
24. januar 2005 - 23:49 #1
Prøv dette i dit body tag:

<body style="overflow:hidden;">

Det skulle gerne gøre tricket =)
Avatar billede olebole Juniormester
25. januar 2005 - 00:17 #2
<ole>

Du skal bruge den fulde DTD:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

/mvh
</bole>
Avatar billede olebole Juniormester
25. januar 2005 - 00:19 #3
Uden URL'en kan IE ikke tolke CSS korrekt. Se her under 'The !DOCTYPE "Switch"':
  http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp
Avatar billede Slettet bruger
25. januar 2005 - 07:28 #4
Hmm...var helt sikker på at jeg havde den med, men må have glemt det imens jeg testede...men det hjalp desværre ikke, IE viser det stadig "forkert"
Avatar billede Slettet bruger
25. januar 2005 - 07:28 #5
altså det som olebole skrev ;)

Og overflow:hidden er _ikke_ en acceptabel løsning, det duer ikke rigtig at der ikke kan scrolles påsiden :D
Avatar billede notes2c Nybegynder
25. januar 2005 - 10:06 #6
Du bør vel nok lige checke din sikkerhed på http://cm3.dk
Avatar billede Slettet bruger
25. januar 2005 - 11:49 #7
Sikkerhed? Der er ikke noget som folk ikke må snage i...Jeg har bare lige slettet index-filen da jeg skulle have lidt lagt online til en kollega.
Avatar billede notes2c Nybegynder
25. januar 2005 - 11:52 #8
Ok troede bare det var et uheld...
Avatar billede Slettet bruger
25. januar 2005 - 14:10 #9
Fair nok, og tak alligevel :)
Avatar billede olebole Juniormester
25. januar 2005 - 16:48 #10
Din tabel 'table1' har en højde på 100% af siden
Din klasse 'midte' har en højde på 100% af 'table1'

Hvad er der så tilbage til resten?  ;o)
Avatar billede Slettet bruger
25. januar 2005 - 19:04 #11
Det lader til at det herunder duer (så skal jeg bare til at rode med valideringen af det)

<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
<title>One Hundred Percent height divs</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%; /* this is the key! */
}
#left {
position:absolute;
left:0;
top:0;
padding:0;
height:100%; /* works only if parent container is assigned a height value */
}

.vborder {
background:url('billeder/skyggev.gif') right;
width:10%;
}

.hborder {
background:url('billeder/skyggeh.gif');
width:auto;
}

.table1 {
width:100%;
height:100%;
}

.midte {
width:700px;
height:100%;
vertical-align:top;
}

.topmenu1 {
background:url('billeder/topbar1.gif') top left repeat-x;
width:100%;
}

.topmenu2 {
background:url('billeder/topbar3.gif') top left repeat-x;
}

.topmenu3 {
background:url('billeder/topbar1.gif') top left repeat-x;
width:20px;
}


.bundmenu1 {
background:url('billeder/bundbar1.gif') bottom left repeat-x;
width:100%;
}

.bundmenu2 {
background:url('billeder/bundbar2.gif') bottom left repeat-x;
}

.bundmenu3 {
background:url('billeder/bundbar3.gif') bottom left repeat-x;
font-size:10px;
color:#666;
}


.bundmenu4 {
background:url('billeder/bundbar4.gif') bottom left repeat-x;
}



td {
font-family:Verdana;
font-size:11px;
}

h3 {
display:inline;
}


</style>
</head>

<body>
<div id="left">
<table cellpadding="0" cellspacing="0" class="table1">
<tr><td class="vborder"></td><td valign="top" class="midte">
<table cellpadding="0" cellspacing="0" border="0" style="height:100%">
<tr><td>


<!-- Tabel 1 start -->
<table cellpadding="0" cellspacing="0" border="0"><tr><td class="topmenu1"></td><td><img src="billeder/topbar2.gif" width="32" height="34" alt="" border="0"></td><td class="topmenu2" nowrap>MENU1 MENU2</td><td><img src="billeder/topbar4.gif" width="32" height="34" alt="" border="0"></td><td class="topmenu3" nowrap></td></tr>
<tr><td><div style="padding-left:14px;padding-bottom:30px"><img src="billeder/logo.gif" width="150" height="58" alt="" border="0"></div></td></tr></table>
<!-- Tabel 1 slut -->


</td></tr>
<tr><td valign="top" height="84%">


<!-- Tabel 2 start -->
<table cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-left:15px" valign="top">
<div><img src="billeder/kasse_top.gif" width="186" height="21" alt="" border="0"></div>
<div style="background:#FAFAFA">menu</div>
<div><img src="billeder/kasse_bund.gif" width="186" height="9" alt="" border="0"></div>

<div style="padding-top:20px;padding-bottom:20px">Nyheder her</div>

<div><img src="billeder/kasse_top.gif" width="186" height="21" alt="" border="0"></div>
<div style="background:#FAFAFA">menu</div>
<div><img src="billeder/kasse_bund.gif" width="186" height="9" alt="" border="0"></div>

</td><td valign="top" style="padding-left:15px">
<h3>HER ER EN OVERSKRIFT</h3><br>
sdfoi sadofidsau fodaf iudo duf odgfudo fo ugfdoigu ofd gofdigu dogg  oidfgodgufdogufdog oifdofog odioi o oguodfigoiug ogufod o o
</td></tr></table>
<!-- Tabel 2 slut -->


</td></tr>
<tr><td>


<!-- Tabel 3 start -->
<table cellpadding="0" cellspacing="0" border="0"><tr><td class="bundmenu1"></td><td class="bundmenu2"><img src="billeder/nothinghere.gif" width="22" height="29" alt="" border="0"></td>

<td class="bundmenu3"><img src="billeder/bund_ikon1.gif" width="18" height="10" alt="" border="0"></td>
<td class="bundmenu3">&nbsp;extranet</td>
<td class="bundmenu3"><img src="billeder/bundbar_spacer.gif" width="9" height="10" alt="" border="0"></td>
<td class="bundmenu3"><img src="billeder/bund_ikon2.gif" width="18" height="10" alt="" border="0"></td>
<td class="bundmenu3">&nbsp;downloads</td>
<td class="bundmenu3"><img src="billeder/bundbar_spacer.gif" width="9" height="10" alt="" border="0"></td>
<td class="bundmenu3"><img src="billeder/bund_ikon3.gif" width="18" height="10" alt="" border="0"></td>
<td class="bundmenu3">&nbsp;s&oslash;g</td>
<td class="bundmenu3"><img src="billeder/bundbar_spacer.gif" width="9" height="10" alt="" border="0"></td>
<td class="bundmenu3"><img src="billeder/bund_ikon4.gif" width="18" height="10" alt="" border="0"></td>
<td class="bundmenu3">&nbsp;udskriv</td>
</td><td class="bundmenu4" nowrap><img src="billeder/nothinghere.gif" width="22" height="29" alt="" border="0"></td><td class="bundmenu1" nowrap><img src="billeder/nothinghere.gif" width="15" height="5" alt="" border="0"></td></tr></table>
<!-- Tabel 3 slut -->

</td></tr>
</table>

</td><td class="hborder">&nbsp;</td></tr>
</table>
</div>


</body>
</html>
Avatar billede olebole Juniormester
25. januar 2005 - 19:32 #12
Linien:
  <?xml version="1.0" encoding="UTF-8"?>
- smadrer enhver brug af CSS i IE. IE understøtter ikke CSS-standarden, hvis du skriver en XML-prolog.

Derudover kan du ikke rigtig bruge XHTML til så meget idag. Det er heller ikke en fremtidssikring af din side, da f.eks. image-tag'et helt falder væk, når XHTML kan bruges for alvor (når XHTML2.0 bliver introduceret)  :)
Avatar billede Slettet bruger
25. januar 2005 - 21:17 #13
Jeg synes nu det fungerer meget fint :)

http://cm3.dk/test/
Avatar billede olebole Juniormester
28. januar 2005 - 13:51 #14
Hvis denne returnerer 'CSS1Compat' er din side kompatibel med CSS1-standarden - ellers ikke:

<script type="text/JavaScript">
  alert(document.compatMode)
</script>

Prøv den, så behøver vi ikke diskutere, hvad vi 'synes'  ;o)
Avatar billede olebole Juniormester
28. januar 2005 - 13:52 #15
PS: Prøv den også, uden XML-prologen  ;o)
Avatar billede Slettet bruger
28. januar 2005 - 14:31 #16
Et er teori noget andet virkelighed.
Avatar billede olebole Juniormester
28. januar 2005 - 14:48 #17
Nej, men et er virkelighed - noget andet er virkelighed. Prøv denne med og uden prologen, så kan du meget tydeligt se IE's alvorligste CSS-fejl med prologen (som i øvrigt næsten dagligt er årsagen til spørgsmål på E):
  <div style="width:200px;height:200px;background-color:red;border:20px solid blue">&nbsp;</div>
Avatar billede Slettet bruger
28. januar 2005 - 14:57 #18
Jeg har testet lidt og kan godt se hvad du mener, hvis man inkluderer <?xml version="1.0" encoding="UTF-8"?> bliver den i IE noget mindre (altså kassen)

Men...min side ser ens ud i Firefox og IE, så indtil jeg skal bruge en rød og blå kasse er jeg tilfreds ;)
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
I går 22:58 Kan man undgå at få vist referer når der klikkes på links Af Strawberry i Browsere
I går 12:21 Er det svindel eller fra Microsoft Af mort1 i Andet sikkerhed
15/0811:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
14/0810:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
White papers
Flere white papers »