Blog Archives

Line in Firefox background

Problem When scaling the FireFox and having a background image size set to 100%, the bottom of the image sometimes shows a line on the bottom showing the background behind it. Solution Firefox seems to have a problem with background-size: 100%.  instead

Posted in Coding Tagged with: ,

2 color horizontally expanding background

All done in css, no images.  Float the background past the normal page width based on percentage.  one on the left, one on the right.

Posted in Coding Tagged with:

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:

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: