Simple CSS 100% Height and Width!

My only question is: HOW THE HELL DID I NOT KNOW ABOUT THIS?

Here's what happened. My earlier blog post about the 100% width absolute background element turns out was totally wrong. IE7< was glitching on this, causing a width of closer to 130%. Digging around the internet for an explanation for this bug(?), I came across this helpful post on A List Apart: http://www.alistapart.com/articles/conflictingabsolutepositions/

Basically, it mentions that some browsers don't play nicely when you mix percentage widths and fixed widths together on the same page. But that's not the important part - what is, is the solution it provided.

Take a div. Position it absolutely. Now give it left:0 and right:0 positioning. What is your first instinct will be the result? Mine was that it would default to the position which is declared lower in the style declaration. But the reality is much much sweeter. What you are in fact indicating is that the left most corner of the div should be at left:0, and the right most corner of the div should be at right:0. The result? 100% width. Now you may be thinking, can the same thing possibly apply to height? Guess what.....IT DOES.

The catch - it doesn't work in IE5 or IE6, and there is a teeny glitch in Opera. However, the List Apart article provides some work arounds for the IE issues. And if you or your development company has gone the way we have, as well as many other large internet presences, you can forget IE5 and 6 altogether these days, instead recommending your user to upgrade.

*waiting for the flaming from that comment. Oh wait, no one reads this blog. Phew.*

Here's my sample if you want to see it in action:

http://www.sugarandsalts.com/100percentbaby

Double top-padding in IE7

Ran into a situation today where top-padding was being doubled in IE7. After banging my head on the desk a few times trying to fix it, I turned to google and found this little trick:

http://cafefrenzy.com/css-double-padding-ie7-fix/

Basically you add display: inline-block; to the element. Worked like a charm!

Background Image Not Showing Up in IE

Just wanted to share a little IE/CSS particularity that has caught me a few times now in regards to background styling. It seems if you don't leave a space after the url brackets, ie:

background: url(http://www.someurl.com/image_assets/slices/contentTop.jpg)no-repeat top;

it can not parse the style. I suppose this is pretty straightforward and any reasonably intelligent person could recognize this glitch, but it's caught me at least twice now, so I thought I'd throw it out there on the web.

If I was really motivated I would go look up the CSS Specifications for this and see if this is IE's mess up or everyone elses, but hey, I'm just not.