SitePoint Sponsor

User Tag List

Page 2 of 5 FirstFirst 12345 LastLast
Results 26 to 50 of 101
  1. #26
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As a noob this is really helpful. It brings some sense to the madness i was doing before.

  2. #27
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    The South
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great post! You have answered many many questions I have been wondering about. Genius!

  3. #28
    SitePoint Member
    Join Date
    May 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for this great knowledge sharing with all of us.
    Free Designers Resourceshttp://www.Smashingapps.com
    Design Expanse - Web design resource http://www.designexpanse.com
    Total Fun World http://www.totalfunworld.com
    Every Minute World News http://www.everyminutenews.com

  4. #29
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Location
    UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I try to use liquid layouts as much as possible. the min-width feature in CSS is definitely worth learning and is a great tool in your armoury.
    I have a blog on politics.
    email: oliver@olivercross.com

  5. #30
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice one, thanx for shairing with us
    ------------------------------------
    See the Unseen
    www.eyecatchypics.com

  6. #31
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Location
    Europe
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What's the general consensus now when more and more users are turning to 16:9 (so called wide) resolution?

  7. #32
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AudiS2 View Post
    What's the general consensus now when more and more users are turning to 16:9 (so called wide) resolution?
    General consensus about what?
    Simon Pieters

  8. #33
    SitePoint Zealot webfinity's Avatar
    Join Date
    Oct 2006
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's good to design withing the 800x600 box, and to put the less pertinent information outside of that box. Great post...

  9. #34
    SitePoint Member
    Join Date
    Dec 2007
    Location
    Seattle, WA
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very well written.

  10. #35
    SitePoint Enthusiast ScottyDM's Avatar
    Join Date
    Dec 2007
    Location
    Colorado Springs, Colorado, USA
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here are some statistics from a few low-volume websites I manage. Out of 1801 samples (about November and December):
    • 800 x 600 -- 6%
    • 1024 x 768 -- 39%
    • 1152 x 864 -- 6%
    • 1280 x 1024 -- 36%
    • 1600 x 1200 -- 1%
    • other/unknown -- 9%
    • JS turned off -- 3%

    I'm using Statcounter and they seem to have only the bins shown. They don't report any of the new widescreen monitor sizes, which means they don't report any of the Macintosh screen sizes either. I think they've also stopped counting smaller sizes such as 640 x 480 (which explains why I've not seen that at all in the last couple of years).

    Scotty

  11. #36
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are those browser window sizes or monitor sizes?
    Birnam wood is come to Dunsinane

  12. #37
    SitePoint Member JochenVandeVelde's Avatar
    Join Date
    Oct 2006
    Location
    Belgium
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great informative post, it's been really interesting to me. I myself don't design for 800x600 resolutions anymore, but try to keep the layout as narrow as possible to make it atleast display properly with a 1024x768 resolution, sometimes even a lower resolution.

  13. #38
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a great thread. But it needs an update regarding IE7. Does IE7 respect max width? And how about Sven's expression hack? How does IE7 handle that? Any bugs to worry about?

  14. #39
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE7 existed when the FAQ was written, and it even calls it out explicitly. Yes, IE7 respects max-with, assuming you're not in quirks mode. You don't need the expression hack for IE7. There are certainly bugs but I wouldn't worry about them until they bite me.
    Simon Pieters

  15. #40
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Simon.

    Quote Originally Posted by zcorpan View Post
    IE7 existed when the FAQ was written, and it even calls it out explicitly.
    Oops, missed that.
    You don't need the expression hack for IE7.
    OK, I'll infer from this that the expression hack does not break IE7 either?

  16. #41
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What he's saying is that the expression shouldn't need to be served to IE 7. Just enclose it in a conditional comment that targets IE 5/6 or use the * html hack to hide it from IE 7 and other modern browsers (though if you care about validation, you may want to put the hack and the expression inside a separate stylesheet and @import that into the main one).

  17. #42
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    What he's saying is that the expression shouldn't need to be served to IE 7. Just enclose it in a conditional comment that targets IE 5/6 or use the * html hack to hide it from IE 7 and other modern browsers (though if you care about validation, you may want to put the hack and the expression inside a separate stylesheet and @import that into the main one).
    Thank you Dan.

    Wow...so complicated.

    I thought the * hack caused ie7 to render same way as ie6...or was that the holly hack?

    You know, I found learning Unix easier than learning css...

  18. #43
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, that would be Quirks Mode. The * html hack only affects IE 5 and 6. 99.9975% of the time if you're building your site properly you won't need any hacks or "conditional comments" for IE 7.

  19. #44
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dwh View Post
    OK, I'll infer from this that the expression hack does not break IE7 either?
    If nothing else you get worse performance (since native implementation is usually several orders of magnitude faster than JS implementation).
    Simon Pieters

  20. #45
    SitePoint Enthusiast ScottyDM's Avatar
    Join Date
    Dec 2007
    Location
    Colorado Springs, Colorado, USA
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dwh View Post
    You know, I found learning Unix easier than learning css...
    CSS drives me crazy! It isn't design, it's hacking. Screwing around with the statements and checking them against a bunch of browsers. Rinse and repeat... and repeat...


    Screen Resolution

    I've mostly done fixed width page designs and I currently design for a minimum screen size of 800. I usually put a div directly inside the body and then center the div. With a wide screen/browser window it looks pretty good and not squished to the left. I also use the Verdana font at a fairly large font size, either 15 or more rarely 14 pixels.

    This leaves a very nice line length in terms of the number of words on the line, which compares favorably with line length in other media such as novels (which are optimized for readability). One thing I don't care for on some websites is the unrestrained line length, which is hard to read. It forces me to resize my browser window. Too short a line also forces me to do more scrolling.


    This article has got me thinking.

    There are two problems with my approach: people with tiny screens, and people who are even less ably sighted than some of my friends.

    I've seen and admire that trick where the site designer puts a control on the site to allow the visitor to select their font size. I imagine that control could be used to select a first CSS file that sets basic dimensions, then follow that with a generic second CSS file that sets everything else and uses relative measures (like the em).

    So how do I combine a flexible layout with a flexible font size?

    I think for each base font size (each first CSS file) I could set the max-width of that outermost div and size-sensitive sub-elements. For example, when the user selects a 14 or 15 pixel font size (default) I would set max-width to what I use now, with line-length optimized for text readability. As the user selects different base font sizes I would resize max-width to keep line-length optimized. And I could set a min-width for each size too.

    The original article of this thread mentioned that handhelds typically don't have Java Script and to use the CSS media query. Good idea, except how to test if I don't have a handheld? Anyway, using the media query I could default to a smaller font size.

    I knew this girl (since passed away) who was legally blind (her sight was bad enough to keep her from getting a driver's license, etc.) She was an artist, inventor, and author, so she needed her computer. She had two monitors: a 17-inch set to 640 x 480 where she kept her floating menus and other controls, and a 21-inch set to 800 x 600 that was her main screen she used for doing her work. She told me that sometimes to see detail, she put her nose against the glass.

    So yea, screen widths like 640 and 800 exist, even today when large monitors are cheap.

    To answer the question: my earlier reported numbers are for monitor sizes. Personally, my monitor is 1280 wide, but I typically run my browser window at 900 to 1000. If I run into a website designed for wider, I only bother to resize if there is something I need over on the right. Often it's advertising or gizmos that aren't required. Now if the ads are Flash and get annoying, I resize my window smaller. (thinking of Atom Films)

    Scotty
    "I'm obnoxious and disliked, you know that, sir."
    John Adams, 1776 the Musical

  21. #46
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    No, that would be Quirks Mode. The * html hack only affects IE 5 and 6. 99.9975% of the time if you're building your site properly you won't need any hacks or "conditional comments" for IE 7.
    I think I know how to make this work, just want to check with you if I'm right:

    Code:
     width:expression(document.body.clientWidth > 1100? "1100px": "auto" );
    just needs the words * html ahead of it...like so

    Code:
    * html width:expression(document.body.clientWidth > 1100? "1100px": "auto" );
    It's not more complicated than that...right?

  22. #47
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    More like this, actually.

    Code:
    /* I should probably @import this, just so the primary stylesheet can still validate */
    * html #container {
    	width: 750px; /* if scripting is off, disabled or blocked by a firewall, fix the width to 800 friendly */
    	width: expression(
    		(document.body.clientWidth>992) ? "974px" 
    			: ((document.body.clientWidth>766) ? "auto" : "730px")
    	);
    	height: 1%; /* haslayout */
    }

  23. #48
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much!

    The current stylesheet is actually @imported already, so I don't need to separate out that rule & import it again, do I?

    Edit:
    Since I didn't totally understand everything in your code, I tried to do another search for * html hack and this time found the right page:
    http://css-discuss.incutio.com/?page=StarHtmlHack
    but was surprised to find at the bottom that ieblog considers this hack deprecated:
    http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx
    and was wondering your thoughts on that? IE team wants us to use conditionals...

  24. #49
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it's just one or two styles that you need to change, you won't need the conditional comments for IE 5/6. If you have a whole lot of styles that need to be changed for IE 5/6, chances are you're doing something wrong.

    But basically here's what the expression I gave you does.

    1.) Set a default width (for if scripting is off or gets blocked).
    2.) Declare the expression which will replace that width (if scripting is enabled and actually works).
    3.) If the width of the browser window is greater than 992px then set the DIV with the ID of container to a width of 974px.
    4.) If it's not greater than 992px then check to see if it's greater than 766px. If it is, let the #container DIV expand to fill up the screen.
    5.) Should it be less than 766px then set the width to 730px.

  25. #50
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool. That's the only style needed for ie to apply a max width. You're a lifesaver!


Tags for this Thread

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
  •