Whats wrong with IE7 Image scaling Width to 100%? Fine in IE8
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?
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...
<!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
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?
Quote:
Originally Posted by Excavator
/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!)
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.
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?
Last edited by supaflyboy; 12-23-2009 at 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?
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.
Quote:
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
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.
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...
Before you post, read our: 
Whats wrong with IE7 Image scaling Width to 100%? Fine in IE8
, 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?
