Toon posts:

[CSS] waarom 2 kolom layout verschillend in IE en FF?

Pagina: 1
Acties:

donderdag 31 maart 2005 17:23

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
Momenteel probeer ik mijn website om te zetten van table layout naar css. Na een middag inlezen en hard zwoegen is dit het resultaat:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/ie.jpg

Dat was in Internet Explorer. In Firefox ziet het er heel anders uit:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/ff.jpg

Volgens mij heb ik mij aan standaarden gehouden. Ik zie niet meer wat ik nog zou moeten aanpassen om het resultaat in FF te krijgen als in IE. Heeft iemand tips en aanwijzingen:
  • waarom FF de pagina wel in het midden van het scherm plaatst en IE niet (hij moet in het midden overigens :) )?
  • waarom FF nog steeds een marge plaatst tussen de #header en #middle?
  • waarom FF de #leftnav en #content divs niet plaatst zoals IE?
  • Waarom FF de #footer nog een ontzettende padding aan de onderkant meegeeft (zodat de #header achtergrond weer herhaald wordt?!)?
Ik verwacht geen kant-en-klare antwoorden op al deze vragen, maar misschien doe ik iets basaals fout, met al deze problemen tot gevolg.

Overigens staat de pagina hier online. De TS wordt zo lang als ik die hele bups CSS ga copy-pasten. Als het overigens gewenst is dat ik het ff copy-paste, dan hoor ik dat graag. Da's dan zo gepiept natuurlijk :)

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

donderdag 31 maart 2005 17:33

Acties:
  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

@ De eerste: ongetest, maar een doctype wil meestal wil helpen, zodat IE in standards mode zit en veel meer hetzelfde werkt.
HTML:
1
2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

DM!

donderdag 31 maart 2005 17:37

Acties:
  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Ik weet zeker dat het een kwestie is van alle margins en paddings goed instellen, cq op 0 zetten.
Dat centreren kan makkelijker dan je het nu doet:
Cascading Stylesheet:
1
2
3
4
5
6
7
8

body {
   text-align: center;
}
#wrapper {
   margin: 0 auto;
   text-align: left;
   width: 700px;
}

edit:
Je moet wel een width meegeven anders werkt het niet zo puik.

En wat ben je met al die mozilla background dingen aan het doen? Dat lijkt me de oorzaak van de raar clippende achtergrond. Het kan ook heel goed zonder.

[ Voor 35% gewijzigd door Rowanov op 31-03-2005 17:43 ]

donderdag 31 maart 2005 17:59

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
@JHS - de strict doctype toevoegen heeft het volgende resultaat in zowel IE als FF:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/strict.jpg

Alleen nog maar verder van huis dus. Is mijn css nu echt zo slecht? Ik heb o.a. een voorbeeld genomen aan geenstijl.nl, en die site werkt perfect in zowel FF als IE. Hetzelfde met bv. http://www.456bereastreet...ayout/2-col/finished.html en zo heb ik nog veel voorbeelden.

@Rowanov - wat bedoel je met "al die mozilla background dingen"? Ik gebruik slechts 3 plaatjes: header.png, middle.png en footer.png.

[ Voor 38% gewijzigd door Reveller op 31-03-2005 18:02 ]

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

donderdag 31 maart 2005 18:24

Acties:
  • HyperioN
  • Registratie: April 2003
  • Laatst online: 25-04 09:11

HyperioN

Zet alsjeblieft even overal "px" achter....en quotes om strings, dus om de url
#header
{
text-align: right;
padding: 30px 30px 0px 30px;
background: url("css/header.png");
height: 115px;
}

#middle
{
height: 200px;
background: url("css/middle.png");
}

#leftnav
{
float: left;
background: #eee;
width: 160px;
margin: 0px 10px 0px 18px;
height: 100%;
}
Edit: @JHS..ok maar het is toch netter en om de getallen > 0 zeker wel!

[ Voor 137% gewijzigd door HyperioN op 31-03-2005 18:30 ]

donderdag 31 maart 2005 18:27

Acties:
  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

De lading -moz-backgroud-[iets], daar doelt Rowanov op :) . Dat is overigens de hele oorzaak van het probleem. Als je je backgroundimages uitschakeld dan zie je de margins niet, en IE trok zich er zoiezo niets van aan omdat het -moz- was :) .

edit:
Hyperion: achter 0 hoeft geen px, of je nu nul appels hebt of px of em, het resultaat blijft hetzelfde: 0 :) .

[ Voor 21% gewijzigd door JHS op 31-03-2005 18:28 ]

DM!

donderdag 31 maart 2005 18:59

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
@JHS - sorry, maar ik snap echt niet wat jullie met "-moz-background[iets]" bedoelen. Voor de duidelijkheid - dit is de css zoals ik hem nu heb:
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

/* Algemene settings
 */
body
{
  padding: 0;
  margin: 20;
  background: #5A7D94;
  font: 11px Arial;
}

a
{
  text-decoration: none;
}

a img
{
  border: none;
}

/* Vlakverdeling
 */

#wrapper
{
  position: relative;
  background: #fff;
  width: 778px;
  margin: auto;
}

#header
{
  text-align: right;
  padding: 30 30 0 30;
  background: url("css/header.png");
  height: 115;
}

#middle
{
  height: 200;
  background: url("css/middle.png");
}

#leftnav
{
  float: left;
  background: #eee;
  width: 160px;
  margin: 0px 10px 0px 18px;
  height: 100%;
}

#content
{
  float: left;
  background: #ddd;
  width: 520px;
  margin: 0px 20px 0px 10px;
  height: 100%;
}

#footer
{
  position: relative;
  background: url("css/footer.png");
  height: 91px;
  padding: 35px 0px 0px 70px;
}

/* Andere dingen
 */

#header ul
{
  display: inline;
  margin: 0;
  padding: 0;
}

#header li
{
  font-weight: bold;
  display: inline;
  margin: 0;
}

#header a
{
  padding: 10px;
  color: #333;
}

#footer p
{
  color: #9C9A9C;
}

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

donderdag 31 maart 2005 19:04

Acties:
  • HyperioN
  • Registratie: April 2003
  • Laatst online: 25-04 09:11

HyperioN

Reveller schreef op donderdag 31 maart 2005 @ 18:59:
@JHS - sorry, maar ik snap echt niet wat jullie met "-moz-background[iets]" bedoelen. Voor de duidelijkheid - dit is de css zoals ik hem nu heb:
[knip]
Nogmaals: als je overal even "px" bij zet werkt 'ie perfect, alleen dat centeren in IE nog niet.

donderdag 31 maart 2005 19:20

Acties:
  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Reveller schreef op donderdag 31 maart 2005 @ 18:59:
@JHS - sorry, maar ik snap echt niet wat jullie met "-moz-background[iets]" bedoelen. Voor de duidelijkheid - dit is de css zoals ik hem nu heb:
Het ligt niet aan die dingen, omdat je die zoals je zegt idd niet hebt toegevoegd.
Het lag aan de Webdeveloper toolbar die ik in Firefox gebruik. 8)7
HyperioN. schreef op donderdag 31 maart 2005 @ 19:04:
Nogmaals: als je overal even "px" bij zet werkt 'ie perfect, alleen dat centeren in IE nog niet.
Als je daar voor gebruikt wat ik in deze post vertelde, dan moet het prima werken.

[ Voor 66% gewijzigd door Rowanov op 31-03-2005 19:24 ]

donderdag 31 maart 2005 19:52

Acties:
  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

Rowanov schreef op donderdag 31 maart 2005 @ 19:20:
Het ligt niet aan die dingen, omdat je die zoals je zegt idd niet hebt toegevoegd.
Het lag aan de Webdeveloper toolbar die ik in Firefox gebruik. 8)7
:X Dat hadden ze wel eerder mogen zeggen 8)7 :X

DM!

donderdag 31 maart 2005 20:47

Acties:
  • SillyJW
  • Registratie: Januari 2002
  • Laatst online: 22-04 18:09

SillyJW

der Gemutlichkeit

HyperioN. schreef op donderdag 31 maart 2005 @ 18:24:
[...]....en quotes om strings, dus om de url[...]
Die opmerking heb ik vaker horen vallen. Is dat echt nodig? Ik heb het mezelf namelijk ooit afgeleerd, nadat ik een paar dagen bezig was geweest om een site werkende te krijgen op IE mac en er toen stom toevallig achter kwam dat die alleen de url's wilde slikken zonder quotes.

In dit voorbeeld zie ik het ook niet terugkomen...

donderdag 31 maart 2005 20:52

Acties:
  • HyperioN
  • Registratie: April 2003
  • Laatst online: 25-04 09:11

HyperioN

SillyJW schreef op donderdag 31 maart 2005 @ 20:47:
[...]

Die opmerking heb ik vaker horen vallen. Is dat echt nodig? Ik heb het mezelf namelijk ooit afgeleerd, nadat ik een paar dagen bezig was geweest om een site werkende te krijgen op IE mac en er toen stom toevallig achter kwam dat die alleen de url's wilde slikken zonder quotes.

In dit voorbeeld zie ik het ook niet terugkomen...
Ow dat is een goeie.. Link komt van w3 dus die zullen wel gelijk hebben hè ;) Toch vind ik het netter met quotes eromheen.. ik ben het ook gewend en een dergelijke situatie als die jij beschrijft dat het niet werkt met quotes, heb ik nog nooit meegemaakt.

donderdag 31 maart 2005 22:41

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
Ik ben voor een deel opnieuw begonnen, met de volgende wijzigingen:
  • Ik gebruik nu de <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> doctype
  • ik heb niet #middle, maar #wrapper een achtergrond gegeven, omdat ik anders een witte streep kreeg (verder niet ontzettend belangrijk - werk ik later nog wel eens aan)
Respectievelijk in IE en FF ziet het er nu als volgt uit:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/ie2.jpg

Afbeeldingslocatie: http://www.danandan.luna.nl/got/ff2.jpg

(Je kunt overigens goed zien dat FF kleurverschil geeft bij png plaatjes). Ik heb nu twee problemen over:
  • de #content div schaalt in FF wel met de lengte van de tekst mee, maar de pagina zelf schaalt niet mee!
  • zowel in IE als FF schaalt de #leftnav div niet mee met de lengte van de #content div
Wie heeft er aanwijzingen om dit op te lossen? Ook overig commentaar op de css is welkom! Het is mijn eerste css-based websiteje en ik wil het meteen goed aanleren :)

Hier de pagina:
HTML:
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
  <title>CSS Test</title>

<style>
/* Algemene settings
 */
body
{
  padding: 0;
  margin: 20;
  background: #5A7D94;
  font: 11px Arial;
}

a
{
  text-decoration: none;
}

a img
{
  border: none;
}

/* Vlakverdeling
 */

#wrapper
{
  position: relative;
  background: url(http://www.danandan.luna.nl/got/css/middle.png);
  width: 778px;
  margin: auto;
}

#header
{
  text-align: right;
  background: url(http://www.danandan.luna.nl/got/css/header.png);
  height: 115px;
}

#middle
{
  position: relative;
  margin: 0px 0px 0px 35px;
}

#leftnav
{
  float: left;
  background: #eee;
  width: 160px;
  margin: 0px 10px 0px 0px;
  height: 100%;
}

#content
{
  float: left;
  background: #ddd;
  width: 530px;
  margin: 0px 0px 0px 10px;
  height: 100%;
}

#footer
{
  background: url(http://www.danandan.luna.nl/got/css/footer.png);
  height: 91px;
}

/* Andere dingen
 */

#footer p
{
  color: #9C9A9C;
  padding: 35px 0px 0px 70px;
}
</style>

</head>
<body>

<div id="wrapper">
  <div id="header"></div>
  <div id="middle">
    <div id="leftnav">sd</div>
    <div id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elit</div>
  </div>
  <div id="footer">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
  </div>
</div>

</body>
</html>

[ Voor 5% gewijzigd door Reveller op 31-03-2005 22:42 ]

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

vrijdag 1 april 2005 09:38

Acties:

Verwijderd

HyperioN. schreef op donderdag 31 maart 2005 @ 18:24:
Zet alsjeblieft even overal "px" achter....en quotes om strings, dus om de url
Pas hierbij wel op, want enkele quotes om urls schijnen problemen met IE/mac te kunnen opleveren; bij dubbele quotes zou dat schijnbaar wel goed gaan. op de site van Dave Shea staat overigens een topic over best practices mbt css, en daarin raadt hij juist af om quotes om urls te gebruiken.

vrijdag 1 april 2005 10:10

Acties:
  • HyperioN
  • Registratie: April 2003
  • Laatst online: 25-04 09:11

HyperioN

Reveller schreef op donderdag 31 maart 2005 @ 22:41:
Ik ben voor een deel opnieuw begonnen, met de volgende wijzigingen:
  • Ik gebruik nu de <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> doctype
  • ik heb niet #middle, maar #wrapper een achtergrond gegeven, omdat ik anders een witte streep kreeg (verder niet ontzettend belangrijk - werk ik later nog wel eens aan)
Respectievelijk in IE en FF ziet het er nu als volgt uit:

[afbeelding]

[afbeelding]

(Je kunt overigens goed zien dat FF kleurverschil geeft bij png plaatjes). Ik heb nu twee problemen over:
  • de #content div schaalt in FF wel met de lengte van de tekst mee, maar de pagina zelf schaalt niet mee!
  • zowel in IE als FF schaalt de #leftnav div niet mee met de lengte van de #content div
Wie heeft er aanwijzingen om dit op te lossen? Ook overig commentaar op de css is welkom! Het is mijn eerste css-based websiteje en ik wil het meteen goed aanleren :)

Hier de pagina:
Kom op hé!
Wij helpen je hier en leveren de oplossingen voor je probleem... Alles was (bijna) perfect.. en wat doe jij?
Je begint overnieuw, hebt weer een probleem en komt weer hier aankloppen! Kunnen we weer gaan uitzoeken wat je verkeerd gedaan hebt..en daarna begin je zeker weer opnieuw?
Zo werkt dat niet hè..we verwachten wel dat je ook zelf even iets uitzoekt!

[ Voor 3% gewijzigd door HyperioN op 01-04-2005 10:12 ]

vrijdag 1 april 2005 10:20

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

Het lijkt wel verbazend op deze layout:Afbeeldingslocatie: http://www.excudo.net/got/senior-layout_moz.png

Volgens mij kun je uit IE vertikt het om zich aan de opgegeven height te houden dan ook nog wel wat tips halen ;)

Professionele website nodig?

vrijdag 1 april 2005 11:32

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
HyperioN. schreef op vrijdag 01 april 2005 @ 10:10:
[...]

Kom op hé!
Wij helpen je hier en leveren de oplossingen voor je probleem... Alles was (bijna) perfect.. en wat doe jij?
Je begint overnieuw, hebt weer een probleem en komt weer hier aankloppen! Kunnen we weer gaan uitzoeken wat je verkeerd gedaan hebt..en daarna begin je zeker weer opnieuw?
Zo werkt dat niet hè..we verwachten wel dat je ook zelf even iets uitzoekt!
Met opnieuw begonnen bedoelde ik:
  • voeg doctype toe (JHS) - veranderd
  • Zet overal px achter (HyperioN) - veranderd (ook bij 0, hoewel dat niet per se hoeft)
  • zet quotes om strings (Hyperion). Best practices zegt toch van niet (SillyJW) - terug veranderd
  • de moz-background-dingen waar Rowanov over sprak bleken niet te bestaan
Verder heb ik in principe niets veranderd. Ik heb alleen de topnavigatie verwijderd omdat deze buiten het probleem omgaat en dus alleen maar extra code met zich meebrengt waar anderen die willen helpen doorheen moeten waden. Dus ik snap niet wat je bedoelt. Overigens zijn de oorspronkelijke problemen niet opgelost door deze veranderingen:
  • content-div en leftnav-div schalen niet mee met content-lengte in FF
  • content-div en leftnav-div schalen niet even lang.
Het is dus echt niet zo dat ik niet meedenk of de reacties laat voor wat ze zijn. Dat zowel ikzelf als de mensen die reageren nog niet de goede oplossing hebben aangedragen, is niet mijn fout. Ik ben ook zelf hard op zoek naar de juiste oplossing, maar het is nu eenmaal niet de makkelijkste materie :)

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

vrijdag 1 april 2005 11:44

Acties:
  • Plecky
  • Registratie: Januari 2004
  • Niet online

Plecky

Reveller schreef op donderdag 31 maart 2005 @ 22:41:
• zowel in IE als FF schaalt de #leftnav div niet mee met de lengte van de #content div
Hmm, heb zelf ook al zoiets gehad. IE doet soms een beetje gek met floating divs. Als je aan de hacks durft te gaan moet je even kijken bij de Holly hack.
Vrij simpel om toe te voegen en zijn slechts 3 regels in je CSS.

vrijdag 1 april 2005 12:47

Acties:
  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

Meeschalen ligt aan je floats, simpelweg op te lossen met, tenminste, zo komt het mij over:
Cascading Stylesheet:
1

#wrapper { overflow: auto; }
Zie anders / verder, zoals curry684 al melde ook, het andere topic. Of dit topic . En daar heb je dus geen hack voor nodig :) .

DM!

vrijdag 1 april 2005 13:29

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
Bedankt voor de reakties alweer. @JHS - die overflow geeft geen andere werking dan die ik nu heb. Ik ben inmiddels zover dat de pagina meeschaalt met de content-div.Ik heb nu nog twee problemen:
  • de pagina schaalt niet mee met de leftnav-div
  • de positie van de leftnav en content-divs is anders in FF en IE:
Afbeeldingslocatie: http://www.danandan.luna.nl/got/nu.jpg

Iemand een idee waarom de marges zo verschillend zijn en waarom de leftnav div een andere werking heeft dan de content div? Hierbij de pagina zoals ik hem nu heb (en waar de screenshots van genomen zijn):
HTML:
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

<!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>
<title>CSS test</title>
<style type="text/css">
body {
  background: #5A7D94;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: Arial;
  }

#wrapper {
  background: #fff;
  margin: 20px auto;
  padding: 0;
  width: 778px;
  }

#header {
  background: url(http://www.danandan.luna.nl/got/css/header.png);
  margin: 0;
  padding: 0;
  height: 115px;
  }

#middle {
  text-align: left;
  background: url(http://www.danandan.luna.nl/got/css/middle.png);
  }

#leftnav {
  float: left;
  width: 150px;
  margin: 0 0 0 20px;
  padding 0;
  background: red;
  }

#content {
  margin: 0 0 0 250px;
  padding: 0;
  background: lime;
  width: 500px;
  }

#footer {
  background: url(http://www.danandan.luna.nl/got/css/footer.png);
  height: 91px;
  text-align: left;
  }

#footer p {
  margin: 0;
  padding: 35px 275px 0px 70px;
  font: 11px Verdana;
  color: #9C9A9C;
  }
</style>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<div id="wrapper">
  <div id="header"></div>
  <div id="middle">
    <div id="leftnav"><br><br><br></div>
    <div id="content"><br><br><br><br><br><br><br><br><br><br><br></div>
  </div>
  <div id="footer">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
  </div>
</div>
</body>
</html>

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

vrijdag 1 april 2005 13:41

Acties:
  • Noedels
  • Registratie: Augustus 2002
  • Laatst online: 04-09-2021

Noedels

Ik weet niet of deze url al geplaatst is, maar op Glish.com staat denk ik je oplossing
http://glish.com/css/

vrijdag 1 april 2005 18:56

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

geef je #content een minimum hoogte die gelijk is aan of groter is dan hoogte van je #leftnav.

Helaas werkt min-height niet in alle browser. Een workaround hiervoor:
code:
1
2

min-height: 100px; // firefox e.d.
_height: 100px; // voor IE

Als je dan ook safari nog belangrijk vindt: http://annevankesteren.nl...4/04/min-height-in-safari

edit beter nog: je geeft je #content een overflow: auto;

Mbt je margins: http://www.positionisever...lorer/doubled-margin.html

[ Voor 45% gewijzigd door Sappie op 01-04-2005 19:43 ]

Specs | Audioscrobbler

vrijdag 1 april 2005 23:14

Acties:

Verwijderd

misschien is http://dean.edwards.name/IE7/ een oplossing, is maar 14 kb als javascript download, en als zip ( met php file ) is het nog minder
Pagina: 1
Reageer