Wonky

I got an email last night that described the current state of styles on WWDN perfectly: it said that the styles were “wonky”.
My feelings exactly. I hope to have some time to work on it today.
If you happen to know of a really useful book about CSS, please let me know in the comments. I’m looking for something really useful, like an O’reilly or Peachpit Press-style book. Something that will teach me the underlying theory behind CSS, and how to set up div.classes (or however you say it) and the like. Moveable Type makes extensive use of the [div] tag, and I think I’m going to re-write the site to follow that guide…Imagine a world where the navigation menu looks cool! Someday, you may even be able to skin this site, like you can at domesticat’s.
I must confess, I never really fully understood how CSS worked…I was just able to make it go. Sort of like having a cool old car, and knowing how to do limited things like change the oil and stuff…now I have to rebuild the engine, and I don’t know how.
I think this is as close as I get to asking for help…unless you’re roughy or loren. Then you really get to hear me whine.
Thanks for the help 🙂

Discover more from WIL WHEATON dot NET

Subscribe to get the latest posts sent to your email.

171 thoughts on “Wonky”

  2. I love this site. I just wanted to say that. I get on every morning when I get to work, just to see what everyone is up to. Good job Wil and many thanks for your extensive insight on the world.

  4. tthose that dont beleive in evolutoin havent been watchimg this sight. itS AWESOME!!!11 wonky or otherwiz
    div tags must be evil becuase Mircosoft uses them in EVERYTHING!!1 RESIST THE EVIL!!

  5. Wil,
    Check out Dynamic HTML, an O’Reilly book. It’s pretty thorough and should help you with CSS and the tag, one of my personal favorites.
    BTW, thanks for the regular updates; I read them at work during an otherwise uneventful lunch.
    I’ve never posted here so I thought I would let you know that I, for one, am happy to discover that you are not like Wesley.

  6. Way to ask for help, big guy! Wish I had had the balls to do so when penning my literary masterpieces, the Tek series (sorry, needed the plug — sales have been way off lately).
    Oops, time for more Starbuck’s!
    The Shat

  7. Since you mentioned O’Reilly, take a look at their Cascading Style Sheets, The Definitive Guide. I’ve got a copy sitting on my desk, and it’s a great reference (you’d have to come up to San Jose to look at my copy, so I’d recommend you buy your own :).
    It does a good job of not only taking you through the elements of CSS, but showing exactly how they apply to the elements on the presented web page.
    One word of caution — each browser has its own unique way of paying attention to CSS. I’ve been pulling my hair out trying to create a calendar using only CSS and not tables. So far, I’ve found out that IE likes doing things that the spec says they shouldn’t (such as following width/height on inline elements); Netscape 4.x ignores font color and other attributes inside of a table; Opera is just bizarre (or wonky if you prefer :); and Mozilla actually seems to follow the CSS spec.

  8. i wish sometimes i were nerdier, but alas, i don’t have the patience to be nerdy. every time a computer related term comes up, i insert “blah blah.” it all means the same to me. example: ” Something that will teach me the underlying *blah blah* behind *blah blah*, and how to set up *blah blah*.”

  10. CSS is one of those things that is insanely powerful but a right bugger to get your head round… my fairly limited knowledge was gleaned from looking at tutorial sites linked from the W3 Consortium’s CSS pages. (http://www.w3c.org/Style/CSS/)
    And if you’ve got Mozilla (or probably Netscape 6) handy then they use a fantastic CSS translucent floating menubar that I must rip of… I mean, use for research purposes.
    “Remember why the good Lord made your eyes,
    And Plagiarise, Plagiarise, Plagiarise!
    Only be sure, please, to always call it ‘research'”

  13. I’ll second the recommendation for the Eric Meyer book. While you’re at it, here are a few good CSS pointers:
    http://www.nypl.org/styleguide/ – NYPL Online Style Guide: great intro to xhtml and ccss
    http://www.brainjar.com/css/using/ – BrainJar’s guide to Using Style Sheets. Be sure to check out the CSS Positioning guide as well.
    http://www.thenoodleincident.com/tutorials/box_lesson/index.html – Owen’s Box Lessons are good for getting your mind around the css box model.
    http://www.westciv.com.au/style_master/house/ – House of Style has a very complete tutorial available as well.
    http://www.meyerweb.com/eric/css/ – Eric Meyer has a lot of tips, guides and such, too.

  14. Another thumbs up for Cascading Style Sheets: The Definitive Guide by Eric Meyer. It’s a great book, easy to understand if you’re familiar with HTML. After reading this book I was able to get a job based mainly on how well I knew CSS. How’s that for an endorsement? 🙂
    Since you mentioned using different skins for your site, here is a great page on how to do it: http://www.alistapart.com/stories/alternate/index.html The only problem I really had was ensuring that the various layouts I made were all cross-platform compatible. Eventually I just went back to one layout, since I’m lazy and stuff. Heh.

  16. My problem with large, 1-topic books (such as a book dealing entirely on CSS) is they often give me 90% more information than I’ll ever need. They’re great if I need a reference at work, to be sure, but if its something I’m doing on my own, I want only the bare essentials.
    I suggest Osborne’s HTML The Complete Reference by Thomas Powell. I’ve found the book focused and quite helpful on a wide range of topics, CSS included.
    Amazon link: http://www.amazon.com/exec/obidos/ASIN/0072129514/qid=1011810206/sr=2-1/ref=sr_2_71_1/102-4510661-3263345

  17. Here’s another one, “Cascading Style Sheets: Designing for the Web.”
    The mag I work at reviewed the second edition in May 2000. It’s very thorough and not a difficult read. The authors — Hakon Wium Lie, Bert Bos, and Robert Cailliau — have worked on the development of CSS since 1994.
    It’s available at (where else?) Amazon.com.

  19. One link that I’ve found useful that I didn’t see mentioned is w3.org’s CSS Test Suite. The CSS references I’ve read are great, but they usually only tell you what is valid CSS. Unfortunately, browsers do not always implement valid CSS the way it’s supposed to be rendered, which has always been my main source of headaches w/ CSS. The Test Suite helps separate out theory and practice. You may have done something correctly in CSS, but that doesn’t mean it’ll show up the way you expect it in your browser. And now, after my inane preachy rambling, the link:
    http://www.w3.org/Style/CSS/Test/

  21. O’Reilly is the way to go. I use my Dynamic HTML book all the time and I think the explanation of CSS is good. If you need a good treatment of HTML, DOM, and JavaScript along with CSS, then go with this one. I agree that the Definitve CSS book from O’Reilly may be overkill, but then again, I’ve only skimmed it.

  23. Please please please increase your font size! I have a 17″ monitor and I have to squint to read your text. Changing the text size to max in IE doesn’t help, either.

  26. Hey Wil…
    We got our sheets at Marshall Fields. We really like the Calvin Klein collection.
    Nice, high thread count, and the colors really do match the color of the master bedroom.
    They were a little more pricey than the ones at Target, but definitely worth it!

  27. Uhm…. CSS? I BARELY know HTML Uncle Willy, so I’m afraid I’m not going to be much of a help. I noticed that you’ve credited alot of your work to Macromedia Dreamweaver. (Awsome little proggie and the SAVIOUR of us HTML dummies!)
    Speaking of Dummies…I am sure the ‘For Dummies’ books will have something on CSS programming and the use of CSS proggies. >.

  29. Wil,
    It’s important to gather data when people say CSS looks “wonky”. Anti-Microsoft feelings aside, I have to say IE has pretty damned good CSS support, Netscapes 6 is ok, but looking at your site in a Mozilla-based browser (Netscape 4.7 and lower or some *nix builds) will cause you to tear your hair out.
    Problem is, even a browser being W3C compliant doesn’t mean you’ll get what you expect. Some of the standards are vague enough that both Netscape and IE can “comply” to the standards, but do it differently.
    What I’ve done as I’ve started moving away from weblogger.com and finally building my own site is to try to use as simple a stylesheet as possible. I also used the @import property rather than the LINK protperty to include my stylesheet. Since @import is not handled by older Mozilla browsers, they get a plain-text circa 1994 website. Newer browsers get the stylesheet. Plain may be “dull”, but it’s readable, which is damned important.
    It’s a hack workaround, but so far it works. I have yet to test it in AOL’s browser though.
    As for references, the ones listed here already are good. I generally suggest reading webmonkey for an introduction to a concept, and going to htmlhelp.com or devguru.com for a reference/syntax guide.

  30. I’ve been trying to work on CSS and finally bought a book. Me, bought an instructional book! Who would have thought!? Seriously, look at ‘Cascading Style Sheets for Dummies’. Otherwise any O’Reilly book on CSS is a good choice… my friends and coworkers agree. I can only say I really like ‘Cascading Style Sheets for Dummies’ since it has all those cheat sheets for the users who know what they’re doing, but can’t quite remember how to do it. It’s also really good for the beginner. :-p

  33. Wil —
    The book Dreamweaver 4 Magic (@ amazon: http://www.amazon.com/exec/obidos/ASIN/0735710465/qid=1011819256/sr=8-1/ref=sr_8_7_1/104-5534540-1744702 ) tells how to do skins. Since you use Dreamweaver, it might be a worthy investment.
    As for CSS – there is a Peachpit book for such matters — DHTML (@ amazon: http://www.amazon.com/exec/obidos/ASIN/0201730847/qid=1011819382/sr=2-1/ref=sr_2_75_1/104-5534540-1744702), which I have found to be enormously helpful.
    Good luck!

  35. IMHO (and indeed in my considered professional opinion as well :)), the best introductory book on any aspect of web design – including CSS – is ‘Web Design in a Nutshell’. It’s got chapters on pretty much everything you need to know, and it covers 90% of anything you’ll ever need to use.
    http://www.oreilly.com/catalog/wdnut2/
    Hope this helps,
    -D-

  36. Wil – I’m generally a big fan of O’Reilly, but I’m going to advise you to skip their “Dynamic HTML” book. It’s getting a little out of date, and it’s a daunting read.
    If all you need is info on basic CSS styles, and not lots of stuff on Javascript programming, check out “Cascading Style Sheets, Second Edition: Designing for the Web,” by Hakon Wium Lie, Bert Bos, and Robert Cailliau. It’s very complete, and very clear, a perfect beginner’s book. Oh – and two of the authors were named as editors for the actual CSS2 specification. What more could you want?

  38. hey hun,
    good luck with the css! whatever that is i dont know, but ok! well im guessing that everyone that wrote comments or somes here are a lot older than me – im thirteen. wil ur my favorite actor and i luv u soo much. u were amazing in stand by me! did u go to that stand by me site i made yet? ok, well write bak to me ok buh bye luv ya
    jess

  39. You could try to do a picture link map…those are always neat…and java could be fun (But Wil, so hlpe me God you put up 130 fucking java alerts on your site I’ll….well…Umm…”pain…lots of pain!” *L* riiiiggghhhhttt)
    I have no idea what CSS is (horrible webmistress I am I just *ahem* borrow what I like) so i can’t help ya there…again – luv the site!!! :p
    ~Shay

  42. Hey guys! I (stupidly) just wrote my first WW.N post, but I put it at the end of yesterday’s thread. D’OH!
    Well, if you care to read it, it’s very nice, and I don’t want to repeat myself here.
    Have a GREAT evening!

  43. Will –
    Last summer I decided to go with a pure CSS (no tables) layout for my site, and the examples at Glish (http://www.glish.com/css/) helped me out greatly. I’m not going to claim that I completely understand everything that’s going on, but it got the site up and running. (grin)

  44. http://www.richinstyle.com/ – They have a decent guide to basic CSS1, CSS2, and HTML4.
    A good goal would be to pass XHTML strict validation at http://validator.w3.org/ – If you’re going to do it, might as well do it to the latest standards.
    The w3 also has a CSS validator available, it comes in really handy to error check your code. Remember, just because IE shows it right, doesn’t mean it’s syntactically correct.
    This message posted with Mozilla, under Linux.

  45. I know they aren’t books, but these are two very good references to learning the basics and theory behind CSS.
    The whole point of CSS is the separation of style from content. I’m sure you’ve heard that before, but HTML 3.X cannot easily accomplish this. This is why HTML 4.01 transitional was founded, to eventually migrate the basic language of the web over to XHTML, which has benefits in that it provides backwards compatibility with older versions of HTML, as well as giving a vehicle to the complete separation of style from content. Content, of course, being provided by the content of the .html file, and the style being provided by the CSS.
    To really grasp CSS, you first need to learn the basics of XHTML. I very good primer can be found here: http://www.tomville.com/tutorials/webdev/xhtml-tutorial-1.html . The guy who wrote it is a frequent visitor of http://www.hardforum.com – if you need any help with CSS at all, he’s the man to do it. His screen name there is MalusCaelestis.
    The CSS part of it can be really explained here. This guy has a huge fountain of knowledge, and pretty much everything I know of CSS I got from him. Check it out.
    http://www.glish.com/css/
    -Jeremy-
    BTW, if you get tired of Ikonboard (which a lot of people do) check out http://phpbb.sourceforge.net/phpBB2/ – It’s got just as much functionality as vBulletin, it runs faster, executes less database queries, and it’s FREE. Don’t get the prepackaged version of it, look at this thread: http://phpbb.sourceforge.net/phpBB2/viewtopic.php?t=3507 to get the latest CVS snapshot. You can also find more instructions, tweaks, etc on the forums themselves.

  46. I feel your pain, Wil ;-)!
    I have 4 websites and still I never dared to get close to CSS until I was so sick of all that work. So I tried … and WAHEEEEY!!!! You’ll learn to love it :-)! Have fun… *wink*
    BTW, I just found this site 4 days ago! It rocks, I am sooooo proud of you!!!!

  47. Oooh! Comments now… Wil, you do rock. You’re better at this than I’ll ever be, but you have inspired me… where did you get someone to host your comments? I still need that for my site…
    Wil Wheaton is a web god! 🙂 And that pic from the zoo is cool. 🙂 Nice. Quality…
    peace, love, and big smiles!
    ~ angie k

  49. Well, I like the visual quickstart guides. The one I used for cascading style sheets seems to be out of print, but it’s been replaced by:
    DHTML and CSS for the World Wide Web: Visual Quickstart Guide
    They have it at Amazon, but for a change of pace here’s the link to Powells, which is a local bookstore for me (insert evil gloating laughter here):
    http://www.powells.com/cgi-bin/biblio?inkey=62-0201730847-0
    -Ann

Comments are closed.

Related Posts

Recent Posts