Posts Tagged ‘css’
CSS Background Default
If you would like to override an already attached class containing a background then you can use the following: background:transparent none 0 repeat !important;
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 using PHP – or your favourite server-side script – you can generate these nifty little things. An example of how…
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. function bgPng(){ for(i=0; i<document.all.length; i++) { var bg = document.all[i].currentStyle.backgroundImage; if(bg.match(/\.png/i) != null) {…
Double border in CSS
CSS allows you to add a border to almost all html elements. If you would like a double border you can use CSS like this: style=”border:double”
Simple HEX Colour Values
Actual Display Colour HEX Colour #000000 #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 #FFFFFF
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. pre{ white-space: pre-wrap; /* CSS2.1 compliant */ white-space: -moz-pre-wrap; /* Mozilla-based browsers */ white-space: o-pre-wrap; /* Opera 7+ */ } This code was originally found somewhere else online…
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. So how do you fix it? Try this: in your css file add: * html .container {height: 1%;} .container:after { content:…
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: .contactformdiv input:hover, .contactformdiv textarea:hover { background-color:#fff; } It was simple, I just added a focus… .contactformdiv input:hover, .contactformdiv textarea:hover, .contactformdiv input:focus, .contactformdiv textarea:focus { background-color:#fff; }
