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

dinsdag 21 december 2004 10:23

Acties:

Topicstarter

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:

<?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 ]

dinsdag 21 december 2004 11:09

Acties:

faabman

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!

dinsdag 21 december 2004 13:33

Acties:

MaZo

Topicstarter

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?

dinsdag 21 december 2004 13:39

Acties:

faabman

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!

dinsdag 21 december 2004 15:51

Acties:

equationunequal

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 ]

dinsdag 21 december 2004 16:33

Acties:

MaZo

Topicstarter

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).

dinsdag 21 december 2004 16:45

Acties:

faabman

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!

dinsdag 21 december 2004 16:49

Acties:

MaZo

Topicstarter

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 ]

dinsdag 21 december 2004 17:37

Acties:

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 ....

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

dinsdag 21 december 2004 19:32

Acties:

MaZo

Topicstarter

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:

#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 ]

dinsdag 21 december 2004 20:12

Acties:

faabman

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!

dinsdag 21 december 2004 20:22

Acties:

MaZo

Topicstarter

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:

<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 ]

dinsdag 21 december 2004 21:34

Acties:

faabman

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!

dinsdag 21 december 2004 21:43

Acties:

MaZo

Topicstarter

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 ]

dinsdag 21 december 2004 21:57

Acties:

faabman

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!

dinsdag 21 december 2004 22:03

Acties:

MaZo

Topicstarter

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!

woensdag 22 december 2004 11:29

Acties:

Verwijderd

Tenzij je IE natuurlijk in quirksmode wilt hebben

Dan gebruik je toch gewoon een SGML commentje ()? Een XML Declaration heb je daarvoor niet echt nodig.

donderdag 23 december 2004 15:28

Acties:

MaZo

Topicstarter

Het probleem is opgelost!

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