IE vs FF/GC: 'enter' na plaatje

Status
Niet open voor verdere reacties.
K

Keunes

Gebruiker
Lid geworden
16 mrt 2007
Berichten
43
Hey allemaal,
Ik heb al gelezen dat IE en float geen goed huwelijk hebben. Het kan zijn dat dit bij mij problemen geeft, maar misschien is het iets anders. Het probleem: de tekst begint bij IE op een nieuwe regel na een plaatje, terwijl dit niet de bedoeling is (gaat wel goed bij FF en GC). Zie bijlage (links IE, rechts FF/GC).

Dit is mijn html code:
HTML: 
<div id="pagepic">
	    <div class="plaatje">
	    <img src="stones/mug.jpg" height="125" width="125" />
			<div style="top: 125px;" class="tekst">
				<h3>Mug</h3>
				<p><a href="http://www.flickr.com/photos/ephotion/37363566/" target="_new">Bron</a> | <a href="http://creativecommons.org/licenses/by/2.0/deed.nl" target="_new">Copyright</a></p>
			</div>
	  </div>
</div>

En dit het bijbehorende stukje CSS:
Code: 
body {
margin: 0px;
padding: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #333333;
}

/* foto copyright-bron-bekijk-overlay */
	#pagepic{
	width: 125px;
	}

	.plaatje {
	width: 125px;
	height: 125px;
	position: relative;
	overflow: hidden;
	float: left;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
	}

	.plaatje img {
	position: absolute;
	top: 0; left: 0;
	z-index: 0;
	}
	
	.plaatje .tekst{
	color: white;
	width: 100%;
	height: 50px;
	overflow: hidden;
	position: absolute;
	top: 125px;
	background: black;
	background-color: #333333;
	border-top-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	}
	
	.plaatje .tekst A:link {
text-decoration: underline;
color: white;
}
	.plaatje .tekst A:visited {
text-decoration: underline;
color: white;
}
	.plaatje .tekst A:active {
text-decoration: underline;
color: #CCCCCC;
}
	.plaatje .tekst A:hover {
text-decoration: underline;
color: #CCCCCC;
}
	
	.plaatje .tekst h3{
	font-size: 12px;
	margin: 0 0 5px 0;
	padding: 2px 2px 5px 2px;
	border-bottom: 1px solid white;
	}
	
	.plaatje .tekst p{
	margin: 2px; padding: 0;
	}

Hebben jullie een idee hoe ik dit kan oplossen?
 

Bijlagen

  • tekstomloop.jpg
    tekstomloop.jpg
    89,1 KB · Weergaven: 35
Bij mij werkt het hele geval niet. De H3 en de links komen achter de afbeelding terecht in firefox. Lijkt me toch niet de bedoeling.

Ik wil wel even kijken of ik het compleet opnieuw kan opbouwen wanneer ik meer tijd heb
 
Leon d zei:
Bij mij werkt het hele geval niet. De H3 en de links komen achter de afbeelding terecht in firefox. Lijkt me toch niet de bedoeling.

Ik wil wel even kijken of ik het compleet opnieuw kan opbouwen wanneer ik meer tijd heb
Klik om te vergroten...

Bij mij werkt de tekst die erover moet wel; komt doordat er nog een los javascript-bestand bij hoort. Zie test.daktari.nu voor werkend voorbeeld. Mijn probleem is dus niet die tekst, maar de daadwerkelijke inhoud; die moet rechts van het plaatje beginnen i.p.v. eronder.

Bedankt
 
Dat komt denk ik doordat de tekst in een nieuwe div staat. Een nieuwe div begint altijd op de volgende regel en een <p> ook. Door een style element mee tegeven display: inline zou dit dan moeten verhelpen. Display: inline zorgt ervoor dat het niet op een nieuwe regel begint. Ook moeten deze div en p dan float: left hebben zodat ze naast de afbeelding floaten, omdat .plaatje ook float left heeft.
 
Dag Leon d.,
Heel erg bedankt voor je reacties, en sorry dat ik nu pas reageer.
Ik heb geëxperimenteerd met float:left en display:inline. Het heeft echter niks uitgehaald, eigenlijk wel, maar dan de verkeerde kant op. In sommige situaties kwam het bij GC er ook 'verkeerd' uit te zien. Kan het zijn omdat het geheel in tabellen staat?

Gr.
 
Dat hangt er vanaf waarmee je kijkt...
Als je kijkt met Firefox of met Chrome, dan is het goed.
Als je kijkt met Internet Explorer, dan is het niet goed :S
 
K heb nu ff simpel vanaf scratch heel kort een werkend voorbeeld gemaakt.

HTML: 
<head>

	<link href="style2.css" rel="stylesheet" type="text/css" media="screen" />


</head>
<body>
	<div class="bericht">
        <img src="stones/mug.jpg" width="125" height="125"/>
		Tekst die naast het plaatje moet beginnen! En nog meer tekst wat op een gegeven moment naar beneden schuift.
		
	</div>

</body>

en de 2 regels css
HTML: 
.bericht {
	width: 200px;
}
.bericht img{
	float: left;
}

Het beste is om de afbeelding en de tekst in een div te zetten. De afbeelding dan naar links te laten floaten. Hierdoor komt de tekst die erin zit automatisch naast de afbeelding te staan.

Hopelijk kun je hier wat mee.
 
Gelukt

Geniaal :D
Ik heb naar jou voorbeeld ook de tekst binnen <div id="pagepic"> gedaan (maar dan hernoemd tot "inhoud"). Vervolgens kwam alle tekst in een dunne strook onder het plaatje te staan. Dit had ik al eerder gehad, maar nu bedacht ik de width-waarde te vergroten.
Er kwam wel een groot 'blank' stuk tussen het plaatje en de regel daaronder, maar dat heb ik nu aangepast door de bottom-margin van de afbeelding te verkleinen.

En nu staat 't helemaal zoals ik bedoelde :)
Met dank!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan