Repeat Penguin » css

Cover Your Pixels

Jeremy Anderson — Tue, 27 Jan 2009 23:20:31 +0000

With the increase in standard, out of the factory screen resolution for computer displays from 800px by 600px to 1024px by 768px, web designers across the internets were freed to make use of a wider canvas on which to design beautiful websites. And we loved it. This is anything but news.

A tiny oversight

Most web designers have been designing for 1024px by 768px for quite some time now. But around the time this became standard, some other wonderful things were happening. In particular, web browser support for CSS and web standards had made a small jump. This too, was wonderful.

However, along with these improvements in the industry, one tiny little layout consideration has been commonly overlooked by web designers, when building out websites. This layout consideration has to do with both the increased standard in screen resolution and the newly supported min-width CSS attribute.

New websites were being designed for 1024px by 768px screen resolution. With the lower resolution of 800px by 600px no longer being considered a priority for a majority of sites, many developers failed to notice a minor oversight in coding practices, that was being exploited by the inclusion of min-width support.

This oversight relates to how browsers set the default for the element. By default, is given a width of 100%. When a web page with a canvas area greater than the width of the browser window is viewed, the content of that page is forced to go outside of this 100% width. This can cause some unsightly and unpredictable behavior in how the page is rendered. The result of this oversight will vary by layout, but under certain situations this can cause some usability problems. For example, if you have white text on a dark background and that background color does not cover the full width of the canvas, the text in that area would then be illegible.

Refer to the examples below. And please note, I am in no way trying to criticize the developer of this site or the company. I merely needed an example to demonstrate what I am referring to. I have seen this problem on many sites, by many very talented web developers, developers who I admire and and inspired by.

Website (Rendered Correctly)

Website (at 800px by 600px) showing issue

A simple solution

If you haven’t already guessed, the solution is extremely simple. All you need to do is define a min-width for your element, presumably at the width of your canvas.

html {min-width: 960px;}

Are we there yet?

Jeremy Anderson — Mon, 01 Sep 2008 19:53:41 +0000

We must be getting close. I can almost taste it. Is it time to say au revoir, to IE6?

the tennis ball hack

Jeremy Anderson — Sat, 15 Mar 2008 20:15:02 +0000

There are times when you wish there was a clean, elegant way to go about a thing and there are times, as we all know, when this just isn’t possible. Such, is my state of mind at present. We all know what it’s like to take something that is beautiful and clean, and have to bend and contort it to work in environments it really shouldn’t be subjected to. Such is the peril of the web designer and developer. And such is the profound necessity of standards.

In times like this, I can’t help but wish we, as designers and developers, had something for our practice, akin to the good old tennis ball hack.

Without a doubt, I’m ranting about Internet Explorer. I know, it’s a tiresome subject, but we, nevertheless, exhaust countless, valuable hours contending with the legacy Microsoft left behind.

I won’t blame Microsoft, entirely, for the recent neglect I’ve shown this blog. I’ve been buried in the final preparations, for the launch of the colossal project I’ve been working on for the past months. At the end of this stretch, starting in October of last year, and after roughly a dozen meetings and 160 odd, independent email strings, I think it’s understandable how spending the last 5 hours and 15 minutes trying to figure out why Internet Explorer would not except ‘click’ events and in the end discovering a simple switch to a ‘mousedown’ event worked fine, had me little feathers, a wee bit ruffled.

Don’t get me wrong, I was ready to cry like a little girl when I happened upon this senseless solution, but I’m not the type to easily let things go, not understood. So is life with IE.

The funny thing in all this, is I couldn’t stop thinking about the brilliance of the tennis ball hack and how wonderful it would be for us developers facing off with Internet Explorer, if we had a similar, beautiful solution to IE short comings. The fact, however, is that we are the tennis balls to the IE walker, in this equation.

Unlike our gainful pursuits in web standards, the tennis ball hack has not enjoyed the same glint on the horizon. In fact, rather than improve the design of the walker, as to not require the cannibalized tennis ball, companies have bloomed to capitalize on this age old hack and take something away from the masses and a stab at the beauty of accessibility.

Alas, the parallels with Internet Explorer and the web design community are uncanny. I digress. It’s a beautiful, chilly day in San Francisco and I am off to try to catch the end of Preemptive Media’s presentation on Air, at Southern Exposure. Enjoy the weekend, and if you have a chance, pick up a can of tennis balls just for fun. You never know when you might need to erase black scuff marks from the tile or rescue your keys from inside your locked car.

Got Layout?

Jeremy Anderson — Mon, 26 Nov 2007 12:00:16 +0000

* html body {display: none;} … I haven’t figured out why some think this hack is discriminatingGeorg

position: relativity

Ever wonder why applying a position: relative to an element in Internet Explorer can fix bizarre rendering problems? The standing theory, which is also a highly technical one, is that sometimes you just need to remind IE that things need to flow in their natural order. As logical as that may sound, the problem really has to do with a little thing called hasLayout.

display: none inline-block

This is not a new cat, nor a new bag, for that matter. Web designers have long been plagued with the rendering inconsistencies offered up by Internet Explorer, such as the peek-a-boo bug. Each of us, individually and as a community, have mapped these inconsistencies out and made record of them in our own bag of CSS tricks. None-the-less, IE still proves to be the most loathsome part of the job for many.

Though IE7 has made some pleasing improvements over it’s predecessors, it’s still a pitch or seven away from being adequate. So, I was very excited when I found On Having Layout, an on going project focussed on understanding IE’s proprietary “Layout” property and how it is messing up our world.

hasLayout = true

Ingo Chao, one of the editors on this project has a background as a clinical physician as well as an editor. The clinical side definitely comes out in this article. It’s a comprehensive, well articulated study into “what the hell is going on with IE”. If you know what CSS is, you should read On Having Layout.

hasLayout = false

The concept of “Layout” as a property, is something only to be expected from Microsoft. And, as you see by following the link, if you are using Firefox at least, the Microsoft Development Center official resources for this strange little property are anything but laid out well.

Controlling Presentation with Measurement and Location Properties in Quirks Mode . . . umm?

A Definition of hasLayout

Just as some people have character and others, not so much, according to Internet Explorer, so too do some elements in html have Layout and others, not so much. Because IE applies a seemingly arbitrary discrimination over it’s elements, we are tasked with stamping out a multitude of rendering bugs, when we write code.

So what is Layout and how can I get me some?

“Layout” is an IE/Win proprietary concept that determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events.www.satzansatz.de

Layout is irreversibly triggered by CSS. hasLayout for elements can either be set to true or false. Some elements, such as , ,

and appear to have Layout by default. While others can be given Layout by applying select CSS properties, such as position: absolute, float: left|right and display: inline-block.

Unlike other proprietary CSS for browsers, there is no layout property to declare and we are forced to interact with it in this very indirect way.

Spilled Milk

The hasLayout stumbling block has affected all designers and coders in their attempts to cross-broswer their work, and will continue to do so, to be sure. Its’ unusual nature can upset the rendering of boxes, as well as their children. As indicated in On Having Layout, consequences of an element having, or not having layout can include:

Many common IE float bugs.
Boxes themselves treating basic properties differently.
Margin collapsing between a container and its
descendants.
Various problems with the construction of lists.
Differences in the positioning of background images.
Differences between browsers when using scripting.

These Bugs We Know

Anyone who has laid code for the web is well aware of IE rendering bugs. The work Holly Bergevin, Ingo Chao, Bruno Fassino, John Gallant, Georg SÃ¸rtun and Philippe Wittenbergh have put into creating this reference text is something every developer can benefit from and it could end up saving you considerable, hair-pulling time.

web factory

Jeremy Anderson — Thu, 21 Jun 2007 05:51:23 +0000

Delivering under tight deadlines is pretty much what you’re in for, if you’re a web designer. Knowing how to handle it, is what will make you a designer of the web. As many times as I’ve wanted to pull my hair out with unrealistic deadlines and “last minutes”, I also get my adrenaline fix out of it (not that I care to share this with clients ~ these are invisible pixels). I’m guessing, if you’re a web designer, you’re with me on this (don’t worry, you don’t have to admit it out loud).

Well, being as much a junkie as the next developer, I’m the first to to admit there is a limit. So here are some simple tips for how to manage your time so that the next time you get that “I needed it yesterday” call, you can calmly deliver in 3 days (seriously, nothing takes less than 3 days, whatever the task). When all is said and done, your 1 hour rush project is going to occupy you to some degree, over the next 3 days. Accept this. Plan for it. It will make your life less stressful.

That being said, a 3 day rush is almost unheard of. You’re probably looking at something that will take 2 or 3 weeks at least. So what can you do to help reduce the time you need to spend and squeeze this extra project into your schedule (and produce something that doesn’t suck)?

topside down

The war was on. Time was short. And on May 6, 1918 Congress set the rate for air mail postage at 24¢. In a mad rush to beat the inaugural flight on May 15, the fine artists at the Bureau of Engraving and Printing produced the finest example of rushed product ever. But don’t think you’ll be so lucky. In fact, the USPS was frantically trying to reacquire the 100 out 2 million air postage stamps that went out inverted. Turned out to be one the most lucrative mistakes ever.

So, you may have noticed the changing logo in the header. It’s not entirely related to this post. It’s an ongoing project I starting when I first published repeatPenguin. Though making time for it is at the very least, challenging, the idea is to continuously add to the header logo throughout the year. I’m keeping a record of the variances in the graveyard.

the seat of one’s pants

That’s not the way things work for web designers. Mistakes are generally considered bad. You can’t avoid them entirely, but if you cut the fat out of your process, you’ll have that extra few moments to QA, and that can be the one thing that lets you hold tight to your sanity.

Systems will save you. I still struggle with this every day. The hardest thing in web design is managing. Prior to starting my own design firm, I was fortunate enough to work in variety of outfits, from design lackey to creative consultant to managing my own team of designers. Each place I worked, I learned something new, got a little bit more proficient. That said, I still find myself flying by the seat of my pants nearly every day.

The tricks that have helped me a great deal fall into 2 categories. The first being organization.

Having systems in place will earn you your wings. Have a system. From naming files, storing files and managing time lines.

These tasks should be wrote. You don’t want to waste your time looking for emails, hunting for files or saving out file versions. There are loads of tools out there to help you. Personally, my life depends on two. First, Office Time and Gmail. Between the two, I can track my hours (very important) with the click of the mouse and find all my correspondences. Throw in Google Calendar and you’ve got the basis for a business.

The second category could be labeled quite simply “don’t reinvent the wheel.” This is where we can talk about frameworks. I’m not talking about prefab templates. I’ve never found them very useful and if your goal is to become a stronger designer/developer, I don’t think they are very helpful. Rather than templates, I’m talking about usable frameworks. We’ve all seen frameworks for Javascript, PHP, Java and so forth. They are designed to serve as a set of tools and libraries to assist in conventional tasks. If you apply this thinking to CSS, you can save yourself a lot of work.

Every project I’ve worked on, there are basic style sets in common. I have always preferred keeping all my CSS in one document, thus limiting server hits and giving myself a visual cascade I can see all at once. Clearly commenting your styles and using a standard naming convention goes a long way.

if it floats (your boat)

Stick to what works for you. In the midst of writing this article, I came across this brilliant article by Jeff Croft on ALA. Go figure. But he hits on some great points on this topic, if you want to pros and cons. Me, I’ve found a single CSS file with clearly marked code works best. I have a core framework CSS files, that zeros out all the browser defaults and sets up all of my globals and typical architectural classes. This is just a framework, I haven’t actually applied style to any of it. This step gives you a leap into the next project. You can start with something clean and organized, right off the bat.

keeping sane ~ web design tool box

Jeremy Anderson — Sat, 26 May 2007 22:20:09 +0000

Life under fire has been getting the best of me lately. If there’s one thing I learned doing web design, is that you have to be able to deliver your best under pressure. And more importantly, you have to know how and when to still make time for yourself. I wouldn’t think about complaining about too much work. It’s the best thing a designer could ever want. But when it comes down to it, sanity is more important. On top of that, if you work with the person you’re dating, it becomes all the more important. This is why I’m starting a series on keeping sane, in web design.

Oddly enough, one of the things that helps me is surfing the web. I know. Last thing most designers would want to spend their down time on. So, I’m starting things off with a few notable finds.

Clean CSS

Clean CSS is a powerful CSS optimizer. It works by taking your CSS code and making it cleaner and more concise. It works by automatically merging same CSS selectors and properties and returning clean, well-formatted code. It’s not a validator, but it works surprisingly well.

Typetester

The Typetester is an online application for comparison of the fonts for the screen. Itsâ€™ primary role is to make web designerâ€™s life easier. They keep their database up-to-date. It’s a great little tool.

cl1p

Every wish you could Copy something on one computer and Paste it on another? cl1p allows you to do just that. Copy and paste from one computer to another. It’s a pretty simple concept and I love it.

what’s special about this number

This is for the geek in me. What’s special about numbers, is all about numbers. ‘Nough said.

friends of PNG

Jeremy Anderson — Sat, 14 Apr 2007 17:57:18 +0000

Alpha PNG Backgrounds in IE

In the process of redesigning a site for a client, I stumbled into my long lost, woeful friend PNG. Actually, I shouldn’t be so hard on PNG. We all know who’s fault it really is. There are a ton of sources out there, offering solutions for the IE bug, but I needed something a little more comprehensive and involved a little less leg work.

My research led me to numerous sites, offering solutions to my PNG woes. Most of which either built upon or reiterated the techniques Michael Lovitt discussed in this article, way back in the day.

For all the of the progress we’ve seen with IE7 (which DOES support transparent PNGs), we’re still left with the fact that it’s just a carrot dangling on a stick for a while more. We still have to deal with its predecessor and thus, I needed a clean solution that would do the leg work for me.

Ping back PNG forward

To start with, there is a very simple solution to get IE6 to properly render transparent PNGs, using the Microsoft AlphaImageLoader. For simple tasks, I prefer to do this strictly using CSS and an IE6 conditional statement.

/* IE6 PNG transparency FIX {--MEH!--} ----*/
* html #nav ul li {background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader »
(src="http://www.domain.com/img/myPNG.png", »
sizingMethod="scale");}

(Line wraps are marked » -Ed)

This method of handling PNGs usually does the trick, for simple application. It’s concise and easy to implement. On an individual basis, it’s perfect. I should mention, there are two ways you can define your sizingMethod. The first, “scale” (shown above), is perfect for some repeating background images. There is a drawback. It works great for 1px by 1px images and 1px images for x or y repeats, but for tiling images you get some unappealing distortion happening. The other value for sizingMethod is “crop”. This is for non-repeating background images.

the All-Around PNG

This time, however, I needed something that would do a little more of the leg work for me. I needed something that would handle all of my PNGs at once. I stumbled across this article by John Labriola, which proved to be the best solution for my needs. He worked off of a solution Drew, of All in the Head and came up with a stream lined approach, using minimal JavaScript. Check it out.

Based on sleight he uses a simple function that loops through document.all to find all of your background PNGs and fix them. You can download his updated version of bgsleight.js here.

Better dropdowns and hidden divs, using transparent PNGs

Now you’ve got all you need to make sexy dropdowns, hidden divs, icons and whatever else you come up with.