Is it just me or are they really not working? testing it in dreamweaver cs5 makes it look like it works. but going there on my iphone does nothing but load the default style…
Is there something with iphones that make this not work anymore? The adobe videos on Adobe TV make this seem like it works no problem…
Hi,
You are restricting to screen (though it’s not even showing in my browser).
only screen and (min-width: 0px) and (max-width: 320px)
only screen means, not projection (opera), not handheld (mobiles), not print, not nothing but screen.
testing it in dreamweaver cs5 makes it look like it works.
Dreamweaver’s not a browser. Never test “browsers” with your text editor (which is all DW is… a glorified and rather overpriced text editor). Always test in a browser (like you did your iPhone).
Is there something with iphones that make this not work anymore?
No, though they do change stuff (they’ve been playing with the device-width meta tag for example, and no, it doesn’t correctly use the width you’d expect).
Here are media queries I use. Do they work on your iPhone and desktop browsers when shrunk (see link below code)??
Code:
<meta name="viewport" content="width=device-width">
Set device-width… not totally exact cross-machine but it’s good to tell the device to use its idea of “width” to match what it thinks it has… just that, some devices don’t use “CSS pixels” for this measurement.
<link rel="stylesheet" type="text/css" media="screen, projection, handheld" href="mobile.css">
I start out giving all media (except print) a basis stylesheet. If you’re giving everyone a “desktop” version first then that would be here instead of my mobile.css.
<link rel="stylesheet" type="text/css" media="screen and (min-width: 600px), projection and (min-width: 600px)" href="desktop.css">
screen with min-width, projection (for Opera really) min-width, get this stylesheet. No handheld listed, though many of the newer smart phones (and iPhone may be one of them) ignore “handheld” anyway and try to render screen. Fine, but they must be at least 600 “CSS pixels” wide then. So my colleague’s HTC (running Android and a version of mobile Safari) will do the “mobile” styles when upright/portrait and will do the “desktop” styles when in landscape (since then it believes it’s wider than 600px).
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="screen" href="desktop.css">
<![endif]-->
IE doesn’t do stylesheets… not until IE9. So I give ALL IE’s the desktop styles… which may suck for those using Windows Mobile (which uses IE6 as the browser), but, tough. It’s not like they can’t download a real browser like Opera.
Anyway I see you’ve done this too, but because of IE9 I’d put it after the regular stylesheets… conditional comments are a known “page blocker”… the page loading is known to halt when the browser sees those CC’s, so since I’m not using the trick of CC’s before the <html> tag, I just keep them after regular styles.
<link rel="stylesheet" type="text/css" media="print" href="print.css">
Print all alone, does not inherit any screen, projection, handheld styles.
So does this page lose the logo image and show a “naar de content” link in the middle of the menu on your iPhone? Make sure you’re holding it in portrait, because I did not set orientation with my media queries. Also, I’ve never actually checked that page with iPhone, only Opera on Android, Symbian (webkit) browser on Nokia and IE6 on Windows Mobile. The “mobile” style definitely works for the first two and we already know they won’t work for IE6.
“only”…
Yes, I remember there being something about using “only” to get around something with IE, but “only” means “only” so I don’t use it (similarly, I never use “all” since I don’t need “print” to be 10 times larger undoing “screen” styles, who are loaded first).
Random non-media-query-related notes:
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
No need to state the charset in the script tag… your server’s already sending the whole page as utf-8 anyway.
<li id="generalbusiness"><a href="">GENERAL BUSINESS</a>
<ul>
<li class="nocurve">....
Since you’ve got an id on that parent li, you don’t need endless repeated classes for each sub li… CSS (and Javascript) can walk from #generalbusiness to ul to li and set styles there.
Dropdowns on a multi-line menu are not the best usability.
The nested tables for a single image is a big red flag.
SP touched it lightly – the page has issues top to bottom… broken record mode on…
Can we assume this is a NEW site? If so what’s with the tranny doctype? Transitional is for supporting old/outdated/half-assed coding techniques, NOT for building new websites.
… which is why you have a BUNCH of attributes and tags that have no business being in modern markup like ALIGN and BORDER.
From there you have multiple unneccessary DIV (.header, .menu, .footer_left, .siteSearch, div inside .sitesearch that should be a FIELDSET, etc, etc…), multiple pointless classes (if every element inside a parent is getting the same class, class the parent instead! see all that .nocurve nonsense! Perfectly good ID on the parent!), DIV doing a heading tags job, lack of proper heading tags, tables for layout, SINGLE TD TABLES (Serious whiskey tango foxtrot territory), imgmaps, lack of alt text on multiple elements… and that’s before we talk the javascript for nothing… that appears to be calling some iframe nonsense; something that shouldn’t even appear in the code for a website after 1998.
Much less there isn’t a single thing being done on the page to warrant the use of an IE conditional for CSS – but I say that about EVERY website since there’s no legitimate reason to EVER use a IE conditional comment for loading CSS… Which IF you were to need should be loaded last to override the other sheets, shouldn’t it?
I also wouldn’t put the CSS in a subdirectory unless the images called by the CSS are in a subdirectory under that (css/images) – but that’s me. Uptree linking == /fail/.
… and that’s before we talk the accessibility /FAIL/ of all the fixed metric (aka px) fonts and the total lack of graceful degradation when images are disabled.
As to the media queries they APPEAR to be working here in Opera and chrome desktop-wise, so not sure why they’d be ignored on the iPhone. I would suspect a specificity issue perhaps – it getting confused or something… Why I’d probably make a screen.css that’s sent to everything, then override it in the width specific versions.
You might also try pulling the min-width:0px declaration. Might sound odd, but given the max-width:320px there’s no reason to actually say the other one.
SP touched it lightly
Very very lightly. Just grabbed three big things that caught my attention.
As to the media queries they APPEAR to be working here in Opera and chrome desktop-wise, so not sure why they’d be ignored on the iPhone.
I don’t notice anything here on FF/Desktop/no-JS and screen width shrunken (usually triggers them for me). What are you seeing?
but I say that about EVERY website since there’s no legitimate reason to EVER use a IE conditional comment for loading CSS…
I’d say media-query loading is a legitimate reason, if I’m building “mobile-first” (basic first) but you want IE to match the “wide-enough” queries. Since most people do it the other way around, though, then no, CC’s would not even make sense (unless you were targeting Windows Mobile IE6 or something).
That’s why I suggest building for screen first, then using the media queries to “edit it down” instead of building each individually…
Hell, each one would probably only have a handful of width changing properties – I’d consider putting the queries into the single screen/tv/projection sheet using the @media bit, the same way I use changing a class on my outermost wrapper and/or body for doing mcSwitchy.
Since really that’s all a media query for width should be doing – it’s a mcSwitchy trigger… Which is where I’d use IE conditionals or a behavior file – around a mcSwitchy script to change an outer class based on the width for devices where media queries don’t run.
That’s why I suggest building for screen first, then using the media queries to “edit it down” instead of building each individually…
I go other way around. Admittedly I was convinced by Bryan Rieger’s slides.
Too many mobiles are balls with media queries, so if I build a basic setup in a regular basic (mobile) stylesheet for everyone, then layer on desktop stuff for only those screens wide enough to do anything useful anyway… plus, if the UA doesn’t download the desktop stylesheet (which it won’t if 1: it’s not wide enough or 2: doesn’t understand media queries anyway) then it’s not calling those background images I’ve added. Savings for the small and retarded/old.
If I want something special for TV, then by adding TV on top of basicstyles.css, TV isn’t loading a bunch of desktop/projection/whatever styles, background images, etc.
(etc == the tempting idea of using isMedia() Javascript function to detect if a stylesheet was loaded… to determine if scripts should bother running here or not. Nice idea, but haven’t tried it yet)
In other words, I’d rather “add-on” with stylesheets than “edit out” with them, because why have everyone loading a ton of garbage just to hide it (cause, they WILL download it all). Esp if I don’t screw it up too badly, I’m not adding anything of substance, only style, so fine if someone doesn’t load “desktop” who can.
IE is the big problem with this setup though: more likely that IE’s viewing the site are desktops, so I just give them desktop CSS and don’t worry about mobile IE.
While I get pissed off by the eighth slide going “where the devil is the content?” (actually, I use a bit stronger language than that)
EVERY browser is balls with media queries – Opera and FF both downloading EVERY CSS file whether you’re using them or not. (I’ve not checked to see if webkit is similarly afflicted).
For me it’s more a matter of not stating EVERYTHING twice – if you were to separate out the things that are actually different, then fine. I just hate to see it when it’s four stylesheets setting the same values over and over again…
Which I’ve seen WAY too many people do.
Well, that and the extra handshakes can have a higher loading time penalty than just adding the 1k (or less) that should be different between them. (depending on what you’re doing for layout).
I mean for me on making a mobile, it’s usually just change the main menu to a block-level list or double-stack (ooh, change some widths) and strip columns off of things, since I generally design everything fluid anyways.
#mainMenu a {
width:50%;
padding:8px 0;
background-image:none;
}
#content {
margin:0 0 1em;
}
#firstSideBar,
#secondSideBar {
margin:0 0 1em;
float:none;
}
Done… (generic example, but for the most part…)
Well the ones that have li classes under another li are like that because i couldn’t figure out how to - Have the main li have a rounded corner and then the li’s underneath it be normal. they would take on the parent so i made specific classes for them so they would be normal squares.
This is a work in progress.
I know that drop down menus stacked on each other are horrible, and look horrible. But its what they wanted. They didn’t want to budge.
This is my first project that I am trying to use mainly CSS, and I admit I am no wizard.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is the doctype. What do you recommend? It was the default that dreamweaver gave me.
Also the iframe is for the lightbox i am using. It loads an external page. Is there a better way to go about this?
Use this:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This will force you into writing better markup (at least, if you care about validation).
Stomme poes - I tried what you said and the iPhone still didn’t work. I tried last night to make a new website. brand new exactly how dreamweaver sets it up using three different style sheets for the differemt sizes and made a small color change on each and uploaded it and it still only showed the desktop version.
It was the default that dreamweaver gave me.
Anything DW tells you is probably a lie.
Ok here’s the thing: you sound like you’re doing a project, possibly for money/work. Fine, finish it any way you can.
But then use every ounce of free time you’ve got using a real text editor (one who doesn’t suggest things for you… hell it should be syntax highlighting and nothing more for now!) and start at the beginning and learn how to code. Doesn’t mean you won’t have questions, but getting up to speed in modern coding techniques will at least allow you to use some of the better tutorials/articles out there.
Now this may take years, but, fine. You get so much benefit learning good coding. DreamWeaver is going to teach you bad coding. If you want to use it as an editor-who-does-lots-of-other-neat-things, that’s fine for later (after you know what to turn off!), but it’s definitely not a tool to learn how to code on.
-Use a strict doctype as D3V4 gave you
-stay as far away from Design View as possible… yes, even though they’ve updated it to use Presto, teh same engine Opera uses… it’s still not a browser. It doesn’t matter how good or bad your site looks in it. What matters is the browser.
-use the W3C HTML validator to catch everything from serious bugs to silly typos. It’s a tool to catch syntax errors, not to tell you if your code is actually good, but it’s a necessary tool in your toolbox.
-get a decent book that starts you out using good HTML, even if you’ve been doing HTML for a while: your CSS will never be worthwhile so long as the markup is pants.
you now have
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 450px), projection and (max-width: 450px), media and (max-width: 450px)">
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)">
<link href="css/style.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)">
Which media is media?
My browser is still not doing anything for max-width:450px. It should. Instead, it’s ALWAYS showing code from tablet.css. Tablet.css claims to be for 321px to 768px, yet there’s elements in there that are 990px wide.
Wider elements will stretch their widthless containers wider.
Start with a single stylesheet that doesn’t set widths on stuff and is the most basic form of the page. Don’t use a media query yet. Test in a browser with a tiny width (make your browser under the 300px).
Then add a stylesheet that has widthed elements in it and a media query. Test in your browser. Make it something obvious so you can see when the stylesheet loads (some people do an obvious body background-colour change).
Then you’ll start getting somewhere.
ok I got rid of all the media queries and the iframe thing and changed the doc type and went through it and made changes to all the errors so now it is error free and tried slimming down the CSS and what’s left is basically how I want the layout. EXCEPT. I want it centered… and the general business tab needs to come down to the next line. Other than that I just need everything centered which is a problem I cant seem to fix. How do you center using CSS if you don’t declare px and auto align the margins?
It’s called “child selectors” – instead of putting a class on each and every single one, just say
#generalbusiness li {
Which will get every LI that’s inside #generalbusiness. That’s one of the real ‘powers’ of CSS, the ability to target all child elements off the parent… It’s also why it’s pretty easy to leverage semantic markup and the multiple tags WITHOUT classes inside a grouping tag like a DIV, lists, tables or forms.
I’m still trying to figure out what it is you are even trying to do for appearance on that menu – it’s so horribly broken here I can’t figure out why you are styling it the way you are. Either way I’d be cutting those links down to one or two works instead of entire sentences.
Though again, I’d swing an axe at around 80% of the links you have in that menu and use something like drilldown by page instead – ESPECIALLY if you are targeting mobile.
thanks i’ll look into the child sectors. im just trying to make the menu centered now. Not sure why they want to keep the links like that but it drives me nuts.
Do you have a pic of what it’s supposed to look like? I’m seeing four different appearances in four different browsers here, and NONE of them look like anything I’d even be trying to do in a layout.
Are those all supposed to fit on two lines? I’m seeing four lines here and the second line is being overlapped by the third (opera).
Yes this is what I see
I know earlier when I had it centered but the code was even worse than it is now it was messed up on macs in any browser. The last box would go down to the next line which created 4 lines.
How do you center using CSS if you don’t declare px and auto align the margins?
If you’re building for mobile, you won’t be doing much centering… why waste side space when screen real estate is at a premium?
When you get up to something wider… say a tablet or a small desktop/laptop/notebook with 600-ish px width… you can start with stuff like width: 90% and automargins.
On my “mobile/tinyscreen” stylesheets I’ll just add like 5px padding to the body to keep text in containers from actually touching the sides, but that’s it.
Crusty: yeah I’m seeing the multi-line dropdown menu in my browsers as well.
zeeb4: you really, really, really don’t want ginormous dropdown menus, especially overlapping ones, on screens the size of a mouse turd. How are people supposed to use that?
Dropdowns have some usability problems even for larger screens, but at the very least, leave the dropdown CSS out for smaller screens. They’re not fun to use, esp with touch devices.