My Monkey Do

A Log of Coding Solutions

css

Vertically Center Anything With Dimensions

by

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:


.vertically-centered-box {

  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width:100px;
  height:100px;
  margin:auto;

}

From: http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally

Careful with supporting all versions of IE 8

by

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 the wild.  2 of which I have run into personally.  1 version, on Windows 7 uses the IE8 standards document to show websites while another version runs on Windows XP to show IE7 standards document.  Until 2008, IE8 used to default to render using IE7!  What the hell?  Anyway, the real problem is IE7 does not support a lot of CSS that we use today since, you know, it’s over 10 years old.

Solutions

A good starting point is to use the IE-edge meta tag within the head:

<meta http-equiv="x-ua-compatible" content="IE=Edge"/>

Another good starting point is to use the modernizr.js script.

IE8 using IE7 does not support box-sizing.  Using modernizr and some handy dandy javascript, we can adjust the dimensions of elements.

Modernizr.addTest("boxsizing", function() {
return Modernizr.testAllProps("boxSizing") && (document.documentMode === undefined || document.documentMode > 7);
});
jQuery(document).ready(function($) {
if( $('html').hasClass('no-boxsizing') ) {
$('.no-boxsizing, .no-boxsizing *').each(function(){
var fullW = $(this).outerWidth(),
actualW = $(this).width(),
wDiff = fullW - actualW,
newW = actualW - wDiff;

$(this).css('width',newW);

var fullH = $(this).outerHeight(),
actualH = $(this).height(),
hDiff = fullH - actualH,
newH = actualH - hDiff;

$(this).css('height',newH);

});
}
});

IE8 using IE7 has no table-cell

One solution is to use

*float:left;

Or, as one stackoverflow person found, use !ie7.. sorry, forgot to save the link.  but anything with !ie7 will only apply to ie7 and below.  (the ie7 part can actually be any non-valid text like !ieisold)

float:left !ie7;

To vertically align images, try this:  http://stackoverflow.com/questions/10998614/ie7-vertically-align-middle-not-working

To test your work out on multiple versions of IE without you having to actually have Windows installed:

http://www.browserstack.com/

What is box-sizing and border-box?

by

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 time thinking the padding affected the overall width?  What world was I living in where you say this div is 100px wide, but if there’s 10px padding on each side the width should actually be 80px?

Solution

No, I wasn’t dreaming.  The WordPress twentythirteen theme has a style called

box-sizing:border-box

.  This causes the width to stay the width and the padding to be on the inside and not affect the width.  This is amazingly supported in IE 8 and up, and, with some prefixes, webkit and firefox.    I will always be using the below code from now on.


* {
 position: relative;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

IE Doesn’t see padding on hover

by

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 event on the li, however it only works on the bottom 1px of the li.

 

Solution

I tried adding position:relative and zoom:1, as some have suggested but that doesn’t work.  I then just tried to put a background in the anchor tag to see if IE even recognizes that the anchor tag has padding.  It did recognize the padding and once the background was in the hover also worked.  Turns out IE needs a background set?  I found another person who had this problem and the solution was to set the background to a transparent image of 1×1 px.

 

http://stackoverflow.com/questions/12197999/ie-not-including-margin-and-padding-in-hover-without-background-set

Space Under Image Link

by

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 show.  I took off all padding and margins on the image and divs and the space still would not go away.

Solution

Simple as vertical-align:text-bottom.  I’m guessing this works because I have some text in the next div.  Not sure why the text in another div would affect the image, but ok, it works.

img {
vertical-align: text-bottom;
}

 

source: http://csscreator.com/node/110

Text with Inner Shadow

by

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: 50px;
    color: rgba(255,255,255,.1);
    position: absolute;
}

.depth:before { top: 1px; left: 1px }
.depth:after  { top: 2px; left: 2px }

 

source: http://stackoverflow.com/questions/2889501/inner-text-shadow-with-css/8859832#8859832
keywords: css font inset