#1
  1. No Profile Picture
    Loves Diesel Generators
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2004
    Location
    Lincs - UK
    Posts
    658
    Rep Power
    88

    Display Issue in Safari / Chrome


    Hi All,

    I was wondering if someone could help and take a look at this. I have a site that is not displaying correctly in chrome and also Safari (at least on the iPhone).

    The rest of the page is fine, but these images appear stretched vertically (the horizontal width appears OK).

    The CSS for the element is:

    CSS Code:
    .keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;}
    .keybox img{float:left;width:35%;padding:0px;margin:0px;}
    .keybox div{float:right;width:60%;padding:1%;}
    .keybox div ul{text-align:left;margin:0px;padding:0px;}


    The html for the element is:

    html Code:
     
    <div class='keybox'>
    <img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> 
    <div>
    <h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares
    </a></h2>
    <p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> 
    <ul> 
    <li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> 
    <li><a href='/parts/volvo/'>Volvo Spare Parts</a></li>
    <li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li>
    <li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li>
    </ul> 
    </div>
    </div>


    The image stretches - it works fine on firefox and IE8.

    The web address is www.wellandpower.net

    There are 3 of these html elements on the left hand side of the page.

    TIA

    Regards

    Charlie
    Last edited by wellandpower; December 4th, 2010 at 11:05 AM.
    If I helped you by some stroke of luck, please add to my reputation by clicking on the icon at the top of my post!
    Perkins Diesel Generators Volvo Diesel Generators xxl.me.uk (my Site)
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    It looks like those Webkit browsers don't like the height declaration in the ".products_images" rule.

    I'm impressed that your page is a fully fluid layout, however, I'd recommend setting a min-width somewhere so that the columns of text don't get too narrow. Also text-align:justify can make text hard to read.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Loves Diesel Generators
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2004
    Location
    Lincs - UK
    Posts
    658
    Rep Power
    88
    Thank you!

    I have added the minimum width at 800px; also - good idea.

    The menus on the webkit browsers also don't drop down correctly - they go across the page.

    Any ideas why they might do that?

    Regards

    Charlie
    If I helped you by some stroke of luck, please add to my reputation by clicking on the icon at the top of my post!
    Perkins Diesel Generators Volvo Diesel Generators xxl.me.uk (my Site)
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You're welcome.

    Shrink-wrapping is an issue where browsers often handle things differently. Give "clear:left" to "#topNav ul li ul li" to correct that.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo