| SitePoint Sponsor |
Hey guys (you know who you are) - let's avoid the personal sniping that has been going on in this thread and stick to making your points in a civil manner.
This is a great thread that has good arguments on both sides so lets not get personal.
Thank You
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Uhm... the site you linked to? I thought that was part of why you were pointing out it's approach as part of it's zoom problem; since it also falls to shreds on large fonts/120dpi here -- hence my "they used EM without understanding it" comment and general ragging on the page:Originally Posted by RyanKing1809
http://www.cutcodedown.com/images/br...oud4broken.png
Hence my comments about it. LOVE the content blowing off the right side of the screen without a horizontal scrollbar... and that's just off this laptop; no I didn't zoom that's at default zoom but 120dpi/large... It's even more mangled over on the workstation.
But again, when they allow whatever pile of manure CMS is underneath it make code like this:
<body class="single single-post postid-2439 single-format-standard">
or this:
<article class="post-2439 post type-post status-publish format-standard hentry category-cloud-four-stories category-emerging-technology tag-fluid-layouts tag-media-queries tag-mobile-web-design tag-responsive-web-design" id="post-2439">
... results like that aren't all that much of a shock. Goes hand-in-hand with their nonsensical and broken use of heading tags messing up heading navigation.
<h1>Cloud Four Blog</h1>
<h5>Technical notes, War stories and anecdotes</h5>
Really? REALLY? really...
... of course it has problems!
That's a pain in the ass iOS behavior screwing with us. They insist on trying to handle content resizing even when you've made media queries to target it, and this can really mess up rotations as if you design for one rotation, the other will be screwed up.
You can get around that by disabling zooming altogether:
But does one really want to disable zooming?Code:<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale:1.0; maximum-scale=1.0;" />
They wrote the browser to first and foremost allow you to use websites NOT designed for mobile; as such trying to design for mobile on it has all this extra crap you have to do -- pain in the ass. Viewport meta, -webkit-text-size-adjust:none; -- etc, etc... and even with all that it still doesn't behave and insists on resizing things when it shouldn't... things that should probably be disabled the moment it sees a media query for 480width or narrower.
It's like it 'lying' about how many pixels wide the display is if you don't set that width=device-width thing...
Hmm I also tested it at 120 dpi & got different results:
http://img72.imageshack.us/img72/7222/120dpi.png
and at 192dpi:
http://img841.imageshack.us/img841/5539/192dpi.png
What's happening differently on your system? I'm running windows 7 & latest version of Opera. Do you think that sidebar you have going on to the right affects the media query?
Same.... I'm not even seeing the queries kick in properly here... on the laptop. It appears to render on my desktop how your screencaps do, so that's kinda strange too. Something about my laptop?
Not the first time I've gotten RADICALLY different appearances across machines on same level OS/browser -- I tend to get a LOT of broken layouts that seem to be related to methodologies like the ones they are using; See Paul O'B's version of the 100% min-height layout that uses a negative top margin on the wrapper -- which has not once rendered properly for me on any machine.... or the display:table trick for inline-blocks, which doesn't work for me in Safari. Cute tricks, but not what I'd call something to go around advocating as a way to build a site.
... also what I expect from 45k of whitespace compressed CSS going ape-**** with NINETEEN @media targets, and using @media inline in the stylesheet; so needlessly complex it's a miracle the site works at all.
For so simple a site if they need more than 32k without whitespace stripping I'd be shocked! Looks like another case of whitespace stripping to cover up bad code.... though one look at the HTML screams that anyways; NOT that all of it's their fault -- thanks turdpress!
Not quite as radical as DS's layout, but the search bar is still kind of funky.
~TehYoyo
Yeah turns out that search bar is always bung. To bad it's the only example I've found of em based media queries.
These em based media queries just make perfect sense to me. I'm going to have to try this method in the not to distant future - I don't see why it shouldn't work. And I'll probably employ this 16px baseline technique (whilst rounding the numbers and adding some flexibility) despite the fact that it doesn't lead me to understand the "point of ems" (I have my own purpose for them) - I think it's a useful tool for figuring out the relationship between the elements and I understand that 1em != 16px.
If I get this working I'll give you a shout-out if you could test them on one of your non-conformist machines.
Off Topic:
ps. I like this new calmer, happier, more thoughtful deathshadow, that isn't bashing everything he sees (... at least not as frequently) - it certainly get me less worked up & defensive.
I imagine he looks like this: http://th01.deviantart.net/fs71/PRE/...ie-d3l32z9.jpg
Off Topic:
Yes but you are the only one who has had a problem with it (although I've never seen en example where it was broken for you) and indeed examples you have shown have previously have been broken for us so it is a two way thing. There is nothing at all wrong with the sticky footer code as it is built on sound methodology (tried and tested thousands of times now) and indeed not one single person (apart from you) has had a problem with it (or the display:table fix either). You just have to accept (as I do) that there is no perfect solution for everyone and as Rayzur has pointed out many times it seems to be your exact system set ups that cause some things to behave differently.
Indeed I would like to know why the top negative margin approach doesn't work for you and see an example where it doesn't work and try to narrow down what the cause is as there surely must be one as it's nothing more than a negative top margin instead of a bottom one.
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Posting Permissions
Reply With Quote
Bookmarks