Hi all, Having a problem with Max-width in CSS when running my responsive website in Internet.Explorer on the smaller screen resolutions.

 

http://www.mason-uk.co.uk/responsive/html5boilerplate5-newnav.html

 

To view open in IE and make the screen smaller than about 600px and you will see the main pic distort heigh wise.

Is there anyway of instructing the css height to stay in scale to the width?

 

Thanks

Rich

Hi.

Mabe this could be fixed with overflow: hidden; BUT:
A Quick W3C HTML markup validation shows 16 Errors and 12 warning(s)
Your CSS contains 25 errors (CSS3 validation)

Try to fix those errors first.

 

Nice design by the way

Thanks Nillervision, I corrected those issues (mostly, although some of the code for FB like and Google +1 etc is still throwing up errors).

 

But the problem I've still got is that IE 8 is not correctly scaling my images, where I have used max-width and min-width etc. The height distorts and doesn't scale with the width.

 

Any ideas anyone?

'ello. Good old Internet Explorer

 

There a couple of things you could try. Set the width as auto if you're going to use a max-width. I just read that this is a bug with IE8. If you set height to auto or don't assign a value, it apparently doesn't want to play ball. You could also set the height in the markup as you only specify width.

 

Give that a go and see if it helps.

Thanks 4li4s,

Just read an article about that myself! Yes that kind of works, its in scale now, but it seems to have removed the elastic/scaling element from all browsers. By that I mean that the image just stays the same size no matter how you drag the browser window about (until it hits the next media query). Previously the image scaled...

Still its a step in the right direction, but I would like the image to expand and contract depending on the resolution