[CSS]IMG wordt niet mooi uitgelijnd in IE

[Verwijderd]

Beste Tweakers,
ik heb een probleumpje en dat is weer eens met IE.

Hier zoals hij eruit ziet in IE:
http://img85.imageshack.us/img85/4931/ieversiewm5.jpg

En hier in Firefox:
http://img99.imageshack.us/img99/8070/ffversiely5.jpg

Zoals jullie zien heeft IE besloten om een groot gat boven het plaatje te doen, terwijl ik hem naast de eerste paragraaf wil hebben. Nou heb ik al flink gegoogled en hier gezocht, maar het enige probleem dat ik kan vinden is dat IE links en rechts moeilijk gaat doen, en die oplossingen werken tot dusver niet.

Hier is de (relevante) CSS code:

Cascading Stylesheet:

p img {
    padding: 0;
    max-width: 100%;
    max-height: 100%;
}
img.right {
    padding: 0px;
    margin: 0 0 2px 7px;
    display: inline;
    top: auto;
}
img.left {
    padding: 0px;
    margin: 0 7px 2px 0;
    display: inline;
    top: auto;
}
.right {
    float: right;
}
.left {
    float: left;
}
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.caption {
    margin: 5px;
    padding: 5px;
    border: solid 1px #E5E5FF;
    background: #E5F2FF;
    font-size: 80%;
    color: black

en hier de html waar hij van op toepassing is:

HTML:

<div id="content">
        <h2>
          <strong>Titel</strong>
        </h2>
        <h1>
          1946
        </h1>
        <div class="caption right" id="kruid">
          <a href="foto/huis1.jpg" target="_blank"><img id="thumb" name="thumb" src=
          "thumbs/huis1.jpg" alt="kruidenierszaak" width="148px" height="150px" /></a>
          "De oude kruidenierszaak"
        </div>
        <p>
          verhaaltje
        </p>
        <h1>
          1965
        </h1>
        <p>
          nog een verhaaltje
        </p>
      </div>

(ja ik heb uit luiheid h1 en h2 verwisseld omdat ik de een wel een grootte heb gegeven )

Hopelijk kunnen jullie me hiermee helpen, want ik snap er even niets meer van.
En als jullie meer code willen/moeten zijn dan kan ik de main.css ook er wel bij plakken, maar dat leek me niet relevant.

Alvast bedankt voor de moeite!

[ Voor 5% gewijzigd door Verwijderd op 30-03-2007 13:47 . Reden: HTML even mooier gemaakt ]

[Verwijderd]

<div id="content">
<h2><b>Titel</b></h2>
<h1>1946</h1>
<div class="caption right" id="kruid" name="kruid">
<a href="foto/huis1.jpg" target="_blank">
<img id="thumb" name="thumb" src="thumbs/huis1.jpg" alt="kruidenierszaak" width="148px" height="150px" /></a>"foto_titel"
</div>
<p>verhaaltje</p>
<h1>1965</h1>
<p>Nog een verhaaltje</p>
</div>

Correct inspringen zou al een goede start zijn. Verder snap niet de combinatie van XHTML afsluitingen en het gebruik van B tags. (quote gebruikt ivm met bold maken, erg veel fouten hoor!)

[ Voor 11% gewijzigd door Verwijderd op 30-03-2007 11:04 ]

[Verwijderd]

Waarschijnlijk is IE bezig met z'n double float-margin bug ding.
geef .right en .left eens een "display: inline;" misschien dat dit helpt

aanvulling: door de dubbele margin past het plaatje daar misschien niet meer langs dus zet IE hem onder de tekst.

misschien zit ik er helemaal naast, maar dit was het eerste dat in me opkwam

meer info:
http://www.positionisever...lorer/doubled-margin.html

dit:

HTML:

class="caption right"

is overigens wel correct, 2 classes gekoppeld aan 1 element.

[ Voor 63% gewijzigd door Verwijderd op 30-03-2007 11:47 ]

[Verwijderd]

Verwijderd schreef op vrijdag 30 maart 2007 @ 10:59:
[...]

Correct inspringen zou al een goede start zijn. Verder snap niet de combinatie van XHTML afsluitingen en het gebruik van B tags. (quote gebruikt ivm met bold maken, erg veel fouten hoor!)

Over het name attribuut bij de div heb je gelijk. De rest is overigens volledig toegestaan en valid.
En het ziet er natuurlijk even heel lelijk uit aangezien ik constant aan het prutten ben geweest en niet veel zin had om daar op te letten. En die <b> tag snap ik niet zoveel van, want ik had zelf <strong> gebruikt. Maar doet er niet toe.

Verwijderd schreef op vrijdag 30 maart 2007 @ 11:42:
Waarschijnlijk is IE bezig met z'n double float-margin bug ding.
geef .right en .left eens een "display: inline;" misschien dat dit helpt

aanvulling: door de dubbele margin past het plaatje daar misschien niet meer langs dus zet IE hem onder de tekst.

misschien zit ik er helemaal naast, maar dit was het eerste dat in me opkwam

meer info:
http://www.positionisever...lorer/doubled-margin.html

Dat zou al opgelost moeten zijn toch?. Kijk maar eens bij img.left en img.right.

[ Voor 4% gewijzigd door Verwijderd op 30-03-2007 12:07 ]

[Verwijderd]

code:

class="caption right" -> mijn fout, wist ik niet
width="148px" -> px gebruik je alleen in css voor zover ik weet, geen idee of het ook correct zal werken in HTML
"foto_titel" -> mag niet, moet " zijn.

[ Voor 3% gewijzigd door Verwijderd op 30-03-2007 16:12 . Reden: <b> tag doet weldegelijk toe scheelt alsnog data ]

[Verwijderd]

Die height en width was er in eerste instantie niet, maar na wat gelezen te hebben over IE hoopte ik dat dat een oplossing was, wat het uiteindelijk ook niet was. Dus dat haal ik weg.

Over de

HTML:

"

heb je gelijk, was vergeten dat die bestond . Dank je wel daarvoor, maar nu ff on-topic graag.

[moozzuzz]

Deze versta ik niet. Valideert je pagina op w3c.org?

HTML:

        <h2> 
          <strong>Titel</strong> 
        </h2>

Volgens mij moet het combo:

HTML:

<div class="caption right" id="kruid"> 
  <a href=""><img id="" name="" src="" alt="" width="148" height="150" /></a> 
  &quot;De oude kruidenierszaak&quot;
</div>

en

Cascading Stylesheet:

div.right {
    float: right; 
}

.caption { 
    margin: 5px; 
    padding: 5px; 
    border: solid 1px #E5E5FF; 
    background: #E5F2FF; 
    font-size: 80%; 
    color: black;
}

... gewoon werken. Gooi es al de andere troep tussen comments.

[Verwijderd]

This Page Is Valid XHTML 1.0 Transitional!

Hij valideert dus wel gewoon, maar heb dat strong gebeuren toch weggehaald... Een beetje twee keer dubbelop, maar dat krijg je als je gaar bent.

@moozzuzz: Heb het geprobeerd maar krijg hetzelfde resultaat jammer genoeg.

Ik vind het nog altijd een heel vaag iets en dacht inderdaad dat de code die ik had het zou moeten doen.

[Verwijderd]

Iemand een idee op deze mooie zondag?

[Verwijderd]

Ik ben al achter mijn probleem... Waarschijnlijk was het jullie ook wel opgevallen als ik mijn hele code had gepost, maar ik had de content vergeten een class="left" te geven, waardoor die dus niet links floatte en door IE verkeerd werd weergegeven.

Sorry voor de tijd die ik misschien wel verspilt heb van jullie, en geniet verder van deze zondag!