Blog Archives

Careful with supporting all versions of IE 8

Problem Internet Explorer 8 is still mildly popular and so probably needs to be accommodated for on websites.  However, like different versions of Chrome and Firefox, IE8 also has different versions.  There are about 6 different versions of IE8 in

Tagged with: , ,
Posted in Coding

What is box-sizing and border-box?

Problem In the latest WordPress theme, twentythirteen, I noticed styles that had padding didn’t affect the width of my box.  Whenever I add padding, the inside just got smaller and the outside stayed the same.  Was I dreaming all this

Tagged with: ,
Posted in Coding

IE Doesn’t see padding on hover

Problem Internet Explorer 8 (I no longer even look at IE 7) seems to not be able to see the padding on an anchor tag within a ul > li > a structure.   Using jQuery I have a hover

Tagged with: , , ,
Posted in Coding

Space Under Image Link

Problem I had the following code like so: <div class=”someborder”><a href=”#”><img src=”someimage.png”></a></div><div>some text</div> The class “someborder” basically made a border around the image.  The problem was that there would be some space under the image and then the border would

Tagged with: ,
Posted in Coding

Text with Inner Shadow

The guys on stackoverflow are just geniuses.  This is one way to make beautiful text inner shadows:   .depth { display: block; padding: 50px; color: black; font: bold 7em Arial, sans-serif; position: relative; } .depth:before, .depth:after { content: attr(title); padding:

Tagged with:
Posted in Coding

Online Tools

All tools listed here are free and ready to use. CSS Gradient Generator Great for creating gradients, even in IE: http://www.colorzilla.com/gradient-editor/ Image Editor Great for an alternative to Photoshop or even Gimp if you don’t have anything installed: http://pixlr.com/editor/ Test

Tagged with: , , ,
Posted in Server Stuff, Tools

Gray / Grey Scale images

It is now easier than ever to make an image greyscale in CSS. [prettify class="xml"] <svg xmlns=”http://www.w3.org/2000/svg”> <filter id=”grayscale”> <feColorMatrix type=”matrix” values=”0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1

Tagged with: ,
Posted in Coding

Firebug in Safari

Since Safari 3.x, you can now have a firebug-like tool in Safari.  Either open terminal and copy-paste the line below or edit the plist file here ~/Library/Preferences/com.apple.Safai.plist. defaults write com.apple.Safari WebKitDeveloperExtras -bool true Most websites stop there saying “you should now

Tagged with: ,
Posted in Tools

CSS Height 100%

Problem I have a fixed footer and some content with a background.  The designer wants the content background to expand all the way to the bottom whether there’s a lot of content or no content at all.  This seemed relatively

Tagged with: ,
Posted in Coding

IE and inline-block

Apparently IE 8 cannot change the display of a element to inline-block unless it natively is inline.  The fix is to trigger hasLayout on the element before trying to change it.  Below is a code snippet to get elements to

Tagged with: ,
Posted in Coding