Fluid grid in IE images aren't resizing

HTML & CSS
1

Hi

I’ve been doing a responsive web design : http://delighttv.webtemplateprofessional.com/

the images scale down nicely in Firefox, but in IE, they don’t rescale. I did get this to work before, but I can’t seem to find what’s wrong.
One thing I noticed is that the <p> is 298px in IE8 and it’s 300px in Firefox. Don’t know where this difference come from.
so the <p> being smaller than the img could be the problem?

thanks
Paul

2

yeah, the theme is a child of twenty ten.
I agree that it’s not very semantic :slight_smile:

anyway, I got the problem fixed, thanks

3

Stevie, are you a freelancer? If so, congratulations if you get to hand pick your clients and projects based on your taste.
For me, if a client comes to me with a reasonable request and pays well, I’m not turning them down just because I don’t like their design.
Anyway, look at the site in Firefox, when you reduce the browser size, the images scale down. In IE8, they don’t, they overlap each other.

4

Holy hell, that’s a “professional” web template?! This is why I don’t like off-the-peg templates…

I don’t understand what you mean by “the images scale down nicely” - as far as I can see, they are being displayed at their natural resolution, as you haven’t set a height or width attribute on them.

5

Sorry, I could have phrased that better. I was commenting on the source code, not the visuals. It’s the sort of code that could only ever come from a template … gems like

<li id="menu-item-82" class="menu-item menu-item-type-custom menu-item-82">

and

<a class="thumb" href="http://delighttv.webtemplateprofessional.com/
2010/10/yet-anothe-test/" rel="bookmark" title="Permanent Link to
yet anothe test"><p style="background-image: url(http://delighttv.
webtemplateprofessional.com/wpdl/wp-content/themes/delighttwentyten/
timthumb/timthumb.php?src=http://delighttv.webtemplateprofessional.
com/wpdl/wp-content/uploads/2010/10/ScreenHunter_03-Oct.-05-21.
15-642x198.gif&amp;h=410&amp;w=385&amp;zc=1)"><img src=
"http://delighttv.webtemplateprofessional.com/wpdl/wp-content/
themes/delighttwentyten/timthumb/timthumb.php?src=http://delighttv.
webtemplateprofessional.com/wpdl/wp-content/uploads/2010/10/
ScreenHunter_03-Oct.-05-21.15-642x198.gif&amp;h=410&amp;
w=385&amp;zc=1" alt="yet anothe test"  /></p></a>

To its credit, the &s in the URL are properly encoded. It’s just … horrible!

Anyway, look at the site in Firefox, when you reduce the browser size, the images scale down. In IE8, they don’t, they overlap each other.

The first thing I notice is that in Fx and Opera, the image container starts out by being wider than the image, so the images are starting to repeat horizontally. That may be just the working draft images not being the right size, but I suspect not… I don’t know whether it’s the nesting of <p> within <a> that is causing IE to have a fit - I know it’s valid HTML5, but I’m not sure how much IE8 supports the new code features of HTML5…