CSS hacks targeting all versions of IE 6 – 11
by ben on March 7, 2014
Hacks are no longer a single entity. In order to target certain versions of IE sometimes you require combinations of hacks. Here is a list of hacks with the versions of IE that recognise them:
.aClass {
color: blue;
_color: red; /* ie6 only */}.bClass {
color: blue;
* color: green; /* ie6 and ie7 only */}.cClass,#notie8#hack { /* ie7, ie9, ie10, ie11+ only */
color: white;}.dClass {
color: blue;
color: yellow\9; /* ie7, ie8, ie9 and ie10 only */}.eClass {
color: blue;
color: purple\0; /* ie8, ie9, ie10, ie11 only */}.fClass {
color: blue;
color: black\9\0; /* ie8, ie9, ie10 only */}.gClass {
color: blue;
color: orange\0/; /* ie8, ie9, ie10 only */}.hClass {
color: blue;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* ie10, ie11+ */
.hClass {
color: pink;}
}
Storing a tree hierarchy in a db
by ben on March 7, 2012
Fantastic article talking about storing hierarchical data in a database:
http://www.sitepoint.com/hierarchical-data-database/
Using the Modified Preorder Tree Traversal concepts works very well for quick retrieval of hierarchies and displaying them in a set of unordered lists.
CSS Clearing hack combined with haslayout hack
by ben on January 19, 2012
You all know the clearing hack… Give the wrapper either a height or width, and also “overflow: hidden;” then anything floating inside it will be “cleared”.
ie.
If you have for example:-
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
If the spans were floating block elements, then you could clear them like this:-
div {
display: block;
width: 500px;
overflow: hidden;
}
span {
display: block;
width: 100px;
float: left;
margin-right: 10px;
}
Well if you combine that with the multi-css-block haslayout fix, you don’t even need to give the wrapper a width or height.. just the “overflow: hidden;” will clear the contents…
ie.
div {
display: inline-block;
}
div {
display: block;
overflow: hidden;
}
span {
display: block;
width: 100px;
float: left;
margin-right: 10px;
}
Try it… it Works….
Very, very cool!
builtin mac osx php/apache/mysql
by ben on August 21, 2011
Mac OSX come with the following:-
Apache 2
/usr/sbin/apachectl
/etc/apache2/http.conf
/etc/apache2/etc/extra/http-vhosts.conf
/Private/etc/apache2/etc/extra/other.conf
activate php by uncommenting the config line:
"#LoadModule php5_module libexec/apache2/libphp5.so"
PHP (mac version: Entropy)
/etc/php.ini
Mysql
Latest install from mysql.com.
removing mysql on mac osx
by ben on August 21, 2011
- sudo rm /usr/local/mysql
- sudo rm -rf /usr/local/mysql*
- sudo rm -rf /Library/StartupItems/MySQLCOM
- sudo rm -rf /Library/PreferencePanes/My*
- edit /etc/hostconfig and remove the line MYSQLCOM=-YES-
- sudo rm -rf /var/db/receipts/com.mysql.*
- sudo rm -rf /Private/var/db/receipts/com.mysql.*
IE9 – document.createElement causing invalid character dom exceptions
by ben on March 25, 2011
You getting one of these errors in IE9 now?
DOM Exception: INVALID_CHARACTER_ERR (5)
IE9 seems to be trying to play “by the rules” a bit more..
If a script is to validate against IE9, when creating elements using:
document.createElement
you must first create the generic element and then apply the attributes to that object, whereas in the past you could create the element with attributes all at once.
Ie.
Use:
myObj = document.createElement(“<iframe>”);
myObj.setAttribute(“src”, “someSrcUrl”);
not:
myObj = document.createElement(“<iframe src=’someSrcUrl’>”);
Eg.
http://stackoverflow.com/questions/5344029/invalid-character-dom-exception-in-ie9
IE 9 guide for developers
by ben on March 16, 2011
Handy resource for developing against Internet Explorer 9.
http://msdn.microsoft.com/en-au/ie/ff468705.aspx
cross browser css text wrapping
by ben on February 22, 2011
pre {
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
using dhtml for attaching events cross-browser without a javascript framework
by ben on September 16, 2010
For times when we choose not to use a JS framework like JQuery for attaching browser events, here is the basic way to do so cross-browser.
Read the rest of this entry »
sticky css footers
by ben on September 8, 2010
Html:
<body><div class="wrapper"><div class="push">
</div></div>
<div class="footer">
</div></body>
CSS:
html, body {height: 100%;}
.wrapper {min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */}
.footer, .push {height: 142px; /* .push must be the same height as .footer */}