...

View Full Version : Whats wrong with IE7 Image scaling Width to 100%? Fine in IE8



supaflyboy
11-19-2009, 10:55 PM
IE7 does not resize the images properly with CSS

My page looks perfectly fine in FF and IE8 - exactly like it should. But for some reason on IE7 it does no properly resize the images down to 100% of the parent container, which is set at 30% of the page width.

The images are just 100% width of the full image. How do I make it look like IE8 and Firefox on IE7?

http://www.unreal-deals.com/ebook/tests/ie7-image-width-resizing.php


<style type="text/css">
<head>
<style type="text/css">
<!--
.bullet-pic-numbering-IE-hack { width: 30%;
}
.what-you-get-image { width: 100%;
}
-->
</style>
</head>
<body>


<table class="resizeable-element" border="0" align="center">
<tr>
<td class="bullet-pic-numbering-IE-hack" id="bullet-pic-numbering"><div align="center"><img class="what-you-get-image" src="/!images/misc/box-new-blue-2-done-without-cd's-1-solo-optimized-thumb.png" /></div></td>
<td class="what-you-get-closing-table" id="bullet-numbering">1.</td>
<td class="what-you-get-closing-table" id="table-offer-spacing"><span class="bullets bodytext noindent">You get your<strong> Immediate Download of this eBook</strong> delivered to your email, Windows &amp; Mac Compatible.</span>
<p class="bullets bodytext noindent">That means you get <span class="style339">INSTANT ACCESS DIGITAL-DELIVERY! </span><br />

</tr>
</table>

</body>

abduraooft
11-20-2009, 08:37 AM
Use an ordered list (http://htmldog.com/reference/htmltags/ol/) to generate bullet numbers and never use tables for making your layout.

PS: Fix the errors in your markup, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.unreal-deals.com%2Febook%2Ftests%2Fie7-image-width-resizing.php&charset=%28detect+automatically%29&doctype=Inline&group=0

supaflyboy
11-20-2009, 06:46 PM
an ordered list would not work for making a 3 column layout and your response does not answer my question

Rowsdower!
11-20-2009, 07:20 PM
There is no point in tracking CSS issues while HTML errors are present. Validate your page as suggested first.

With that said, I believe IE7 handles tables differently than IE8/FF. IE7 and below will push the <td> to be as wide as the content, which is why the image appears full size there rather than shrunken to fit.

Anyway, while you might not have asked those questions abduraooft's suggestions should be followed as best practice (and the suggested <ol> is for your numbered list of contents, not the layout itself). Tables are bloated, inflexible, inaccessible for screen readers, and not semantic for this use. Table layouts are a dying breed and they are a bad way in general to teach yourself CSS. The sooner you embrace <div> based layouts the better off you will be in the end. Anyway, off of the soapbox now...

Excavator
11-20-2009, 07:20 PM
Hello supaflyboy,
ab was not suggesting you build a 3 column layout with a list.

Did you make any attempt at fixing the errors in your markup? Plenty of errors there that need to be fixed.

In support of the suggestion not to use tables for layout, have a look at this site. (http://www.hotdesign.com/seybold/everything.html)


this approach might get you a start -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100.1% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
width: 578px;
margin: 30px auto;
border: 1px solid #000;
background: #fff;
overflow: auto;
font-size: 0.8em;
}
#img1 {
height: 120px;
width: 94px;
float: left;
margin: 125px 0 0;
}
ol {
margin: 25px 0 0 100px;
padding: 0 25px;
list-style: decimal outside;
}
li {
margin: 25px 0;
}
</style>
</head>
<body>
<div id="container">
<img src="http://www.unreal-deals.com/ebook/!images/misc/website-graphic-1-thumb.jpg" alt="websites photo" id="img1" />
<ol>
<li>
You get your Immediate Download of this eBook delivered to your email, Windows & Mac Compatible.
That means you get INSTANT ACCESS DIGITAL-DELIVERY!
( value)
</li>
<li>
You get your very own FREE Affiliate Website ready to start making 50% commissions of products
ranging from $97-$197, complete with sales letter, graphics, and shopping cart ready to accept
payments. You just pay web hosting.
(If you can afford 5 bucks a month for hosting, you're fine. If you can't afford 5 bucks a month,
well then you're probably not too serious about creating a REAL business and nothing will work
for you anyway)
($197.00 value)
</li>
<li>
You get a FREE 60 Minute One-On-One Private Consultation with one of my Success Coaches.
I've hired the best Internet Marketing Mentors and Personal Success Coaches in the field
and I've got it set up so you'll get a FULL hour-long consultation with them (normally $500/Hour),
where they'll go over your personal financial situation and map out an action plan to
reach your personal goals.
These guys are responsible for creating at least 10 multi-millionaires and have helped
thousands of regular people quit their jobs and earn an killer paycheck from home, and
that number keeps growing every month.
My mentors and I will strive to help you become our next success story. I want you to
reach whatever personal financial goals are most important to you.
And don't forget — with financial freedom comes LIFESTYLE freedom — something so precious
I can't put an accurate price on it.
($500+ value)
</li>
</ol>
<!--end container--></div>
</body>
</html>

/edit - If Rows and I both posted at 10:20am then it's a tie and I should be first because the posts should be sorted alphabetically.
hehe

supaflyboy
12-11-2009, 09:07 PM
Hey I really need some help on this

anyone know whats causing this

Rowsdower!
12-12-2009, 09:59 PM
Hey I really need some help on this

anyone know whats causing this

We already told you. If you are too stubborn or combative to heed the advice we have given so far then there is nothing more for us to say, sadly. Do you want substandard, hacky code or a real solution? If you're stuck on tables then you might try some javascript on the image to make IE7 behave as intended. Otherwise, get rid of the table mentality and re-tool the layout. It really would be in your own best interest to learn table-less layout strategies anyway, so why not now?


/edit - If Rows and I both posted at 10:20am then it's a tie and I should be first because the posts should be sorted alphabetically.
hehe

In the event of a tie maybe they sort posts by who can see the sun rise first. (Or at all, as the case may be in Alaska - HA!)

supaflyboy
12-23-2009, 08:48 PM
OK mr smart-man. I know how to write a website using css-non tables. My whole site is divs. This particular box is a table because it's way easier than figuring out how to make a 3 column div.

I made this table appear on its own temp page so it looks like the only thing on the page. Can we get past that part?

Your advice to "get rid of the table mentality and re-tool the layout" is cocky, arrogant, and useless since it provided no real value and no real solution. Pass on those comments.


If anyone can explain what the coding error is in why it works on ie8 but NOT ie7, I'll be ever-happy.

Excavator
12-23-2009, 09:00 PM
http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fwww.unreal-deals.com%2febook%2ftests%2fie7-image-width-resizing.php :rolleyes:

Why we won't help you. (http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you)


-----------------

In the event of a tie maybe they sort posts by who can see the sun rise first. (Or at all, as the case may be in Alaska - HA!)
Ha - that's funny mr smart-man!

supaflyboy
12-23-2009, 09:03 PM
The ID attributes are not the reason for the problem. I'm certain of that. How do I know? Because On my life page I alraedy validated all ID errors and the problem is the same. Don't believe me. Check the page now updated. Same problem.

Maybe making smart comments to look superior with your buddies isn't the answer?

Kor
12-23-2009, 09:07 PM
But for some reason on IE7 it does no properly resize the images down to 100% of the parent container, which is set at 30% of the page width.
Pardon my French :), but why to "resize the images down to 100% of the parent container"? Resizing images looks ugly, as it implies a loss of clarity, colours and sharpness. Why not simply use the images at their size? Or use a graphical editor to do that beforehand?

supaflyboy
12-23-2009, 09:16 PM
Pardon my French :), but why to "resize the images down to 100% of the parent container"? Resizing images looks ugly, as it implies a loss of clarity, colours and sharpness. Why not simply use the images at their size? Or use a graphical editor to do that beforehand?

Good question - that is because I'm split testing page widths, real-time, and when the page is at one of the smaller widths, all the elements on the page resize accordingly so keep the same aspect ratio - and so the images resize down slightly. They don't lose much sharpness when resizing down compared to when resizing up.

I validated my page again but its giving errors I don't understand.


Line 47, Column 10: document type does not allow element "tr" here

<tr>
Line 93, Column 12: end tag for "tr" omitted, but OMITTAG NO was specified

</table>

What does it mean - my syntax looks fine to me...

Kor
12-23-2009, 09:39 PM
Why do you use images loaded with an absolute URL form another domain? Can't you simply copy them an put them in your domain's folder?

Moreover, as all the people here told you: do you expect a proper display as your site has serious validation problems? You should have HTML coded correctly - it is hard to see all your errors at the moment.

supaflyboy
12-23-2009, 09:47 PM
OK, so I had a missing </tr> tag so the doc was invalid.

This document was successfully checked as XHTML 1.0 Transitional!

Happy? Now want to help me figure this out? It seems that IE7 takes the default width of the image and makes it the "placeholder" for that element, and even if you resize the image to 50%, the space the image takes up is the same as if the image were 100%

So the question is, how do I get ie7 to stop looking at default image size and instead the actual width I specify...

Excavator
12-24-2009, 12:33 AM
More to fix. (http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3a%2f%2fwww.unreal-deals.com%2febook%2ftests%2fie7-image-width-resizing.php)

supaflyboy
01-03-2010, 09:49 PM
OK man, I'm not gonna sit here and play politics with you. if you don't want to help me, don't respond. Someone else will. All that validation is not the problem and you KNOW it.

Hoping someone out there isn't trying to prove a point and will simply lend a helping hand - until then -

Rowsdower!
01-04-2010, 10:49 PM
Pearls before swine!

Anyway, I'm still thinking that this is your issue:


...I believe IE7 handles tables differently than IE8/FF. IE7 and below will push the <td> to be as wide as the content, which is why the image appears full size there rather than shrunken to fit...

Since the HTML rendering takes place before the CSS is piled on to the browser the <td> is - and always will be - already expanded to fit the image you placed inside of it. Then the CSS comes around and tries to make the image 100% of the stretched <td> size.

So, in other words, you can't do this with tables in IE7. You will just be chasing your tail unless you want to cram some javascript down IE7's throat. That part is up to you.

Someone may correct me about the above, but I think most of us have never wrestled this issue. And... well... at this point even you should already know why that would be.

~mr smart-man

P.S. Get rid of the table mentality and re-tool the layout. :thumbsup:

jasiok
05-06-2011, 05:28 PM
Hi man, I don't understand why the others decided to have such low culture, and keep insulting you for not validating etc., I suppose that's because they do not know the answer - I found it elsewhere and it saved my day! or even more than that: I had the client logo that looked crappiest ever when viewed in IE7 in anything else than 110% zoom, oups... you won't tell your visitors to "please, if you're using IE7, set the zoom to 110%" lol
the reason for this is that you have to actually *tell* IE7 to resample images, while other browsers do it unasked - the magic password is:
img {-ms-interpolation-mode:bicubic;}
oh, and btw, if your image is a png (as in ideal, non-IE world it should be) - forget it - IE7 is still a prehistoric application that does not know how to resample this format, but both gif and jpg work fine
hope it helps
cheers



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum