CSS Background Default

If you would like to override an already attached class containing a background then you can use the following: [code lang=”css”] background:transparent none 0 repeat !important; [/code]

By Andrew Odendaal, ago

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…

By Andrew Odendaal, ago

PNG Transparency in IE 6 Using Javascript

Earlier versions of Microsoft Internet Explorer(IE6 and below) didn’t know how to handle the transparency in PNG image files. Luckily this can (somewhat) be corrected using some Javascript. Include the following function in either your site’s javascript file or in the head of your HTML document. [code lang=”javascript”] function bgPng(){ Read more…

By Andrew Odendaal, ago

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…

By Andrew Odendaal, ago

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…

By Andrew Odendaal, ago

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…

By Andrew Odendaal, ago