CSS: Compatibiliteitsproblemen in IE (divs)

[Floyd]

Hello,
Ik ben bezig aan mijn nieuwe site, deze keer volledig (of toch bijna volledig) gelayout met divs en css. In Firefox werkt alles prima, maar in IE kom ik natuurlijk weer enkele problemen tegen...

De site staat hier: http://jelle.neewel.be/index.php

Om het snelst te zien wat er aan de hand is moet je dezelfde url maar eens zowel met IE als FF openen, maar ik zal hier toch even verduidelijken wat ik bedoel:

- het menu sluit niet aan bij de witte div (div.wit) eronder bij hover
- de titel sluit niet aan bij de witte div (div.main) eronder

En dan nog een groot probleem (eigenlijk veel groter dan de voorgaande), op volgende pagina: http://jelle.neewel.be/fotos.php
Zoals je kan zien is de breedte niet goed in IE, in tegenstelling tot FF waar het perfect is. Als ik het probeer te fixen voor IE door de width van de betreffende <div> op 570px te zetten (ipv 260px, wat samen met de 310px padding ook 570px maakt), komt het natuurlijk veel te breed uit in Firefox...

Weet iemand een oplossing voor deze lastige compatibiliteitsproblemen?

Enorm bedankt bij voorbaat!

[orez]

voor het eerste probleem moetek nog eens zien, maar uw 2de probleem is supersimpel op te lossen.

In plaats van op die div padding te zetten, zet op uw elementen binnen uw div een margin

[Floyd]

Wat ik nog vergeten ben daarstraks is de css te kopiëren die ik gebruik, om het jullie wat makkelijker te maken qua opzoekwerk:

div.container {
width: 600px;
}

div.menu {
font-size: 17px;
font-weight: bold;
height: 40px;
vertical-align: bottom;
line-height: 50px;
position: relative;
top: 7px;
}

div.wit {
position: relative;
top: 5px;
background-color: #eeeeee;
font-size: 8px;
}

div.titel {
font-size: 48px;
font-weight: bold;
text-align: right;
height: 43px;
vertical-align: top;
}

div.main {
background-color: #eeeeee;
padding: 15px;
font-family: arial;
font-size: 12px;
line-height: 20px;
color: black;
text-align: left;
}


foto's

div.bbq a {
width: 260px;
height: 185px;
background: url(../img/inhoud/fotos/bbq.gif) 0 0 no-repeat;
float: left;
padding-left: 310px;
}

div.ff a {
width: 260px;
height: 185px;
background: url(../img/inhoud/fotos/ff.gif) 0 0 no-repeat;
float: left;
padding-left: 310px;
}

div.polen a {
width: 260px;
height: 185px;
background: url(../img/inhoud/fotos/polen.gif) 0 0 no-repeat;
float: left;
padding-left: 310px;
}

div.bbq a:hover, div.ff a:hover, div.polen a:hover {
background-color: #e3e3e3;
background-position: 0 -185px;
width: 260px;
height: 185px;
padding-left: 310px;
}


Orez, kan je eens verduidelijken wat je exact bedoelt (mss door middel van een code-voorbeeld) want ik heb het niet helemaal door, denk ik. Na het lezen van je tip veranderde ik de padding-left's in margin-left's (zonder goed resultaat), maar dat was niet wat je bedoelde denk ik.
Nogmaals: dank.

[orez]

wel floyd

stel je hebt een div laat hem mij "vb" noemen met een p element erin.

<div id="vb">
  <p></p>
</div>

je hebt 2 mogelijkheden om het p element te gaan uitlenen zoals je wenst.
Of je voegt padding toe aan je div element.

#vb { padding-left : 300px; width: 300px }

waar uw probleem zich dus situeert.
of je doet het volgende:

Je geeft een margin-left mee aan je p element en geen padding aan het div-element.

#vb { padding: 0; width: 300px; }
#vb p { margin-left: 300px; }

op bovenstaande manier met de margin toe te passen op het p element (of in u geval, de elementen binnen de probleem div) zou het perfect moeten werken.

[Floyd]

Oh ja ik begrijp het. Dus ik steek die tekst die naast de foto moet komen in een <p> of in een <span> en geef dat een margin. Ik zal dat morgen eens proberen. Bedankt!

[Xavez]

Zet ze meteen in een P-element, waar tekst sowieso hoort en geef die dan nog een class mee

[Floyd]

OK. Wat is er verkeerd aan een span?

[orez]

een span dient om een stukje tekst binnen een p te highlighten.

Dus stel dat ge iets vetgedrukt wilt binnen uw paragraaf. dan gebruik je daarvoor infeite een span. (aangezien <b> deprecated is) en met een span kun je natuurlijk ook veel meer dan enkel vet/onderlijnd/cursief

dus infeite als volgt:

<p>
 hier komt mijn tekst en uitleg bij de desbetreffende foto.
 <span>Dit wil ik wat laten opvallen</span> hier gaat je tekst dan weer verder
</p>

get it?

[Floyd]

Yes, absoluut, maar dat wist ik eigenlijk al. Mooi uitgelegd, wel. Wat ik mij eerder afvroeg is waarom je dan niet gewoon mag doen:

<span>
hier komt mijn tekst en uitleg bij de desbetreffende foto. <span>
Dit wil ik wat laten opvallen</span> hier gaat je tekst dan weer verder
</span>

Met andere woorden: waarom bestaat juist <p>, als het (voor zover ik momenteel kan zien) toch hetzelfde doet als een <span> ?

[Floyd]

orez, ik heb je methode geprobeerd en het werkte niet.. hier is de code die ik gebruikte:

<div class="main" style="height: 185px;">
<div class="bbq">
<p class="fotos"><a href="http://demosbeq2.free.fr/jelle/bbq/" target="_blank"><i>06/05/2006</i><br><b class="titel">Housewarming BBQ Lore en Steve</b></a></p>
</div>
</div>

div.bbq a {
width: 260px;
height: 185px;
background: url(../img/inhoud/fotos/bbq.gif) 0 0 no-repeat;
float: left;
}

p.fotos {
margin-left: 300px;
}

Zie je (of iemand anders) nog een oplossing?

[orez]

trouwens floyd:

<p class="fotos"><a href="http://demosbeq2.free.fr/jelle/bbq/" target="_blank"><i>06/05/2006</i><br><b class="titel">Housewarming BBQ Lore en Steve</b></a></p>

dit is niet semantisch correct.
Wat beter is: <h2><a href=""><span></span></a></h2>
gebruik geen p's etc... om titels te definieren maar de h tags
h1, h2, h3, h4, h5, h6, ...

voor uw probleem zal ik straks eens zien, ben nu ff bezig

[Floyd]

Ja, juist, bedankt. Ik ga mij voorlopig niet bezig houden met dit allemaal aan te passen, maar het zit in mijn achterhoofd.

[Floyd]

een schaamvolle... *bump*!
orez, of iemand anders, als je het nog eens zou willen bekijken... vreselijk bedankt!