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.
Results 1 to 3 of 3
  1. #1
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts

    problem with chrome distorting pictures

    EDIT: Seems ok if I specify width and height in px and not % so I will go with this...

    Hi,

    Something I just noticed.

    In chrome pictures at the bottom of this page are streched and squashed out and although look kind humourous are not what I wanted...

    http://www.minifigtimes.com/

    It is fine in IE and FX hence I didnt notice till now.

    Problem is likely related to the fact that I have a larger pic (253x194) that I was trying to resize in CSS although in this case I left it at 100% and IE and FX seems to have auto-resized it to fit in a DIV. Chrome hasn't however.

    These are my codes:

    PHP Code:
    /* THREE IMAGES AND STORY LINKS */

    #subwrapper{
     
    margin0 0 0 0/* above left below right */
     
    padding0
     
    border:0px solid #f00; /*diagnostic*/
     
    overflow:auto/*these two lines*/
     
    width:75%; /*uncollapse the box*/
    }


    #subwrapper div{
     
    margin0/* above left below right */
     
    padding:0px
     
    border:0px solid #f00; /*diagnostic*/
     
    width:25%; /*sets the column width as a percentage of #subwrapper*/
     
    float:left;
    }

    #subwrapper img{
     
    width100%;
     
    height100%;
     
    }

    #subwrapper .mid {
    margin0 5%;
    }

    /* THREE IMAGES AND STORY LINKS - END */ 

    HTML
    PHP Code:
    <div id="subwrapper" class="story-headline">
        <
    div>
            <
    img src="http://www.minifigtimes.com/images-2009/news/2009-02-14-p1.png" alt="test">
            <
    p>
            
    Gap tightens at top as leaders held by Torino
            
            
    <a href="http://www.minifigtimes.com/news/2009/2009-02-14-story01.shtml" class="link-blue">Read</a>
            </
    p>
            
        </
    div>
        
        <
    div class="mid">
        
            <
    img src="http://www.minifigtimes.com/images-2009/news/2009-02-09-p1.png" alt="test">
            <
    p id="subbody">
            
    February 11th Declared A Public Holiday
            
            
    <a href="http://www.minifigtimes.com/news/2009/2009-02-09-story01.shtml" class="link-blue">Read</a>
            </
    p>
        
        
        </
    div>
        
        <
    div>
            <
    img src="http://www.minifigtimes.com/images-2009/news/2009-02-07-p1.png" alt="test">
            <
    p>
            
    LFC comeback ends Napolis record unbeaten run 
            
            
    <a href="http://www.minifigtimes.com/news/2009/2009-02-07-story01.shtml" class="link-blue">Read</a>
            </
    p>
        </
    div>      
    </
    div>      <!-- sub wrapper Div end --> 
    Last edited by Partizan; 02-19-2009 at 10:55 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    In chrome pictures at the bottom of this page are streched and squashed out and although look kind humourous are not what I wanted...
    Images in percentage widht/height can easily get skewed out of proportion. Look at this resizing background image http://nopeople.com/CSS/background_i...ize/index.html and look what happens to it when you resize your browser to a rectangle shape.
    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

  • #3
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts
    Yes, this isnt very good, unless it is desired for some reason..


  •  

    Posting Permissions

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