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.   http://stackoverflow.com/questions/8893312/css-bi-color-flexible-horizontal-background-band

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: 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: