Positioneringsproblemen

Dat kan wel, ik wil alleen niet die lange laadtijden! daarbij komt dat ik het niet bijster professioneel vind :)

Om die fonts te kunnen gebruiken, zul je er wel verschillende afbeeldingen van moeten maken. Voornamelijk ook omdat je tekst op z'n kant wilt zetten.

Je hoeft echter geen afbeelding voor de hele vakjes te maken, je zou alleen voor de tekst een plaatje moeten maken. De achtergrondkleur van zo'n vakje kun je gewoon met CSS instellen. Op die manier houd je je plaatjes zo klein mogelijk en beperk je de grootte van je pagina.

precies.

Hey jongens,

Ik ben er weer eens mee bezig geweest en ik krijg (uiteraard) een andere output in IE dan in de browsers. het live "resultaat" is ondertussen te vinden op http://www.nofaketheater.com/2008.

hier een stukje van mn CSS:

#info {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #ec009c;
  width: 230px;
  height: 90px;
  background-image: url(img/info.png);
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #ffffff;
}


#foto1 {
  position: absolute;
  top: 0px;
  left: 233px;
  left: 250; !important
  background-color: #ec009c;
  width: 225px;
  height: 170px;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #ffffff;
}

...en de bijbehorende HTML

<div class="container">
    <div id="info"></div>
    <div id="foto1"></div>
  </div>

De container is relative gepositioneerd, met een 0px auto margin. Iemand een idee hoe ik de weergaves hetzelfde kan krijgen? of zal ik het met DOM manipulatie op moeten lossen? :S

edit: zoals jullie zien heb ik de oude !important-hack geprobeerd, werkt neit meer in ie7 :(

Allereerst het goede doctype. Zet hem op XHTML 1.0 strict.

Daarnaast wil IE6 nog wel eens lastig doen met relatief en absoluut gepositioneerde elementen. Dat heeft te maken met de hasLayout property die Microsoft verzonnen heeft. Zorg dat al je divs in ieder geval een width hebben, dat scheelt al vrij veel problemen.

...okee! ik heb toch een hack kunnen vinden:

#foto1 {
  position: absolute;
  top: 0px;
  left: 234px;
  * left: 230;
  background-color: #ec009c;
  width: 225px;
  height: 170px;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #ffffff;
}

De regel met * ervoor wordt alleen gelezen door IE... in principe "opgelost" dus.

Hacks stel je altijd zo lang mogelijk uit. Je hebt namelijk geen enkele garantie over forward compatibility. Problemen met breedtes en dergelijke zijn vaak ook met slimme standaard CSS op te lossen.

Ja ik weet het, maarja na een avond aankloten was ik het toch echt zat... de breedtes zijn ingesteld, het probleem is nu alleen dat IE de borders neit bij de breedte van de divs optelt en Firefox en Opera wel.

IE6 doet dat wel hoor. Nogmaal: het goede DOCTYPE gebruiken.

Mocht dat nog niet werken, dan ga je met wrapper -divs werken.

Thanks, ik ga daar nog even mee spelen

edit: trouwens, had je doctype reactie even gemist omdat hij tussen mijn eigen postst in staat... sorry!

edit 2: De doctype heeft het gefixt. Sorry, ik hou me vooral bezig met Java en PHP en kan prima een website vormgeven, maar van CSS positionering, doctypes en dat soort dingen heb ik (nog) geen kaas gegeten. Interessant projectje wat dat betreft ;) thanks!