SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jun 2009
    Location
    Norfolk - UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS to iphone CSS not working

    Hi.
    I decided to have ago of adding an extra .css sheet for the iPhone to one of the pages of my site. I made the new .css sheet to show no images and have a width of 480px, plus a few other things and called it iphone.css, then saved it in the root of my site along with the other .css sheets (The print.css works fine as does the index.css).

    I placed the link in my code as below:
    --------------------------------------------------------------------------------

    <head>
    <title></title>

    <meta name="description"
    content=" ">
    <meta name="keywords"
    content="">
    <META NAME="Copyright" content=" ">
    <META HTTP-EQUIV="content-language" content="EN">
    <META NAME="Rating" content="The Moral Maze">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <link media="only screen and (max-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" media="screen" type="text/css" href="index.css" />
    <link rel="stylesheet" media="print" type="text/css" href="print.css" />

    </head>
    <body>
    -----------------------------------------------------------------------

    Even if I put (max-device-width: 480px) it still uses the index.css when accessing the page with an iPhone. (The index.css is for a computer screen showing images etc...)

    What am I doing wrong? The code I have used everyone is suggesting but it just doesn't work. I was thinking of using "@import" but I am not sure how to make that target the iPhone nor do I know where to place it into my code.

    Not having an iPhone myself I accessed my page on two different (family) iPhones yesterday which confirmed to me that the iphone.css was not being used. However I have downloaded the "iPhone Simulator" that uses the iphone.css and "iPhoney" another iPhone simulator which is behaving as the "real" iPhone is behaving and does not use the iphone.css.

    Any help would be appreciated.

    God bless.
    In Christ Jesus, Karl.

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2009
    Location
    Bavaria, Germany
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the iphone does load all css with media=screen as if it was a normal browser. so you have to think about the order in which you load your css files - in your code you first introduce the iphone.css and then add the index.css - try it the other way around, as css rules overwrite rules which are defined before.

  3. #3
    SitePoint Addict
    Join Date
    Jun 2009
    Location
    Norfolk - UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by LarsK View Post
    the iphone does load all css with media=screen as if it was a normal browser. so you have to think about the order in which you load your css files - in your code you first introduce the iphone.css and then add the index.css - try it the other way around, as css rules overwrite rules which are defined before.
    Thanks LarsK
    It worked, just moving the iphone.css link to last place did the trick, thanks.

    God bless.
    In Christ Jesus, Karl.


Bookmarks

Posting Permissions

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