Toon posts:

[css] crossbrowser+platform positioneren

Pagina: 1
Acties:

donderdag 8 januari 2004 15:04

Acties:

Verwijderd

Topicstarter
Ik wil graag een discussie starten om zo een crossbrowser en crossplatform site goed te positioneren, ik wil dit doen aan de hand van een site die ik aan het maken ben en waar ik niet uitkom.
het porbleem zit hem in de variable hoorte van de divs samen met de overflow
op de pc werkt het maar op de mac (behalve mozilla) maakt ie er een rotzooi van.

wat het moet worden:
Afbeeldingslocatie: http://www.c32.nl/werkmap/pieter/playboat/screens/doel.jpg

dit is mijn code:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <TITLE>www.playboat.nl</TITLE>
    <LINK rel="stylesheet" href="style/style.css" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<body>
<div id="logo">[img]'images/logo.gif'[/img]</div>
<div id="container">
    <div id="top">[img]'images/top_img.gif'[/img]</div>
    <div id="container2">
        <div id="content"><p style="margin:10px;">{inhoud}</p></div>
    </div>
    <div id="bottom">bottom</div>
</div>
</body>
</html>


Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

html,body {
    height: 100%;
    width: 100%;
}
body {
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}
#container {
    position: relative;
    height: 100%;
    width: 100%;
    padding-top: 240px;
    padding-bottom: 50px;
    -moz-box-sizing: padding-box;
    z-index: 1;
}
#container2 {
    position: relative;
    height: 100%;
    padding-top: 50px;
    padding-left: 150px;
    padding-right: 350px;
    background-color: #0066CC;
    -moz-box-sizing: padding-box;
}

#top {
    position: absolute;
    top:0px;
    left:0px;
    height: 240px;
    width: 100%;
    overflow: hidden;
}

#content {
    height: 100%;
    overflow: auto;
    z-index: 3;
}
#bottom {
    position: absolute;
    bottom:0px;
    left:0px;
    height: 50px;
    width: 100%;
    background-color: black;
}
#logo {
    position: absolute;
    right:0px;
    top: 180px;
    z-index: 2;
}

wat ik nu heb(pc+ie6):
Afbeeldingslocatie: http://www.c32.nl/werkmap/pieter/playboat/screens/winNTie6.jpg

(mac os9+ie5):
Afbeeldingslocatie: http://www.c32.nl/werkmap/pieter/playboat/screens/mac9ie5.jpg

(mac osx+ie5.2):
Afbeeldingslocatie: http://www.c32.nl/werkmap/pieter/playboat/screens/macxie52.jpg

(mac osx+safari):
Afbeeldingslocatie: http://www.c32.nl/werkmap/pieter/playboat/screens/macxsafari.jpg

(mac osx+moz1.5):
Afbeeldingslocatie: http://www.c32.nl/werkmap/pieter/playboat/screens/macxmoz15.jpg

donderdag 8 januari 2004 15:12

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 21:30

crisp

Devver

Pixelated

Als je IE5.x voor de MAC wilt ondersteunen vergeet je mooie CSS positioning dan maar, die browser is zo buggy als maar kan (en al stokoud).
Safari is nog lang niet stable en kent dus ook nog vele bugs.

btw, wat doet die xml declaratie boven je DTD?

Intentionally left blank

donderdag 8 januari 2004 15:19

Acties:

Verwijderd

Topicstarter
crisp schreef op 08 januari 2004 @ 15:12:
Als je IE5.x voor de MAC wilt ondersteunen vergeet je mooie CSS positioning dan maar, die browser is zo buggy als maar kan (en al stokoud).
Safari is nog lang niet stable en kent dus ook nog vele bugs.

btw, wat doet die xml declaratie boven je DTD?
die xml declaratie heb ik van jou voglens mij, IE switcht naar quirky...

En ik wil eigenlijk wel IE5 ondersteunen op de mac aangezien deze site wordt gemaakt voor iemand die daar mee werkt dus dan zal ik mijn CSS maar vergeten, of heeft iemand anders nog tips...

donderdag 8 januari 2004 15:21

Acties:
  • disjfa
  • Registratie: April 2001
  • Laatst online: 12-05 15:11

disjfa

be

Verwijderd schreef op 08 januari 2004 @ 15:19:
[...]
die xml declaratie heb ik van jou voglens mij, IE switcht naar quirky...
waar om heb je dan een html 4.01 declaratie :X :X

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 8 januari 2004 15:25

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 21:30

crisp

Devver

Pixelated

zolang je geen strict DTD gebruikt zal IE ook niet strict renderen hoor...

Intentionally left blank

donderdag 8 januari 2004 15:27

Acties:

Verwijderd

Topicstarter
crisp schreef op 08 januari 2004 @ 15:25:
zolang je geen strict DTD gebruikt zal IE ook niet strict renderen hoor...
OK, zal het eruit gooien... ;)
edit: laat hem toch maar staan, want anders doet ie het op de pc ook niet goed...

[ Voor 17% gewijzigd door Verwijderd op 08-01-2004 15:29 ]

donderdag 8 januari 2004 15:55

Acties:

Verwijderd

IE6 is komt in standard compliant mode, wanneer de DOCTYPE van het type HTML4.01 of XHTML1.0 is. De DOCTYPE een verwijzing bevat naar de DTD en er NIKS VOOR de DOCTYPE aanwezig is.

In dit geval is het blijkbaar gewenst dat IE6 in quirks mode zit dus plaats je iets voor DOCTYPE. Uiteraard geen PI zoals je nu hebt gedaan, omdat dat ten eerste niet voorkomt in HTML en ten tweede zal daardoor je pagina onzichtbaar worden in IE4 voor de Mac (info over MacIE4 komt van reactie op een weblog gemaakt door Kristaan van Cinnamon).

Check deze dingen is:
Pagina: 1
Reageer