SitePoint Sponsor

User Tag List

Page 3 of 3 FirstFirst 123
Results 51 to 58 of 58
  1. #51
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,871
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    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

  2. #52
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanKing1809 View Post
    Can you show me a layout the breaks with the 16px assumption?
    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:

    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!

  3. #53
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanKing1809 View Post
    It doesn't media query on rotating the the device but you can naturally pinch zoom out with ios devices.
    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:
    Code:
    <meta
    	name="viewport"
    	content="width=device-width; initial-scale=1.0; minimum-scale:1.0; maximum-scale=1.0;"
    />
    But does one really want to disable zooming?

    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...

  4. #54
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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:

    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.
    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?

  5. #55
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanKing1809 View Post
    What's happening differently on your system? I'm running windows 7 & latest version of Opera.
    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!

  6. #56
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by RyanKing1809 View Post
    Hmm I also tested it at 120 dpi & got different results:
    http://img72.imageshack.us/img72/7222/120dpi.png
    Not quite as radical as DS's layout, but the search bar is still kind of funky.

    ~TehYoyo

  7. #57
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    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.




    Quote Originally Posted by DeathShadow60
    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
    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

  8. #58
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,871
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Off Topic:


    Quote Originally Posted by deathshadow60 View Post
    S 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.
    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.


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
  •