Responsive Image werkt niet in IE en FF

24 mrt 2014 17:10

#1

Hallo allemaal,

Ik zit met het volgende probleem, op een internet site die ik bouw heb ik een responsive afbeedling ingevoerd
met de volgende code via Module aangepast HTML op de juiste positie gezet:

Code:

<p>
	<img alt="" class="pull-center" src="http://www.Vooorbeeld.nl/Joomla/images/Logoplusnaam3.png" style="float: right; " /></p>
<style type="text/css">img { width: 100%; height: auto; }</style>

Dit werkt prima in safari, maar helaas niet in IE en Firefox!

Iemand een idee hoe ik dit op los?

MVG

Discussie gesloten.

hielke92
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 3

Responsive Image werkt niet in IE en FF

24 mrt 2014 17:16 - 24 mrt 2014 17:16

#2

Hallo Hielke92,

Namens het Joomla!NL team heet ik je van harte welkom op dit forum.

De img class zou al gedefinieerd moeten zijn in je template. En zoals je het nu doet door een inline style onder je daadwerkelijke image te zetten, gaat sowieso niet werken.

Tip: maak gebruik van de Firebug-addon voor Firefox (links naar deze tool hier te vinden). Met deze tool kan je o.a. van ieder onderdeel van de site de css definities achterhalen en waar in welk bestand ze staan. Tevens kan je met deze tool in de betreffende pagina van je site veranderingen aanbrengen in de css definities en meteen zien wat het effect is (later evt. wel zelf de aanpassingen aanbrengen in css bestanden).

En kijk dan of je een definitie ziet als je je afbeelding selecteert. Die zou in een responsive template namelijk goed moeten staan.
Of geef een link naar je site zodat de leden mee kunnen kijken.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Laatst bewerkt 24 mrt 2014 17:16 door Astrid.

Discussie gesloten.

Astrid
Moderator + Technisch team
Berichten: 37151

Responsive Image werkt niet in IE en FF

24 mrt 2014 17:53

#3

Bedankt voor uw snelle reactie!

Ik heb firebug geïnstalleerd en weet nu waar het staat. Maar hoe moet ik het aanpassen, zodat het ook werkt in IE

HTML:

Code:

<header id="header">
<div id="headerbar" class="clearfix">
<a id="logo" href="http://www.voorbeeld.nl/Joomla">
<p>
<img class="pull-center" style="float: right; " src="http://www.voorbeeld.nl/Joomla/images/Logoplusnaam3.png" alt="">
</p>
<style type="text/css">
</a>
</div>
</header>

CSS:

Code:

element.style {
    float: right;
}
img {
    height: auto;
    max-width: 100%;
}
img {
    height: auto;
    width: 100%;
}
img {
    vertical-align: baseline;

Discussie gesloten.

hielke92
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 3

Responsive Image werkt niet in IE en FF

24 mrt 2014 17:57

#4

Je gewone img definitie is goed, behalve dan dat hij er 2x in staat.
Ik weet niet precies wat die pull-center class doet.
Als je hem zo aanpast:

Code:

<img style="float: right; " src="http://www.voorbeeld.nl/Joomla/images/Logoplusnaam3.png" alt="">

Dan zou de standaard css toegepast moeten worden.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Discussie gesloten.

Astrid
Moderator + Technisch team
Berichten: 37151

Responsive Image werkt niet in IE en FF

24 mrt 2014 18:32 - 24 mrt 2014 18:35

#5

juist als ik de door jou genoemde code hier gebruik, doet hij het ook niet in safari.
dus helaas lijkt dat ook niet de oplossing

maar wanneer ik de code zoals in mijn openingspost heb gezet laat weergeven, werkt het wel in safarie maar niet in IE

Laatst bewerkt 24 mrt 2014 18:35 door hielke92.

Discussie gesloten.

hielke92
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 3

Responsive Image werkt niet in IE en FF

25 mrt 2014 17:42

#6

Ik weet zo echt niet wat er mis gaat. Zonder enige styling werkt dit bijvoorbeeld op dit forum ook gewoon:

Code:

<img  src="http://www.voorbeeld.nl/Joomla/images/Logoplusnaam3.png" alt="">

css is klein beetje anders, misschien dat je daar nog iets mee kunt:

Code:

/* Embedded content
 ========================================================================== */
/*
 * 1. Corrects max-width behavior (2.) if padding and border are used
 * 2. Responsiveness: Sets a maxium width relative to the parent and auto scales the height
 * 3. Remove the gap between images and the bottom of their containers
 */
img {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* 1 */
  max-width: 100%;
  /* 2 */
  height: auto;
  /* 2 */
  vertical-align: middle;
  /* 3 */
}

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Discussie gesloten.

Astrid
Moderator + Technisch team
Berichten: 37151

Laatste nieuws

Welkom bij Joomla!NL

Responsive Image werkt niet in IE en FF

Responsive Image werkt niet in IE en FF

Responsive Image werkt niet in IE en FF

Responsive Image werkt niet in IE en FF

Responsive Image werkt niet in IE en FF

Responsive Image werkt niet in IE en FF

Responsive Image werkt niet in IE en FF

Laatste forumberichten

Wil je Joomla!NL steunen?