456bereastreet - 456bereastreet.com - 456 Berea Street
General Information:
Latest News:
Height in percent when parent has min-height and no height 28 Jun 2013 | 08:14 pm
When trying to force an element to always extend to the height of its parent I ran into some peculiar browser behaviour that I thought was worth mentioning. Here’s the situation: The parent element h...
How to proportionally scale images that have dimension attributes 14 Jun 2013 | 12:09 am
Allowing images to scale along with their container is an important part of responsive web design (and was so even before the term “responsive web design” existed). It’s really quite easy – all you ne...
Firefox and the magical text-overflow:ellipsis z-index 31 May 2013 | 11:09 pm
A while ago I received a strange bug report for a site I’d been working on. The report mentioned dots appearing on top of a dropdown menu when it was expanded. I had a look in Safari, could not see an...
Replacing images when printing 15 May 2013 | 12:07 am
It isn’t all that uncommon that, after you’ve polished your print stylesheet to make a site look well on paper as well as on screen, you realise that the logo really doesn’t look its best. It may look...
Using a transparent image as an icon fallback 30 Apr 2013 | 10:36 pm
Sometimes designs contain button styling that is difficult to create with CSS alone. The “official” way of dealing with this is to either use an image button (<input type="image" src="button.png" alt=...
Conditional sibling class names for IE patching 12 Apr 2013 | 12:22 am
Traditionally, web developers have been using either CSS hacks or conditional comments to target different versions of Internet Explorer with CSS fixes. In the last few years more and more people have...
Responsive drop shadows 5 Apr 2013 | 12:15 am
Back in the ancient days of fixed-width web design, adding a drop shadow to an element used to be a matter of exporting an image containing the shadow from Photoshop and placing it as a background ima...
Letting users disable responsive layout 25 Mar 2013 | 10:32 pm
It’s great that media queries allow us to adapt the layout of our sites to the users’ viewport size, a.k.a. Responsive Web Design. However, some argue that doing so comes with a (slight) risk of confu...
How to shrinkwrap and center elements horizontally 5 Mar 2013 | 12:07 am
When you use CSS to float an element that does not have an explicit width, the element’s width becomes its “shrink-to-fit” width. This is useful when you’re floating elements that you don’t know how w...
Fieldset, legend, border-radius and box-shadow 23 Feb 2013 | 08:16 pm
The fieldset and legend elements are notorious for being tricky to style, especially if you want the same result across browsers. Other than the line wrapping issue I wrote about in How to line wrap t...