- Branding / Identities
- Color Theory
- Graphic Design
- Marketing Advice
- Product Marketing
- Search Engine Optimization
- Small Business Marketing
- Social Media Marketing
- Viral Marketing
- Web Design / Development
- 746Our Blog
Headache Reducing Web Design Techniques (or CSS and beyond)
If browsers adhered to accepted web standards, life would be blissful for web designers. But, instead we’re forced deal with the frustration of inconsistent browsers. Fortunately, we struggle en masse, so we’ve aggregated some time-saving web tips & tricks we’ve found useful. We hope they help you as much as they’ve helped us. And we offer a collective thank you to all those who share their knowledge with others.
By default, html elements start with declared margins, padding, font sizes, etc. The goal of a reset file is to override these default settings and reassign neutral values to all elements. These neutral or “reset” values can then be styled as necessary and more logically via subsequent Cascading Style Sheet (CSS) declarations (rules). One of the early advocates of the reset style sheet was Eric Meyer.
As you can tell by the continued rehashing and refining of reset.css files, the debate continues. And while we prefer Eric Meyer’s reset style sheets, you can find numerous others to choose from, including Yahoo’s YUI based reset. Regardless of the source, reset style sheets are incredibly helpful and are immensely popular.
CSS based navigation
Shortly after you’ve begun to format your pages with CSS, you’ll encounter the need to create a multi-column layout. This is where CSS newcomers can quickly get frustrated. Multi-columns are easy to do with tables, but with CSS, you need to learn and understand “floats”. Floats, clearing floats, and how to deal with browser issues related to css-based floats can seem daunting, but if you read a little, and look at some examples, you can quickly gain an understanding of floated elements. Here are some excellent resources.
You’ll be hard pressed to find a cool, modern website today that doesn’t utilize the power and flexibility of PNG’s transparency. Unfortunately, PNG transparency requires some finagling to work properly with Internet Explorer 6 (IE6). And while IE6 is slowly spiraling into thankful obscurity, it still accounts for approximately 25% of the browser space - give or take - and therefore we have to accommodate it’s quirkiness.
In the past, if you wanted to use PNGs in your web design, and wanted it to work correctly in IE6, you had to code in some CSS hacks or apply “IE filters” to your images. This could be annoyingly laborious and fraught with problems. Fortunately, some very bright people developed a down-and-dirty fix that applies universally to images and background images in your document - so we can simply insert their code and our PNGs and not have to worry about IE6. It’s a real time-saver that web designers everywhere are eternally thankful for, I’m sure.
ie7.js library by Dean Edwards
Mar 01, 2009
Additional Posts You May Find Interesting:
We work with large and small companies, but sometimes budgets, schedules, or differences get in the way. There's always the next one.
We're not miracle workers, but we've been known to perform a little magic and help your businesses take off. And we keep working hard.
Our biggest reward is when our clients tell us we've done a good job and thank us for it. And then when they hire us again and again.