Blog Archives

CSS iOS div lines disappear on zoom in

Problem In iOS devices sometimes safari can display an annoying line above and below div elements.  Like so:   Solution The solution is quite hacky and hopefully this is a bug in Safari and it gets fixed soon.  The solution is

Posted in Coding Tagged with: , ,

Pseudo Selector First Child of Class

Problem How do you apply a style to only the first element with a certain class? :first-child does not do this, that just selects the very first child no matter what the class is. :first-of-type doesn’t even do this.  but

Posted in Coding Tagged with:

Vertically Center Anything With Dimensions

One way to easily vertically center a div is to set it to be absolute, set the width, height and then the top, bottom, left and right all equal to 0.  Something like this: From: http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally

Posted in Coding Tagged with:

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

Posted in Coding Tagged with: , ,

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

Posted in Coding Tagged with: ,

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

Posted in Coding Tagged with: , , ,

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

Posted in Coding Tagged with: ,

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:

Posted in Coding Tagged with:

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

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

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

Posted in Coding Tagged with: ,