Here is a dumping ground for any CSS links I find particularly useful.
Latest Edited: 06/02/12
Subtle Backgrounds – Really nice subtle background images you can you use for your next project.
CSS3 Button Generator – For us lazy types who like GUIs for doing this sort of thing!
You know those moments when you know something won’t work but you try it anyway just in case the web gods look favourably on you for once? Well I just had one of those and I would like to share it, because I think this is something that the web gods should consider.
Vendor prefixes in CSS serve the purpose of allowing browsers to play about with their own implementations of new CSS rules or adding stuff totally unique to them.
There have been arguments back and forward about how useful these are in production systems and there have been some great tools made to try and reduce how much time we spend in vendor prefix hell, personally I think anything that drives the web forward is a good thing and I think prefixes do that. But anyway, enough pre-able.
What I would like to propose is that since we have vendor prefixes anyway, could we use them to target specific browsers with already known rules.
I have an edge case where it would be really nice to be able to do something like;
margin-bottom: 59px; -webkit-margin-bottom: 39px;
What this would allow me to do is set the standard margin-bottom to 59px (if it not being 60px makes you twitch, join the club!) but in webkit browsers I would like the margin to be slightly smaller.
I know this could be misused and end in really sloppy, massive CSS files – but if used with care (which I promise I would do) it would be a neat way to achieve these odd little hacks that occasionally we need to do.
Some time ago I had an issue with some table content not printing if the table filled up several pages, I asked about it on Stack Overflow but ended up working it out for myself.
You can read the full question and answer on the site, but essentially I needed to add;
* { overflow:visible ! important; }
into my stylesheet.
I finally got around to fixing the stupid looking bullets that appeared on a lot of the parts of the disqus commenting system.
The issue, of course, was that my stylesheet wasn’t designed to hide the style of the unordered list items. Here is the code I needed to add to remove the bullets.
Written by #disqus_thread ul {
list-style: none outside none;
}Hope it helps someone.
Sometimes IE7 gets it right.
An example of this would be when you have a td with a CSS property of width: 100px; and apply a colspan of say 3.
What most browsers seem to do is take that width and multiply it by the colspan, whilst this is sometimes useful it isn’t what you asked the browser to do.
IE7 doesn’t assume anything, it applies the colspan first then looks at the CSS and says ‘hold on a minute, they want this width set to 100px’ and applies it.
In my opinion that is the way it should work and well done IE7 for not trying to second guess me.
