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+ */
}

Original article

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 */}