5 CSS Tricks to Avoid Cross Browser Issues

5 CSS Tricks Every Web Designer Needs for Cross-Browser Compatible Design

Every web designer knows that feeling of anger and frustration..

Also Check: Top 5 CSS3 Best Tips And Tricks

---

You spend hours, days, weeks meticulously perfecting your website's CSS styling. Leonardo da Vinci himself couldn't have created a more beautiful canvas. It's just perfect. And then... out of curiosity... you open the page in Internet Explorer. Everything's ruined! Your nav bar is on the wrong side of the page, there's overlapping text everywhere, your hover effects are malfunctioning, pictures of Dracula and Hitler have replaced your bio pics. It's a nightmare, and it's one that we've all had.

Always Do These To Avoid Cross Browser Issues and Cross Browser Errors

[sws_yellow_box box_size=””] *Disclaimer: This isn’t going to make everything flawless, but it’s a damn good start. Also, I’m not including anything for Stupid IE, but these tips will still work with version 8 and above… maybe. [/sws_yellow_box]

1. Prefix css3 styles

If you’re using any type of modern CSS snippets, like box-sizing, or background-clip, just make sure that you use the appropriate vendor prefixes.

[css]-moz- /* Firefox and other browsers using Mozilla’s browser engine */
-webkit- /* Safari, Chrome and browsers using the Webkit engine */
-o- /* Opera */
-ms- /* Internet Explorer (but not always) */ [/css]

---

2. Use a reset

You can use normalize.css or just a simple reset found anywhere on the net. Here’s the one I use and it’s from the Genesis Framework Style Sheet.

[css]html,body,div,span,applet,object,iframe,h1,h2,
h3,h4,h5,h6,p,blockquote,a,abbr,acronym,address,
big,cite,del,dfn,em,img,ins,kbd,q,s,samp,small,
strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,
dd,ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
embed,figure,figcaption,footer,header,hgroup,input,menu,
nav,output,ruby,section,summary,time,mark,audio,video {
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}[/css]

---

3. Avoid padding with widths

When you add padding to an element with a width, it will end up much larger than what it should be. The width and the padding will be added together. So, if I have an element with the width of 100px, and I add a padding of 10px to that same element, then the awkward browser behavior will make that element 120px.

To fix that, add this to everything that you do from now on:

[css]* { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; }[/css]

---

4. Clear your floats, always!

Make sure you clear your floats! If you don’t clear your floats, things will start acting weird. To learn more about how floats act on browsers, check out this article from Chris Coyier.

To clear your floats, use this snippet of CSS:

[css]
.parent-selector:after {
content: "";
display: table;
clear: both;
}[/css]

If you wrap most of your elements, a really simple way would be to add this to your wrap class.

[css].wrap:after {
content: "";
display: table;
clear: both;
}[/css]

Now your floats should be cleared.

5. Test it out!