[CSS] Backgrounds in IE prima, in Firefox niet helemaal

Pagina: 1
Acties:

  • MaZo
  • Registratie: Mei 2002
  • Niet online
Hoi,

Ik ben bezig om m'n website met frames te herbouwen naar een website zonder frames, tabellen etc.
De indexpagina is nagenoeg af, maar met het positioneren van de background gaat het helaas mis.
Mijn website heeft aan elke kant een background, een bg_right.gif rechts en een bg_left.gif aan de linkerkant. In IE verschijnt alles nu prima (op de bottom div na) maar in Firefox krijg ik die linker background niet te zien.

Mijn code tenslotte:
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<?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>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

html, body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  font: 11px "trebuchet ms";
  color: #fff;
}

#container {
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -365px;
  height: 100%;
  width: 730px;
  padding-top: 203px;
  padding-bottom: 8px;
  -moz-box-sizing: padding-box;
}

#upperleft {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 21.4%;
  background: url("bg_left.gif") repeat-y right center fixed;
}

#top {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 203px;
  width: 100%;
  background: url("topimage.gif") no-repeat;
}

#middlecontainer {
  position: relative;
  height: 100%;
}

#left {
  position: absolute;
  left: 0px;
  height: 100%;
  width: 381px;
  overflow: auto;
  background: transparent url("bg_content.gif") repeat-y;
}

#left #content {
  padding-left: 16px;
}

#middle {
  position: relative;
  height: 100%;
  margin-left: 381px;
  margin-right: 187px;
  width: 162px;
  background: transparent url("bg_zeikframe.gif") repeat-y;
}

#right {
  position: absolute;
  right: 0px;
  height: 100%;
  width: 187px;
  background: transparent url("bg_infoframe.gif") repeat-y;
}

#bottom {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 8px;
  width: 100%;
  background: url("bottomimage.gif") no-repeat;
}

#upperright {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 21.4%;
  background: url("bg_right.gif") repeat-y;
}

</style>
<body>
<div id="upperleft"></div>
<div id="container">
  <div id="top"></div>
  <div id="middlecontainer">
    <div id="left">
      <div id="content">left<br /><br />
      een hoop content hier een hoop content hier een hoop content hier
      een hoop content hier een hoop content hier een hoop content hier
      een hoop content hier een hoop content hier een hoop content hier
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      </div>
    </div>
    <div id="right"></div>
    <div id="middle"></div>
  </div>
  <div id="bottom"></div>
</div>
<div id="upperright"></div>
</body>
</html>
Iemand enig idee wat er mis gaat? Is het soms weer de Doctype ellende?

[ Voor 19% gewijzigd door MaZo op 23-12-2004 17:54 ]


  • faabman
  • Registratie: Januari 2001
  • Laatst online: 08-08-2024
waarom gooi je i.e. in quirksmode met je xml declaratie??

ik denk dat je even een "change of mind" met krijgen en meer moet letten op het scheiden van de visuele effecten die je wilt toepassen en de semantische betekenis van een deel van je html. Zo is het imo een beetje onnodig om de divs #upperleft en #upperright te gebruiken terwijl je ook gewoon de achtergrond van je #container kunt gebruiken voor het visuele effect...

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!


  • MaZo
  • Registratie: Mei 2002
  • Niet online
Ik gebruik 2 verschillende GIF's voor m'n background. Éen voor de linkerkant, en één voor de rechterkant van de container. Hoe kan ik in mijn geval (dus met 2 verschillende background images) dus die upperleft en upperright div's dan in m'n container div gooien?

  • faabman
  • Registratie: Januari 2001
  • Laatst online: 08-08-2024
dan maak je er toch gewoon één plaatje van waarvan uiteindelijk dus alleen de buitenste randen zichtbaar zijn...

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!


  • equationunequal
  • Registratie: Oktober 2001
  • Laatst online: 17-05 15:54
faabman schreef op dinsdag 21 december 2004 @ 13:39:
dan maak je er toch gewoon één plaatje van waarvan uiteindelijk dus alleen de buitenste randen zichtbaar zijn...
idd, zoals dit

werkt perfect :)

[ equationunequal.nl - portret & model fotografie ] [ newskin.nl - socials ]


  • MaZo
  • Registratie: Mei 2002
  • Niet online
Bedankt, maar hoeveel ruimte komt er dan tussen de 2 randen in die ene background image? Normaal gesproken zit daar de ruimte van mijn container tussen (de container is de scheiding tussen de 2 background images).

  • faabman
  • Registratie: Januari 2001
  • Laatst online: 08-08-2024
als je nou gewoon een afbeelding pakt met de breedte van je #container en daar plak je aan de absolute linkerkant de achtergrond van die linkercontainer en je plakt aan de absolute rechterkant de achtergrond van de rechtercontainer

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!


  • MaZo
  • Registratie: Mei 2002
  • Niet online
Dat is inderdaad een optie, bedankt!

Is er trouwens überhaupt al een doctype die in (nagenoeg) alle browsers goed werkt? Wat wil ik? Een website die zoveel als mogelijk compatible is, maar waar ik echter ook custom scrollbars in wil gebruiken.

Edit:

Moest natuurlijk in de body div, maar het werkt prima! ;)

[ Voor 134% gewijzigd door MaZo op 21-12-2004 17:23 ]


  • blizt
  • Registratie: Januari 2003
  • Laatst online: 01-05 08:39

blizt

Wannabe-geek

Custom scrollbars is gekleurde? Ik weet dat het eerst mogelijk was om dat ook te doen voor Mozilla, maar het is evil ;)
Verder, doctypes werken overal wel hoor .... :P
Als ikj ou was zou ik maar 'ns gaan lezen over dingen als semantiek & wat je zelf al zegt: doctypes.
Als je HTML 4.01 Strict gebruikt (wat ik op zich goed vind, omdat XHTML zelden nodig is) moet je geen XML-declaratie er boven gooien ....
Tenzij je IE natuurlijk in quirksmode wilt hebben ;)

United we stand, and divided we fall


  • MaZo
  • Registratie: Mei 2002
  • Niet online
Bedankt, heb het een en ander aangepast. In Firefox is alles 100% zoals het hoort, in IE krijg ik alleen de bottom niet goed. De bottom div moet 8px in height zijn, IE laat iets van 20px zien waardoor de content van <div id="left"> loopt over loopt in de bottom. Als ik scroll zie ik het er dus doorkomen. Zie bovenstaande screenshots voor voorbeeld.
Mijn code lijkt mij gewoon goed, is het misschien zo dat IE niet om kan gaan met div's kleiner dan een bepaald aantal pixels? Iemand een idee?

Code:
Cascading Stylesheet:
1
2
3
4
5
6
7
#bottom {
  position: absolute;
  bottom: 0px;
  height: 8px;
  width: 100%;
  background: url("bottomimage.gif") no-repeat;
}


P.S. Een line-height: 0px in de bottom div zetten helpt ook niks.

[ Voor 23% gewijzigd door MaZo op 21-12-2004 19:40 ]


  • faabman
  • Registratie: Januari 2001
  • Laatst online: 08-08-2024
je zou even naar je font-size kunnen kijken...

De vragen die je tot nu toe stelt zijn overigens al heel wat keren voorbij gekomen hoor.. Dus een beetje zoeken op zijn tijd kan ook helpen ;)

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!


  • MaZo
  • Registratie: Mei 2002
  • Niet online
Het probleem is dat er helemaal niks in staat. Geen tekst, geen pics, etc. Puur een background image. :?

Edit:

Ik heb nu een klein Javascript gevonden (moet in bottom div worden gezet) dat het oplost, er moet echter toch wel een nettere manier zijn?
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type='text/javascript'>
<!--
function inherit(objidParent,objidChild,objidGrandchild) {
if (document.layers) {
alert('sorry, no pretty layouts for netscape 4');
}
else if (document.getElementById) {
  
Parent = document.getElementById(objidParent);
Child = document.getElementById(objidChild);
Grandchild = document.getElementById(objidGrandchild);

Parent.style.height = Child.offsetHeight + 'px';
Grandchild.style.display = 'block';

return true
}
}
//-->
</script>

[ Voor 77% gewijzigd door MaZo op 21-12-2004 20:55 ]


  • faabman
  • Registratie: Januari 2001
  • Laatst online: 08-08-2024
post anders eens een link naar de pagina, dan kunnen we even zien wat er gebeurt...

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!


  • MaZo
  • Registratie: Mei 2002
  • Niet online
Tuurlijk, geen probleem. Bekijk het verschil (kijk helemaal onderaan de pagina) in IE en Firefox.

[ Voor 8% gewijzigd door MaZo op 23-12-2004 17:54 ]


  • faabman
  • Registratie: Januari 2001
  • Laatst online: 08-08-2024
je moet ff naar je font-size kijken (wanneer je die op bijvoorbeeld 0px zet dan werkt het wel)

oftewel:
faabman schreef op dinsdag 21 december 2004 @ 20:12:
je zou even naar je font-size kunnen kijken...

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!


  • MaZo
  • Registratie: Mei 2002
  • Niet online
Hmm, nu de font-size op 0px staat in de bottom div is het inderdaad min of meer goed. Min of meer, omdat er toch nog iets niet helemaal goed zit daaronder, het is net of er iets naar beneden verdrongen is door die bottom. Als je goed kijkt zie je dat de background 1px lager eindigt dan de bottom div.
Desalniettemin, bedankt voor de hulp, super!

Verwijderd

Tenzij je IE natuurlijk in quirksmode wilt hebben ;)
Dan gebruik je toch gewoon een SGML commentje (<!-- We love IE in quirks! -->)? Een XML Declaration heb je daarvoor niet echt nodig.

  • MaZo
  • Registratie: Mei 2002
  • Niet online
Het probleem is opgelost! :D

Nadat ik in de bottom div "bottom: 0px;" had weggehaald, was alles perfect in orde.
Pagina: 1