Archive for the ‘css’ Category
Image gap
Just one of those CSS annoying problem that related to DOCTYPE.
http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps
Spent good few hours scratching my head on this, I know I should have looked at the DOCTYPE generated by my editor (Eclipse Aptana) on the first instance, but I didn’t.
And what makes it even worse, I don’t actually need to put any DOCTYPE at all as I was developing HTML for email newsletter. Sigh.
Designing with web standards
I have just finished reading designing with web standards by jeffrey zeldman.
I got the book from my local library. I couldn’t believe my eyes when I saw this book on the shelf as the IT section of my library is not known for its currentness.
It was an interesting read, if you deal with HTML and CSS in some ways you would get something out from this book. The book starts very slowly with the history of web standards and I almost gave up after the first few chapters, I guess if you are really pragmatic, not really care about the history and you do not need to be convinced about adhering to the web standards then you can safely skip the first four chapters.
Below are some of the interested points that I learned from the book:
- I finally got the distinctions between HTML 4.0, XHTML 1.0 Transitional and XHTML 1.0 Strict.
- Layout using table is NOT evil. I know it may come as a shock for CSS purists, I was shocked myself to read this from a CSS guru. What he’s trying to say is: table might still be used for layout for the sake of backward compatibility as CSS isn’t well supported on the older browsers, the best approach is to have a hybrid layout combining both tables and CSS to avoid nested tables.
- Accessibility is something that I never would have thought of when doing my HTML and CSS. But it’s apparently not that hard to create more accessable sites, chapter 14 has thorough guidelines on how to do so.
- I was being reminded of the importance of semantic markup. H1 means something, semantically it means this is important content not merely saying this font is big. So H1 should contain more important information than H2 and it’s not merely saying H1 has larger font than H2
- After 2 years working with designers, I now know why they talk font size to me in points not pixels! It’s the designers’ lingo apparently, it’s good to find out how points related to pixels. Also some other size related issues like: is it better to use em or px?
Overall it’s a good book to read, but not the book that I would buy and have it on my shelf. I found the book spent a lot of content on the history. In some occasions the author presented different approaches to design problem but he dwells on the individual approaches quite deeply and in the end I didn’t feel his strong recommendation on one or some of the approaches. I personally would like just to be told: “always use pixels for your font size” rather than reading 10 pages going back on forth about points, pixels, percentages and ems.
I still think this a book worth reading, it will make you better web designers and web developers. Now, for my next CSS reading material I am interested in reading Bulletproof Web Design.
Note
1. Doctype declaration can make a difference in the way your CSS is displayed. Forgot what DTD Dreamweaver produces, but it makes IE7 setting margin: 0px auto doesn’t center an element. Will investigate.. i might be wrong.n2. Setting vertical-align to middle on img somehow created a gap in IE7 eventhough you have set the height of the container to be the same as the height of the image.. weird.n3. Learnt how to create an imagemap in Dreamweaver, it was so easy to do! I wonder why imagemap is no longer popular, back in the nineties it’s everywhere, tyan used it too on his old homepage i remember… Maybe it’s no longer cool..
Working on a new site for an internet cafe, it’ll be quite straightforward, no fancy requirements just backend to handle newsletters, products and special offers, news and then frontend, they design their own site, we just have to put into a working website.
Avoiding the inlines
Yes, inline CSS and Javascript are bad and not elegant, but it’s quicker to build, ie no need to switch between the html and css files, furthermore for a site that the layout is somewhat not uniform, why would you want to declare a style in css file if the style is only applicable for an element of say a page?
Code readibility is quite bad actually for our framework (or at least on the projects that I did). Writing a readable codes do take longer time, in a project with a strict time constraint, the code correctness and keeping the project milestones are probably a priority. The best one can do is to improve the coding skills (and familiarity with the framework) so that good codes (and readable) can be produced in shorter time.
