[CSS] DIV's in IE gaan fout, in FF doen ze het wel. - Softwareontwikkeling

vrijdag 25 augustus 2006 15:05

Acties:

Verwijderd

Topicstarter

ik wil 3 div's boven elkaar hebben, 1e is 10% hoog, 2e is 80% en de 3e ook weer 10%. In de 2e div komt alle tekst e.d. te staan dus die moet ook scrollbaar zijn. zoals ik het nu gemaakt hebt werkt het prima in FF, maar waarom werkt het niet in IE? heeft er iemand tips (bepaalde IE (only) hacks ofzo?)

voorbeeld is hier te bekijken.

2 screenshots: IE 6 en FF1.5

Mijn stylesheet en mn html/php:

Cascading Stylesheet:

body
    {
    background-image: url(images/back.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #FFF;
    }
.main
    {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
    overflow: auto;
    text-align: right;
    }

.top
    {
    position: absolute;
    left: 10%;
    top: 0%;
    right: 10%;
    }

.bottom
    {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0%;
    }

PHP:

<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css">
<?
if(isset($HTTP_COOKIE_VARS["users_resolution"]))
    $screen_res = $HTTP_COOKIE_VARS["users_resolution"];
else //means cookie is not found set it using Javascript
{
?>
<script language="javascript">
<!--
writeCookie();

function writeCookie() 
{
 var today = new Date();
 var the_date = new Date("December 31, 2023");
 var the_cookie_date = the_date.toGMTString();
 var the_cookie = "users_resolution="+ screen.width +"x"+ screen.height;
 var the_cookie = the_cookie + ";expires=" + the_cookie_date;
 document,cookie=the_cookie
     
 location = 'test3.php';
}
//-->
</script>
<?
}
?>
<title>Untitled Document <?php echo "$screen_res";?></title>
<script type="text/javascript" src="http://testserver.qu63.nl/blog2/scripts/countdown.js" defer="defer"></script>
</head>

<body>
<div class="top"><img src="top.gif" alt="Sven in Amersfoort"></div>
<div class="main">
<?php
for ($a = 0; $a<=9; $a++){
   for ($b = 0; $b<=9; $b++) print "<br />".$b;
}
?>
</div>
<div class="bottom"><h1 align="center">nog <span id="countdown1">2006-9-24 20:00:00 GMT+02:00</span></h1></div>
</body>
</html>

[ Voor 13% gewijzigd door Verwijderd op 25-08-2006 15:21 ]

vrijdag 25 augustus 2006 15:17

Acties:

t-x-m

.NET Nerd

Al die enters met dat cijfer:

PHP:

<?php
for ($a = 0; $a<=9; $a++){
   for ($b = 0; $b<=9; $b++) print "<br />".$b;
}
?>

[ Voor 105% gewijzigd door t-x-m op 25-08-2006 15:30 ]

GC.Collect();

vrijdag 25 augustus 2006 15:22

Acties:

Verwijderd

Topicstarter

T-X-M schreef op vrijdag 25 augustus 2006 @ 15:17:
Al die enters met dat cijfer:
PHP:
1
2
3
4
5
<?php
for ($a = 0; $a<=9; $a++){
   for ($b = 0; $b<=9; $b++) print "<br />".$b;
}
?>

aangepast

heb je ook nog tips voor mn CSS-sheet?

vrijdag 25 augustus 2006 15:30

Acties:

t-x-m

.NET Nerd

Verwijderd schreef op vrijdag 25 augustus 2006 @ 15:22:
heb je ook nog tips voor mn CSS-sheet?

Gebruik anders deze template!
Kijk hier of hier anders eens

GC.Collect();

vrijdag 25 augustus 2006 15:39

Acties:

Verwijderd

Topicstarter

T-X-M schreef op vrijdag 25 augustus 2006 @ 15:30:
[...]
Gebruik anders deze template!
Kijk hier of hier anders eens

die gaan over horizontaal positioneren, ik wil ze verticaal hebben.

vrijdag 25 augustus 2006 16:34

Acties:

Verwijderd

Topicstarter

hmz, alles duidelijker maken voor IE schijnt te helpen

iig bedankt voor het meedenken

Cascading Stylesheet:

body
    {
    background-image: url(images/back.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #FFF;
    }
.main
    {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
    height: 80%;
    width: 80%;
    overflow: auto;
    text-align: right;
    }

.top
    {
    position: absolute;
    left: 10%;
    top: 0%;
    right: 10%;
    bottom: 90%;
    height: 10%;
    width: 80%;
    }

.bottom
    {
    position: absolute;
    top: 90%;
    left: 10%;
    right: 10%;
    bottom: 0%;
    height: 10%;
    width: 80%;
    }

ipv:

Cascading Stylesheet:

body
    {
    background-image: url(images/back.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #FFF;
    }
.main
    {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
    overflow: auto;
    text-align: right;
    }

.top
    {
    position: absolute;
    left: 10%;
    top: 0%;
    right: 10%;
    }

.bottom
    {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0%;
    }

vrijdag 25 augustus 2006 23:05

Acties:

MBV

zoek maar eens op 'hasLayout': http://msdn.microsoft.com.../properties/haslayout.asp

Zonder 'haslayout' = true kan IE niks. Een hoogte/breedte instellen is dus idd genoeg

zaterdag 26 augustus 2006 00:12

Acties:

crisp

Devver

Pixelated

Sowieso haal je alles uit de flow door onnodig alles absoluut te positioneren, hierdoor heeft je body feitelijk geen content en dus ook geen hoogte - alles wat je ziet is overflow.

Intentionally left blank

zaterdag 26 augustus 2006 15:52

Acties:

MBV

maar de browser moet toch uitrekenen dat je body 80% hoog moet zijn als top 10% is, en bottom 10%? De manier die hier wordt gebruikt verdient imho geen schoonheidsprijs, maar zou moeten werken zonder height op te geven.

Pagina: 1

Reageer