Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #14533 > unrolled thread

Image in Responsive Design. Need advice ... Thank You.

Back to article view | Back to comp.lang.javascript

Contents

  Image in Responsive Design. Need advice ... Thank You. "Shapper." <mdmoura@gmail.com> - 2012-06-16 06:17 -0700
    Re: Image in Responsive Design. Need advice ... Thank You. "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2012-06-16 16:45 +0300
      Re: Image in Responsive Design. Need advice ... Thank You. "Shapper." <mdmoura@gmail.com> - 2012-06-16 07:57 -0700

#14533 — Image in Responsive Design. Need advice ... Thank You.

Hello,

I am working on a web site with Responsive Design. 

I need to load different image sizes depending on Media Query.

I am trying the following HTML 5 approach:

<img src="mobilefirst.jpg" data-medium="tabletfriendlyversion.jpg" data-large="desktopfriendlyversion.jpg" />

Which is well described here:
http://www.jordanm.co.uk/sourceshuffling

The problem the demo does not work in IE!

Does anyone has any idea how to solve this?

Thank You,
Miguel

[toc] | [next] | [standalone]

#14534

2012-06-16 16:17, Shapper. wrote:

> http://www.jordanm.co.uk/sourceshuffling
>
> The problem the demo does not work in IE!

The page is buggy: it starts with a <meta> tag. So it does not start 
with a doctype declaration. Therefore browsers go to Quirks Mode. This 
means that they are differently quirky. IE generally refuses to 
understand most of the advanced CSS, i.e. CSS3 features, in Quirks Mode, 
and the page heavily relies on them.

You can see this on IE 9 by hitting F12, then setting Document Mode to 
IE 9 mode. Now the technique works. To make it work in IE 9 on your 
pages, just make sure the document starts with <!DOCTYPE html>.

(It won't work on IE 8 and earlier, due to lack of support to media 
queries, see http://caniuse.com/#feat=css-mediaqueries )

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#14535

On Saturday, June 16, 2012 2:45:04 PM UTC+1, Jukka K. Korpela wrote:
> 2012-06-16 16:17, Shapper. wrote:
> 
> > http://www.jordanm.co.uk/sourceshuffling
> >
> > The problem the demo does not work in IE!
> 
> The page is buggy: it starts with a <meta> tag. So it does not start 
> with a doctype declaration. Therefore browsers go to Quirks Mode. This 
> means that they are differently quirky. IE generally refuses to 
> understand most of the advanced CSS, i.e. CSS3 features, in Quirks Mode, 
> and the page heavily relies on them.
> 
> You can see this on IE 9 by hitting F12, then setting Document Mode to 
> IE 9 mode. Now the technique works. To make it work in IE 9 on your 
> pages, just make sure the document starts with <!DOCTYPE html>.
> 
> (It won't work on IE 8 and earlier, due to lack of support to media 
> queries, see http://caniuse.com/#feat=css-mediaqueries )
> 
> -- 
> Yucca, http://www.cs.tut.fi/~jkorpela/

Hello Yucca,

I uploaded a new version of the page:
http://www.flyondreams.net/lab/responsive/responsive.htm

I did a few changes:
1 - Added the Doctype (That solves IE9 problem)
2 - Added Respond:
    https://github.com/scottjehl/Respond
    Now media queries work on older browsers.

The only problem remaining is that in IE8 and IE7 the images versions do not change. I think this might be related with the after in CSS ...

Any idea?

-- 
 
Thank You,
Miguel

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web