I have been very busy working on CSS for a big up and coming web site and I have spent the last few nights doing some research on best practices and came across a W3C site I used when I first started coding with CSS that is very useful. There are a number of tips […]
I am currently working on a big project which includes wrangling over 12k lines of CSS. Tonight it took me an hour to create a very simple form when it would normally take me 5 minutes. Why? Overcomplicated CSS. At this point I am using so many default values (like vertical-align: baseline; and float:none;) that […]
I have been busy working on an excited project that uses some pretty complicated layouts. I was originally hired to optimize and clean up the XHTML/CSS so it would work in IE 6, IE 7, Safari, and Firefox, but now am busy working on producing the clean XHTML/CSS from the start. I needed to brush […]
In the past few days I feel like I have been bookmarking and tagging URLS left and right. If you are bored, or interested in looking at some really cool/crazy stuff, take a few minutes and check out the items below. Transparency with IE 6! Keyword shortcuts from OpenDNS (thanks Doug) The secret Wildfire horseradish […]
Yesterday I finally broke down and bought Parallels and Windows XP to run on my MacBook Pro so I could do my CSS debugging and testing on IE 6 and IE 7 for Windows. After the ridiculously long Windows install and then security updates (74), I was pleasantly surprised with the speed and performance of […]
If you do not have a lot of time or experience with CSS, here are some quick ways to save yourself headaches down the road. If you have read my blog before, this is nothing new, but I cannot stress these points enough. Validate your code. By simply validating your code, you can learn a […]
For a browser that is hardly standards compliant, Internet Explorer still infuriates me and acts as my arch enemy when debugging CSS. How about an example? This code works in Safari, FireFox, Opera but not IE: .heading { background: url(“images/heading-bg.gif”)repeat-x; color:#fff; font-size:1em; margin:5px 0 5px 5px; border:1px solid #292929; padding-left:3px; line-height:21px; } The result: The […]
If you ever need to implement drop down menus and want to use clean CSS/javascript code, check out: Son of Suckerfish Dropdown menus. I have implemented these on a few web sites now for my clients and have been very happy with the results. If you are using WordPress, you can also use to dynamically […]
Recently I needed a way to align the bottom of a graphic to the bottom of the text and found the solution: vertical-align:text-bottom; (More information on vertical alignment).
I am currently working on a CSS project that needs to work in IE 5.0+, FireFox 1+, Safari 1+, and Opera 8+ for both Mac and PC. Normally writing CSS for multiple browsers/multiple platforms does not scare me, but the IE 5.0 part scares me, particularly since I am going to have to create some […]
After spending fourteen hours this weekend working on CSS for a project (99% positioning), I thought I should write something about troubleshooting and debugging common problems I usually run into in hopes it can save others a few minutes/hours/frustration. What to do when the unexpected happens (including when nothing at all): class(.) or ID(#)? There […]
Over the years, I have wasted a lot of time on “guessing” what would work and what would not work. Anyone just starting with CSS or looking to modify someone else’s CSS will hopefully find these tips helpful and time saving. Padding or Margin? These two attributes are often used, and more often confused. The […]
