PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
T

Background Position

Door Tom K op 16-02-2009 16:02
250 views
Hallo,

Ik heb de volgende code:

<div class="info-list">
								<div class="info-list-item"></div>
								<div class="info-list-item">
									<div style="font-weight: bold; float: left; width: 25%;">1. Ons Net</div>
									<div style="float: right; width: 75%; text-align: left;">Standaard (Glasvezel)</div>
								</div>
								
								<div class="info-list-item">
									<div style="font-weight: bold; float: left; width: 25%;">1. Ons Net</div>
									<div style="float: right;; width: 75%; text-align: left;">Standaard (Glasvezel)</div>
								</div>
								<div class="info-list-item">
									<div style="font-weight: bold; float: left; width: 25%;">1. Ons Net</div>
									<div style="float: right; width: 75%; text-align: left;">Standaard (Glasvezel)</div>
								</div>
								<div class="info-list-item">
									<div style="font-weight: bold; float: left; width: 25%;">1. Ons Net</div>
									<div style="float: right; width: 75%; text-align: left;">Standaard (Glasvezel)</div>
								</div>
								
								
							</div>


hierbij hoort de volgende css:

.info-list .info-list-item
{
	background-image: url('images/list-bg.png');
	background-position: left bottom;
	background-repeat: no-repeat;
	padding-bottom: 4px;
	width: 100%;
	height: auto;
}


als ik deze code nu in ie7 bekijk, ziet het er goed uit, maar in ff3 is het een groote rotzooi, de background position klopt niet, weet iemand waar dit aan kan liggen??

Tom

Screenshots:

internet explorer 7: http://img22.imageshack.us/img22/1798/43161031lm4.gif
firefox3: http://img9.imageshack.us/img9/7662/32047989sr5.gif
Jesper Diovo
16-02-2009 16:19
En als je de floats eruit haalt zit het ook zo? Want meestal zijn de floats de dingen die in browsers verschillen.
Elwin - Fratsloos
16-02-2009 16:20
Ik denk dat het komt door het gebruik van de float.
Dit kan je oplossen met een clear-div. Dat is een div met CSS die minimaal het volgende doet: width: 100%, clear: both.

Die div moet je dan onder de twee 'floatende' divs zetten.

Overigens is het gebruik van inline styles en een losse css best verwarrend.
T
Tom K
16-02-2009 16:26
dit werkt ook niet:

				<div class="info-list"><div style="clear: both; width: 100%;"></div>
								<div class="info-list-item"></div>
								<div style="clear: both; width: 100%;"></div>
								<div class="info-list-item">
									<div style="font-weight: bold; float: left; width: 25%;">1. Ons Net</div>
									<div style="float: right; width: 75%; text-align: left;">Standaard (Glasvezel)</div>
								</div>
								<div style="clear: both; width: 100%;"></div>
			
								<div class="info-list-item">
									<div style="font-weight: bold; float: left; width: 25%;">1. Ons Net</div>
									<div style="float: right;; width: 75%; text-align: left;">Standaard (Glasvezel)</div>
								</div>
								<div style="clear: both; width: 100%;"></div>
								<div class="info-list-item">
									<div style="font-weight: bold; float: left; width: 25%;">1. Ons Net</div>
									<div style="float: right; width: 75%; text-align: left;">Standaard (Glasvezel)</div>
								</div>
								<div style="clear: both; width: 100%;"></div>
								<div class="info-list-item">
									<div style="font-weight: bold; float: left; width: 25%;">1. Ons Net</div>
									<div style="float: right; width: 75%; text-align: left;">Standaard (Glasvezel)</div>
								</div>
								<div style="clear: both; width: 100%;"></div>
								
								
							</div>


edit: als ik de floats eruit haal werkt het, maar hoe kan ik zonder floats hetzelfde effect bereiken??
T
Tom K
16-02-2009 16:34
je ziet toch in de code hierboven dat de clear-div niet werlt
Elwin - Fratsloos
16-02-2009 16:51
Dat komt omdat je hem niet op de goede plek hebt staan.
Elwin schreef op 16.02.2009 16:20
Die div moet je dan onder de twee 'floatende' divs zetten.

Nu heb je hem onder de verzameling staan.
T
Tom K
16-02-2009 17:53
ok, bedankt, dat zal ik morgen proberen(heb de website thuis niet)
Elwin - Fratsloos
16-02-2009 19:21
Om je alvast verder te helpen... de clear-div komt meerdere keren in je code. niet slechts één keer.

Reageren

Inloggen om te reageren