So long as there are multiple web browsers in existence, Browser Compatibility is an ongoing challenge that web designers and developers will continue to face.
Testing websites in multiple browsers can become incredibly time consuming, and have you chasing down tiny little pieces of code, just to solve a problem that equals 2px here or 3px there, so we wanted to give you some of our basic tips for creating HTML that renders properly in multiple browsers.
Basic Cross Browser Code Tips
Some of the most annoying cross-browser issues can be avoided ahead of time by applying some basic design elements. While there are more items than what we will cover today, we wanted to give you 3 of the easiest browser compatibility tips that can save you hours of web design drama…
Never Add Padding To Items With A Set Width Or Height
We’re not going to start a big technical discussion about the W3C and the way padding is rendered, and blah blah blah. There are plenty of blogs with full arguments about this topic, so we’re just going to keep it stupidly simple…
If you adding css padding to an item that has a width or height assigned to it, it will render screwy in browsers. Adding css margin is fine, but padding doesn’t render how you want it to if the item you’re assigning it to has a specified width or height. It adds the padding, and “pushes items away” instead of padding them in.
So how do you handle items you want a set width or height and padding assigned to? Assign 2 separate css commands. For example… create a div with your width, then create another div inside of that div that you assign your padding to. Problem solved, and browser compatibility headache avoided.
Specify Your Line-height
Different browsers have different default line-heights for different elements. If you don’t set your line-heights, you’ll have multiple items to chase down, and possibly face major issues with layout alignment. So specify your line-heights, and avoid hours of pulling your hair out.
Read our blog post on CSS Line-height for in-depth information on setting CSS Line-height for better web design.
Clear Your Floats
Depending on the browser you use to code, you may not see the mess an uncleared float is causing below it, but rest assured, there is a browser somewhere displaying the mess. So whether you clear an item in the related css, or you clear with a “clearing div”, just remember to clear, and you’ll avoid layout chaos, and continue happily floating the rest of your elements down the page.
As simple as these tips may seem, making them part of your everyday coding routine can save you what may feel like a lifetime of cross-browser testing stress sessions.
