Subscribe To RSS Feed

Amber Taylor's SharpBlog

IE Is My Nemisis – Adventures in Hack-land

Posts Tagged ‘html’

Web Design “Best Practices” for Print Designers

- Friday, March 12th, 2010 -

Over the years as a designer and web monkey, I have witnessed the situation where a print designer creates a website. Not understanding the technical limitations, and other nuances of this medium the print designer usually creates a layout that has technical issues that the developer has to code up. In the case where the designer does it all, the websites mark up usually has many issues that impact, S.E.O., usability, accessibility and a host of other problems. The web is a relatively new medium to design for and always has some new way to do something, but that being said it is now time for print designers to come up to speed with the web.

I would like to note this is just a starting point and there are a lot of points to cover, some that won’t make it into this post and multiple posts will follow. If you have something to add please fell free to leave a comment.

For the Print Designer Creating the Design and HTML

  1. Don’t Export HTML from Photoshop
    I have seen this time and time again, and with the “occasional” exception of HTML emails, this is not what you should do. There are multiple issues with this method of creating web pages. First: The search engines (and site visitors) only see big pictures held in place by a convoluted set of tables. The web’s purpose is to present multiple types of content on a page like images, body text, headlines, lists, video, flash, and all kinds of media. when Photoshop creates html it sticks all of your design’s text into images which essentially hides the content from the search engines. Also by using tables to hold the page together it obstructs the mark up and makes it harder for search engines to find any text on your pages (if there is any). Some may say “We’ll just add alt tags with the content”. Alt tags are for image descriptions not body copy or any kind of content. This still hurts you page rank. if you have not learned enough to code up your own page yet, build your site in Dreamweaver’s design mode. This will get you started to bridge the gap and eventually be able to code your own html, and css.
  2. Tables are Tables, not Div’s
    Tables used as structural elements on the web page had their day when CSS was far from being implemented. However CSS is here and it empowers the designer to new levels. Where do you use tables? When the deign has a data table of course. One thing that really helps to code up pure css designs are CSS frameworks like 960 and Blueprint. They have PSD and IA templates to help design as well as HTML generators to make your life easier.
  3. I Don’t Know How To Code HTML and CSS
    It is time to learn, the future is the web, heck the present is the web! It is really not that hard once you get going, there are a million places to learn on the net. Here are a couple of them:

Tags: , ,
Posted in Design, Resources, css, html | 2 Comments »

IE Hack – Hide Text on your Submit Buttons

- Sunday, February 1st, 2009 -

A New Way To Style Your Buttons

Recently, I designed a website and I decided to do a unique style on the search field. I added a background image to the input field and then a background image to the submit button. Everything looked great until I viewed it in Internet Destroyer (Internet Explorer). That’s when the sky fell on my head…as usual.

The Issue:

I was not able to hide the text from the button, letting the underlying image to show it’s text. Normally my preferred image replacement technique is to have text in the background image and then use a negative text-indent at a high number like this:

background-image: url('my-picture-with-text.jpg');
text-indent: -9999px;

This works fine with submit buttons on most browsers, except IE.

The fix:

Add 2 extra lines to your css file:

color: transparent;
text-transform: capitalize;

For some reason the text indent doesn’t work by itself in IE, so after adding these 2 lines it works. It is a hack within a hack though, the color:transparent property should work by itself, but it doesn’t. For some odd reason setting the text-transform to anything (in this case I chose capitalize because I don’t use it very often) makes it magically work. Anyhow if anyone finds this useful please leave a comment below.


Thanks to a comment by Chris Mahon I learned of another (better) method for hiding text on your submits. Instead of adding color: transparent; and text-transform capitalize; (the above method) add the lines below. The above method can mess up layouts where lots of absolute positioning is happening on the page. Thanks again Chris!

background-image: url('my-picture-with-text.jpg');
line-height: 999px; /* Set it higher than your image height */
overflow: hidden; /* Hide the text */
font-size: 0; /* FF2 doesn’t like the above */

Tags: , , , ,
Posted in Hacks, Tutorials | 35 Comments »