Have you ever designed a beautiful website only to find that it doesn’t quite look right across multiple browsers? All browsers are not created equal, and often they have slightly different standards for presenting web pages.
Internet Explorer can put a little margin here or Firefox can put a little padding there, and even the smallest differences can make your life a nightmare if you’re not prepared.
Developing websites without using tables can give a designer an extraordinary amount of control when it comes to how you want to style your design. Unfortunately with all that control comes a greater responsibility to make sure that each element stays in place across every browser that a user might open.
Whenever I begin a new design I always start with this snippet of code at the top of my CSS file.
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,label,div,dd,dt,dl,table,tr,td { margin:0; padding:0; }
This piece of code will save you hours of troubleshooting when your designs don’t quite line up in every browser. By setting virtually everything in your style sheet to zero you take away any browser pre-set functions that might throw things off.
Accessible website development can make both you and your clients happy for a long time, and it pays to stay on top of web standards. Use this code in your next design and see how much easier website development can be.
Alibi Productions is the business side of Drew Stauffer, web designer, developer & SEO in Greenville, SC.
You can read my general bio or get in touch with me through any of the social networks to the left.
BMW
Design, CSS/XHTML
Liquid Pubs
CSS/HTML5, JavaScript
Farm Bureau Insurance
Design, CSS/XHTML
Join the conversation 4 Comments