Comments on: Styleless http://andrewjaswa.com/2008/05/styleless/ I build crappy websites every day! Tue, 06 Jan 2009 06:03:46 +0000 http://wordpress.org/?v=2.7 hourly 1 By: Jon http://andrewjaswa.com/2008/05/styleless/comment-page-1/#comment-8 Jon Mon, 02 Jun 2008 19:23:27 +0000 http://andrewjaswa.com/?p=10#comment-8 Chris, Since images are actually inline elements in xHTML, display:block makes them behave more as we'd expect... Most importantly, it gets rid of the 3px "gutter" at the bottom of images... inline space reserved for the descenders of letters q,y,j, etc. I mostly use .floatleft / .floatright on IMGs my personal site. I like to have a variety of image positions, i.e., not all floating on one side; some articles might start with an image on the left, others on the right. I'd love to come up with a more semantic name for .floatleft / .floatright. What would be better? .sideItemL / .sideItemR? I suppose you could call them something like .image and .illustration for purely semantic class names, but that adds a needless memory burden in the service of a purely idealistic goal, IMHO. Your thoughts? Chris,

Since images are actually inline elements in xHTML, display:block makes them behave more as we’d expect… Most importantly, it gets rid of the 3px “gutter” at the bottom of images… inline space reserved for the descenders of letters q,y,j, etc.

I mostly use .floatleft / .floatright on IMGs my personal site. I like to have a variety of image positions, i.e., not all floating on one side; some articles might start with an image on the left, others on the right. I’d love to come up with a more semantic name for .floatleft / .floatright. What would be better? .sideItemL / .sideItemR? I suppose you could call them something like .image and .illustration for purely semantic class names, but that adds a needless memory burden in the service of a purely idealistic goal, IMHO. Your thoughts?

]]> By: Christopher Jones http://andrewjaswa.com/2008/05/styleless/comment-page-1/#comment-7 Christopher Jones Thu, 29 May 2008 20:23:44 +0000 http://andrewjaswa.com/?p=10#comment-7 Looks good to me. Out of pure personal preference and going by what I actually find myself doing, I would probably throw a boder:0 on fieldsets as well. No real reason, I just find that I end up turning them off more often than not. JZ, two questions... 1. Why the display:block on all images? 2. Do you find that having a class name that explictly declares what it does hinders things? I have seen many people use various float classes, but to me it seems like the equivalent of having a class named 'red' instead of 'error'. It seems presentational instead of semantic. Looks good to me. Out of pure personal preference and going by what I actually find myself doing, I would probably throw a boder:0 on fieldsets as well. No real reason, I just find that I end up turning them off more often than not.

JZ, two questions…
1. Why the display:block on all images?

2. Do you find that having a class name that explictly declares what it does hinders things? I have seen many people use various float classes, but to me it seems like the equivalent of having a class named ‘red’ instead of ‘error’. It seems presentational instead of semantic.

]]> By: Jon Zuck http://andrewjaswa.com/2008/05/styleless/comment-page-1/#comment-6 Jon Zuck Sat, 24 May 2008 19:06:51 +0000 http://andrewjaswa.com/?p=10#comment-6 Oh, I almost forgot... a few other things I do on virtually every site: 1. declare a float + opposite side margin for both directions, example: floatleft: {float: left: margin-right: .5em;} 2. a img {border:0;} 3. img {display:block;} Oh, I almost forgot… a few other things I do on virtually every site:
1. declare a float + opposite side margin for both directions, example:
floatleft: {float: left: margin-right: .5em;}
2. a img {border:0;}
3. img {display:block;}

]]> By: Jon Zuck http://andrewjaswa.com/2008/05/styleless/comment-page-1/#comment-5 Jon Zuck Sat, 24 May 2008 18:33:37 +0000 http://andrewjaswa.com/?p=10#comment-5 Nice baseline... Like Zach, I also like using border-collapse:collapse as a default. And I think I'd separate the decimal list-type into a declaration for just ordered lists... I'd also probably declare a much-smaller line-height, possibly 1.25, for the headers, so bottom-spacing would sit headers nearer the content, and scale proportionately with the text size ... (interesting discussion about this in the the chapter on typography in Cascading Style Sheets, Briggs et al. about how larger type doesn't need the same line-heights as body type.) with a declared margin on the top alone. Very nice job, Andrew Nice baseline… Like Zach, I also like using border-collapse:collapse as a default. And I think I’d separate the decimal list-type into a declaration for just ordered lists…

I’d also probably declare a much-smaller line-height, possibly 1.25, for the headers, so bottom-spacing would sit headers nearer the content, and scale proportionately with the text size … (interesting discussion about this in the the chapter on typography in Cascading Style Sheets, Briggs et al. about how larger type doesn’t need the same line-heights as body type.) with a declared margin on the top alone.

Very nice job, Andrew

]]> By: Zach Young http://andrewjaswa.com/2008/05/styleless/comment-page-1/#comment-4 Zach Young Sat, 24 May 2008 17:16:58 +0000 http://andrewjaswa.com/?p=10#comment-4 Now that the CSS file is correct, looks pretty good. I think I would collapse the border on the tables. I'm assuming it works on Windows browsers (I don't have any of them here...) Nice work. Now that the CSS file is correct, looks pretty good. I think I would collapse the border on the tables. I’m assuming it works on Windows browsers (I don’t have any of them here…) Nice work.

]]>