iPhone CSS won't load correctly

Discussion in 'Web Design and Development' started by JPT, Mar 27, 2010.

  1. JPT macrumors regular

    Joined:
    May 4, 2006
    #1
    I'm creating a webpage in XHTML Strict and it passes the html validator test with flying colors. Renders perfectly in all the browsers I have on my MBP (Chrome, Safari, and Firefox).

    Anyway, I tried it on my iPhone 3GS and it loads most of the css except for some font related things. The weird thing is when I change the orientation it magically loads all the font related CSS and displays the page perfectly.

    Any idea what would cause this? :confused:

    Also, sometimes it will load correctly when I refresh a few times. And it will work for quite a few refreshes after restarting my iPhone.

    CSS:
    PHP:
    .list { width:22%; float:leftheight:175pxbackground-color#00FF00; margin:6px; padding:5px; text-align: center; border: 5px solid #0AD10A; }
        
    .list .title font-size11pxtext-transformuppercase;
        
    letter-spacing2pxfont-weightbold; }
        
        .list .
    book {color#444; margin: 0; padding: 0px 0px 0 0px;
        
    font-size35pxletter-spacing: -2pxfont-weightboldtext-aligncenter; }
        
        .list .
    chapter color#444; margin: 0; padding: 0px 0px 10px 0px;
        
    font-size25pxletter-spacing: -2pxfont-weightboldtext-aligncenter; }
        
        .list .
    done text-aligncenter; }
        
        .list .
    done a font-familytimesTimes New Romantimes-romangeorgiaserifcolor#0AFF0A; margin: 0; padding: 0px 0px 6px 0px;
        
    font-size40pxletter-spacing: -2pxfont-weightboldtext-decorationnonebackground-color#6C9E06; border: 5px solid #078507;
        
    padding-right15pxpadding-left15pxpadding-bottom1pxpadding-top1px; }
        
        .list .
    done a:hover background-color#07B307; }
        
        
    .list .extra font-familyGill SansVerdanafont-size10pxtext-transformuppercase;
        
    letter-spacing1pxfont-weightboldmargin-top15px;}
    HTML:
    PHP:
    <div class="list">
        <
    div class="title">
            
    Title
        
    </div>
        <
    div class="book">
            
    Book
        
    </div>
        <
    div class="chapter">
            
    Chapter
        
    </div>
        <
    div class="done">
            <
    a href="#">Done</a>
        </
    div>
        <
    div class="extra">
            
    Finished0.07 times
        
    </div>
    </
    div>
    Correct:
    IMG_0162.PNG

    Incorrect:
    IMG_0163.PNG
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    I haven't really done much testing with the iPhone, but recently came across a CSS property that may be of help for the iPhone, -webkit-text-size-adjust. This article from ALA explains it a little and may have some other ideas for you.
     

Share This Page