Foto’s verschuiven van plaats-
-
Nicolay - Lid geworden op: 15 mei 2004, 17:43
- Locatie: Antwerpen
Op mijn website : http://www.keukentheorie.net staan (bijna) alle foto aan de linkerkant van de bladzijde. Deze foto’s staan opgeladen bij Tinypic, kwestie van plaats vrij te houden bij Belgacom…
Als je de site bekijkt met Firefox, is alles normaal… maar als je ze bekijkt met Internet Explorer staan de foto’s verschoven. Ttz de bovenste foto staat juist en de volgende schuiven geleidelijk naar onder toe..
Om dit duidelijk te maken heb ik een kleine pagina aangemaakt met twee foto’s ;
http://www.keukentheorie.net/Testpagina.html
De bovenkanten van de foto’s moeten juist naar de stippellijn komen in het tekstgedeelte…
Via IE is reeds duidelijk te zien dat de tweede foto lager staat.( enkele millimeters, maar bij veel foto’s gaat dit reeds over centimeters verschuiving…)
Ook heb ik geprobeerd om de foto’s te plaatsen van mijn eigen disc.. ipv Tinypic maar het resultaat blijft hetzelfde. Ook in een tabel zetten helpt niet.
Ik heb zo een indruk dat IE een grote afstand ( spatie tussen elke lijn, van één pixel of zoiets..) tussen de verschillende items gebruikt.
Bestaat hier een oplossing voor?
Als je de site bekijkt met Firefox, is alles normaal… maar als je ze bekijkt met Internet Explorer staan de foto’s verschoven. Ttz de bovenste foto staat juist en de volgende schuiven geleidelijk naar onder toe..
Om dit duidelijk te maken heb ik een kleine pagina aangemaakt met twee foto’s ;
http://www.keukentheorie.net/Testpagina.html
De bovenkanten van de foto’s moeten juist naar de stippellijn komen in het tekstgedeelte…
Via IE is reeds duidelijk te zien dat de tweede foto lager staat.( enkele millimeters, maar bij veel foto’s gaat dit reeds over centimeters verschuiving…)
Ook heb ik geprobeerd om de foto’s te plaatsen van mijn eigen disc.. ipv Tinypic maar het resultaat blijft hetzelfde. Ook in een tabel zetten helpt niet.
Ik heb zo een indruk dat IE een grote afstand ( spatie tussen elke lijn, van één pixel of zoiets..) tussen de verschillende items gebruikt.
Bestaat hier een oplossing voor?
-
coderunner - Lid geworden op: 27 mar 2006, 04:35
- Locatie: Aubauke - Aentwaerepe
Beste Nicolay,
Je zou dit kunnen oplossen in IE door de waarde van de "margin-top" van de tweede foto kleiner te maken zodat dit wel naast de lijn komt te staan maar dit lost je probleem niet echt op daar dan in FF de tweede foto weer te hoog zal staan.
Een mogelijke oplossing kan zijn door twee verschillende style bestanden aan te maken (één voor IE bv. style_IE.css en één voor FF (of andere browser) bv. style.css).
Op de pagina tussen de tags <head> en </head> komt dan de code die verwijst naar deze 2 style bestandenDe eerste is de style (hier style.css) die wordt gebruikt indien de browser niet IE is.
De tweede zegt wanneer het wel IE is moet style_IE.css gebruikt worden
Lees ook volgend artikel over CSS Conditional Comments.
Bekijk je test pagina in IE en FF dat ik hier even online gezet heb met de 2 verschillende style bestanden (style.css en style_IE.css).
mvg,
Coderunner
Je zou dit kunnen oplossen in IE door de waarde van de "margin-top" van de tweede foto kleiner te maken zodat dit wel naast de lijn komt te staan maar dit lost je probleem niet echt op daar dan in FF de tweede foto weer te hoog zal staan.
Een mogelijke oplossing kan zijn door twee verschillende style bestanden aan te maken (één voor IE bv. style_IE.css en één voor FF (of andere browser) bv. style.css).
Op de pagina tussen de tags <head> en </head> komt dan de code die verwijst naar deze 2 style bestanden
Code: Selecteer alles
<link rel="stylesheet" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" href="style_IE.css" />
<![endif]-->De tweede zegt wanneer het wel IE is moet style_IE.css gebruikt worden
Lees ook volgend artikel over CSS Conditional Comments.
Bekijk je test pagina in IE en FF dat ik hier even online gezet heb met de 2 verschillende style bestanden (style.css en style_IE.css).
mvg,
Coderunner
Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.
-
Nicolay - Lid geworden op: 15 mei 2004, 17:43
- Locatie: Antwerpen
Het werkt niet. Of ben ik wat vergeten... ?
Kijk eens in de code, aub... ( is opgeladen naar Belgacom..)
Dit heb ik in de header geplakt... zoals gezegd.
<link rel="stylesheet" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" href="style_IE.css" />
<![endif]-->
Kijk eens in de code, aub... ( is opgeladen naar Belgacom..)
Dit heb ik in de header geplakt... zoals gezegd.
<link rel="stylesheet" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" href="style_IE.css" />
<![endif]-->
-
coderunner - Lid geworden op: 27 mar 2006, 04:35
- Locatie: Aubauke - Aentwaerepe
Beste Nicolay,
Hiervoor is wel kennis van html en css noodzakelijk.
De code die je tussen <head> en </head> gezet hebt is OK ...
MAAR dat is niet voldoende want je moet ook nog deze 2 stylesheet bestanden (style.css en style_IE.css) aanmaken. Alles wat op je pagina "Testpagina.html" tussenen staat, moet je uit de html code van de pagina halen.
Vervolgens open je in bv. kladblok ( of Notepad++ ) een nieuwe pagina en plakt de style daarin en bewaart dit als style.css
Dezelfde code plak je nogmaals in kladblok ( of Notepad++ ) op een tweede geopende pagina maar je verkleint daarin de top marge zodat de tweede foto naast de lijn staat en bewaar dat als style_IE.css.
De drie bestanden zijnde "Testpagina.html" - "style.css" en "style_IE.css" laad je op naar je webruimte op de Belgacomserver.
Deze 3 bestanden (zie hoger) heb ik naar je email adres verstuurd.
mvg,
Coderunner
Hiervoor is wel kennis van html en css noodzakelijk.
De code die je tussen <head> en </head> gezet hebt is OK ...
MAAR dat is niet voldoende want je moet ook nog deze 2 stylesheet bestanden (style.css en style_IE.css) aanmaken. Alles wat op je pagina "Testpagina.html" tussen
Code: Selecteer alles
<style type="text/css">Code: Selecteer alles
</style>Vervolgens open je in bv. kladblok ( of Notepad++ ) een nieuwe pagina en plakt de style daarin en bewaart dit als style.css
Dezelfde code plak je nogmaals in kladblok ( of Notepad++ ) op een tweede geopende pagina maar je verkleint daarin de top marge zodat de tweede foto naast de lijn staat en bewaar dat als style_IE.css.
De drie bestanden zijnde "Testpagina.html" - "style.css" en "style_IE.css" laad je op naar je webruimte op de Belgacomserver.
Deze 3 bestanden (zie hoger) heb ik naar je email adres verstuurd.
mvg,
Coderunner
Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.