One of the first problems you run into when trying to build an adaptive layout is that images, unlike blocks of text, have fixed widths. Ideally we want to use small images on small screens and full sized ones on larger screens. The browser can resize the image on the fly, but the two problems with this… [more]
All posts in CSS
Ben Callahan from Sparkbox shared some good links on responsive web design recently, one of them being this introduction to the subject from A List Apart. One of the things that struck me from the article was that “[mobile] browsing is expected to outpace desktop-based access within three to five years.” Another link to Smashing Magazine was a reference of… [more]
Divya Manian gave a presentation yesterday at WordCamp Seattle about generating proper markup when creating output from plugins, and she mentioned a site called W3Fools.com , which is basically a protest against W3Schools.com . I didn’t realize until I saw W3Fools, but W3Schools isn’t actually ran by the W3C, and it contains a lot of inaccurate information. Further, it seems like… [more]
I’m thinking I should create a, ‘Duh, why didn’t I think of that?’ category for this. Instead of using conditional stylesheets or CSS hacks to fix Internet Explorer’s obnoxious lack of support for standards, you can conditionally set a class on the html or body tag and target that in your normal stylesheet. This is better for several reasons, including faster page load times and… [more]
Here are a couple examples of good colors to use for clean CSS message boxes: http://www.mattvarone.com/web-design/message-box-with-css/ http://www.ajaxlines.com/ajax/stuff/article/css_message_box_collection.php
There’s a thread on the Sitepoint forums about the smallest amount of letter-spacing you can use . Most of the responses are useless, annoying and wrong, but #36 finally gives a good answer. Most browsers only support integer pixel values for letter-spacing. This is a problem because, when it comes to letter-spacing, there’s a big difference between 0 and 1px. Ems and other relative… [more]
Instead of using images, Flash or JavaScript to replace normal text with non-standard fonts, you can now use CSS’s @font-face rule . It will tell the browser to download the fonts and render the text using them. Internet Explorer uses the EOT format and everyone else uses TrueType, so you need to declare the sources in a specific order to make it work across browsers . You can get compress… [more]
kimblim.dk has a chart showing browser support for various CSS selectors , including pseudo selectors. It includes CSS versions 1 through 3 and all of the major browser versions.
It turns out there’s a serous problem with the One True Layout method of creating equal height columns . All of the content above an anchor will be shifted up , making it seem like it disappeared. There aren’t any universal or reliable fixes for this, so the Faux Columns method is probably the best choice if it’ll fit the design.
If you have an element whose children are all floated, it won’t have any height to it. I’ve always just put an extra <div style=”clear: both;”> at the bottom of the container to force it to clear, but it looks like there’s been a much better way for a few years now. Alex Walker points… [more]
Here’s how to have a drop-down menu appear on top of a Flash object: Add a z-index of 0 to the object’s containing div Add <param name=”wmode” value=”transparent”> inside the object tag Add wmode=”transparent” to the embed tag via Sheriar Designs
Often designers will want fixed font sizes so that the text on the actual size will exactly match their mockups, but The Web is Not Print (see also Pixel Perfect Design Does Not Necessarily Equal Good Web Design ). A List Apart has a worked out a good method for sizing text consistently across browsers while maintaining the user’s ability to resize the text to fit their needs. All you need to do is define a baseline size and line height in the body… [more]
All currently available versions of Internet Explorer incorrectly display colors in PNG images . To work around that, instead of setting a background color, you can use create 1×1 pixel image with the color you want, and set it as a repeating background image .
Tomas Bagdanavicius has created a fast, themeable, cross-browser CSS-based Drop-Down Menu Framework that only uses Javascript for IE6.
UPDATE: Now that all modern browsers (that is, everything except IE8 and older) have support for multiple background images via CSS3 , that is my preferred method. It’s detailed by Jeff Starr in his post, Better Image Preloading with CSS3 . * * * * I’ve been looking for a good way to preload images for rollovers, but it seems like a lot of the common methods… [more]
Clear a browser’s default CSS stylesheet Update: After working with it for a little while I prefer using Yahoo’s Reset CSS , Base CSS and a few custom values to Meyer’s version. I think he takes it too far (almost to the point of absurdity) with things like stripping the weight from the strong tag.
When I’m translating a design to markup I can usually get it to look the same in all the major browsers without too much trouble, but every once in awhile there’s a problem with IE6 that I can’t figure out, or just don’t have the time/energy to deal with the right way. In the past… [more]
