IE negative margin with a background bug.
May 7th, 2008
A quick note:
This is a fix to that dastardly bug where IE6 cuts off a background image that you bleed out of the container using a negative margin. It has to do with IE and hasLayout.. but it requires one more fix to avoid the peekabo bug.
.element {zoom:1;position:relative}
give that to the element that is negatively margined and suddenly it will show up in ie.
Yay.. and uh.. thanks to hasLayout
Links that need to be display:block, need to have “hasLayout” in IE in order to click padded area.
January 24th, 2008
Sometimes this one creeps up on me as I forget to add my hasLayout hack. So lets say you made a tab or even better.. a link that has an arrow in front of it.. so I use padding on the anchor..
#testlink a
{
display:block;
padding-left:25px;
background: transparent url(right_arrow.gif) no-repeat top left;
zoom:1;
}
The zoom:1; gives IE “hasLayout” which makes the padding / container of the anchor clickable. Otherwise, IE only allows the text to be clickable. Which is different than the rest of the browser world.
Why is it, Apple does great things and then retracts themselves a bit?
January 19th, 2008
This always seems to happen. They announce a great new product or sevice and once they do, it takes about a millisecond to imagine the most obvious opportunities THAT you could use their new product or service.. and then they go and tell you THAT isn’t possible.
Last year, the iPhone was already a widget-like device that was screaming to have third party apps installed. People who found a way around this, were presented with a bricked phone. (they have since, fixed those brick’d phones.. but how long did that take?)
This year it is with the new rental service, which now has HD content. Yay! But before you start thinking about how beautiful HD would look from iTunes to your iMac… Hold the phones! It’s only possible if you buy an appleTV. wha? You have got to be kidding me. Read more about it here.
Now I am fairly new to the world of Apple. I switched for a job, about 3 years ago. I put all my 5 PC’s in storage and have never looked back. I look at Apple as a company that “gets it”. Unfortunately, there are times when they have a “MS” moment and do something completely waaay off the mark. Like pissing off it’s loyal customers. The good thing about this? It’s only a matter of months before they announce that HD on iTunes will be for everyone.
Is this intentional? Do they only allow AppleTV customers first so people have incentive to buy the AppleTV? Maybe.. Honestly, not a bad idea. The bummer about that is, us folks who have a montly iTunes bill instead of a cable bill, will need to wait longer to have an upgrade.
When using YUI css framework, dont use base.css
January 1st, 2008
I have been using the YUI css library for a few years now.. and it is a wonderful tool which has yet to have another css framework worthy of compare.. It is very stable and infinitely robust and easy to change layouts. I love YUI reset, fonts, & grids and it saves tons of maintenance hours for me and my fellow front-end’rs.
With that said, I can say that I dont find YUI’s new base.css very appealing. Base.css brings back a default formatting to your browser. The benefit to this is that the base.css’s formatting is the same across all browsers. The same is true if you add your own default global fomatting back to your tags. This can be good and bad. The good is that base.css is helpful creating prototype layouts quickly. It is also helps if your site sticks to a standard format for the same tags. IE all paragraph tags have 1em margin top and bottom… etc. The bad… if you have a layout that uses a more modular approach or doesn’t stick to any standard format, this can create havoc trying to un-format. For example… you need 15px margin between one module and the next? Using firefox.. you may find that these modules already have a 18px margin between them…. but how can that be? I didn’t add margin to the containing div of these modules, and base.css didn’t either.. So what gives? it’s that first Title (H2) that you have in the second module.. or maybe it’s that last paragraph in the first module. Both have margin, and that supercedes the module’s containing div. If you arent’ careful, you can definately get thrown off by this.If you use base.css, be careful. It can be helpful for some, but harmful to others.
