Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

iPhone + IE CSS Issue - Help

T

tri3limited

macrumors 6502
Original poster
Jun 5, 2008
380
0
London
Hi,

This is a different site to the other one i've posted about all week just to avoid any initial confusion.

I currently have a tester version of the site available to view on my domain at http://isuwa.jackjones.me.uk/

THE PROBLEM:
I have the following code to determine which style sheet is used to display content on each device as i'm arranging and showing different content.

Code: 
    <link media="screen  and (min-device-width: 481px)" rel="stylesheet" type="text/css" href="css/fullbrowser.css" />
    <!--[if !IE]>-->
	<link media="only screen and (max-device-width: 480px)" href="css/iphone.css" type="text/css" rel="stylesheet" />
      <!--<![endif]-->
    <link media="handheld" href="css/handheld.css" type="text/css" rel="stylesheet" />

Looks fine to me and works like a dream on everything except for good old Internet Explorer!!!! Grrrrr!!!

From what i understand IE is ignoring all 3 stylesheets (technically i havent done handheld yet) where as it should be reading from the fullbrowser.css file only. I can tell this as it's rendering both the iPhone content and the standard content which means it's ignoring the div ids.

Please help me out!

Jak
 
T

tri3limited

macrumors 6502
Original poster
Jun 5, 2008
380
0
London
Apologies for the kind-of-sort-of-mini-bump but i'm still seriously stuck. I've spent a good 4 hours or so troubleshooting this one tiny error that only affects IE!

There must be someone who's able to help out here.
My CSS is valid and whilst the HTML can't be completely valid due to a back end client-side editor i've implimented i'm sure it's perfectly valid enough to work in IE.

The only line i can think that affects it is the code above but from what i've found on Google it's fine????

I'm completely lost??

The link again - http://isuwa.jackjones.me.uk/

Thanks,
Jak
 
rogersmj

rogersmj

macrumors 68020
Sep 10, 2006
2,161
1
Indianapolis, IN
I'm really confused. You think that IE should be *only* reading the fullbrowser.css file? I just went on your web site and this is what I see in the source:

HTML: 
<link media="only screen and (max-device-width: 480px)" href="css/iphone.css" type="text/css" rel="stylesheet" />
    <!--[if !IE]>-->
    <link media="screen and (min-device-width: 481px)" href="css/fullbrowser.css"type="text/css" rel="stylesheet" />

    <!--<![endif]-->   
    <link media="handheld" href="css/handheld.css" type="text/css" rel="stylesheet" />

According to that, the fullbrowser.css stylesheet is the only one IE won't be loading. You have it inside a conditional comment that states "if not IE". BTW, your syntax is a little messed up on that stuff anyway.

Conditional comments are only understood by IE, and are commonly used to load additional stylesheets for IE alone with special "fixes" in them to adjust IE's goofy rendering. For example,

HTML: 
<link type="text/css" href="main.css" />
<link type="text/css" href="front_page.css" />
<!--[if IE]>
<link type="text/css" href="ie_fixes.css" />
<![endif]-->
<!--[if IE 6]>
<link type="text/css" href="ie6_fixes.css" />
<![endif]-->

In that case, all version of IE would load main, front_page, and ie_fixes.css, IE 6.x would load those plus ie6_fixes.css, and all other browsers would ignore those last two because they're technically in comment blocks. I haven't done iPhone specific web page work so I don't know about that part specifically, but I do know your conditional comments aren't quite right. You can read more about conditional comments here. Hope that helps.
 
T

tri3limited

macrumors 6502
Original poster
Jun 5, 2008
380
0
London
Thanks a lot for your response. I'm still having no luck.

Basically what i'm after is if someone is on a handheld device the html looks at the file handheld.css
If they're on the iPhone the html refers to iPhone.css
and if they are on a full browser (particularly IE, Firefox or Safari) then it looks at the file fullbrowser.css

I'm not after any crossings over of any sorts. I was considering trying the @media query or @import however i'm not 100% how these function or are implemented.

This is the link where i got the targeted CSS from
http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

Hopefully that can help me out once im put on the straight and narrow.

Jak

EDIT: The reason the IE bit is on the wrong line is cause i was fiddling about. It's back over the iPhone css sheet again
 
T

tri3limited

macrumors 6502
Original poster
Jun 5, 2008
380
0
London
Solution

As a follow up to the thread here is the solution for anyone else who may get stuck in a similar situation and spend 4 hours working to fix it!

Code: 
    <link media="screen and (min-device-width: 481px)" href="css/fullbrowser.css" type="text/css" rel="stylesheet" />
	<!--[if IE]>
    <link media="screen" href="css/fullbrowser.css" type="text/css" rel="stylesheet" />
	<![endif]-->
    <!--[if !IE]>-->
	<link media="only screen and (max-device-width: 480px)" href="css/iphone.css" type="text/css" rel="stylesheet" />
    <!--<![endif]-->

Firstly it specifies that any devices with a screen that are 481px or greater read fullbrowser.css - IE is unable to understand this CSS3 media query so ignores it.

The second command says that if it's IE then it must read from fullbrowser.css - IE understands this because the CSS query has had the CSS3 removed but ignores the Third statement meaning that it only reads from this line.

Finally the iPhone statement that says any screen device that is 480px or smaller reads from iphone.css



A bit of an odd occurrence. This was used to show a mov video if viewed on an iphone and a flash video if used on any other browser.

Thanks a lot to the last comment that wasn't me which was where i got the information to trigger the IE only stylesheet.

All that's left to do now is implement formmail, our backend client editor and pop in our proper flash videos... Phew!
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom