CSS background image data: base64?

What the heck is all that Gobbledygook in the CSS? So you have noticed that bit of css that says something like this in the CSS source-code and you have no idea what it could be? url(“data:image/gif;base64,R0lGODlfMAMEAIABAKysrObm5iH5BAEAAAEALAAAAAAwAwQAAAJOhI+py30Bo5y02ouz3rz7D4biSJbmiabqyrbuC8fyTKPOjedHzff+DwwKh8Si8YhMKku6pvOxjEqn1Kr1is1qt7ynV8cNi8fksvmMTiMLAD4=”) no-repeat scroll 50% 0 transparent It is a technique called Data URLs and Read more…

Wordwrap that PRE!

Ever used a <PRE> in a limited width div container? You will notice that the line gets cut off almost as if wordwrap was not enabled. To correct this you can add the following code into your CSS file. [code lang=”css”] pre{ white-space: pre-wrap; /* CSS2.1 compliant */ white-space: -moz-pre-wrap; Read more…

Guillotine-Bug? Bug

Yes, it’s called a Guillotine-Bug and it’s yet another bug IE users get to look forward too 😛 So how does it work? Basically, the hasLayout messes around and elements become invisible and visible according to random things. Rather silly, but a bit of a bitch to initially figure out. Read more…

Need more than hover?

I had a hover effect on an html input element but also needed to have an active state. The css was like this for the inputs in mention: [code lang=”css”].contactformdiv input:hover, .contactformdiv textarea:hover { background-color:#fff; }[/code] It was simple, I just added a focus… [code lang=”css”].contactformdiv input:hover, .contactformdiv textarea:hover, .contactformdiv Read more…