Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 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?

    http://www.unreal-deals.com/ebook/te...h-resizing.php

    Code:
    <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>
    Last edited by supaflyboy; 11-19-2009 at 11:02 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Use an ordered list 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=ht...Inline&group=0
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    an ordered list would not work for making a 3 column layout and your response does not answer my question

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.


    this approach might get you a start -
    Code:
    <!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
    Last edited by Excavator; 11-20-2009 at 07:23 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey I really need some help on this

    anyone know whats causing this

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by supaflyboy View Post
    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?

    Quote Originally Posted by Excavator View Post
    /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!)
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #8
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    http://validator.w3.org/check?verbos...h-resizing.php

    Why we won't 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!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by supaflyboy View Post
    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?
    Last edited by Kor; 12-23-2009 at 09:10 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #12
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor View Post
    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...

  • #13
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    Last edited by Kor; 12-23-2009 at 09:42 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #14
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •