An easy thing such as CSS can become a total nightmare due to differences in browsers. IE does not play by CSS standard rules very well either. Especially in earlier IE versions, you would have to resort to Javascript or ” IF(IE) ” statements, but luckily since IE 8, things have gotten a little better. Chrome does a decent job at CSS and I rarely have any issues with it, compared to IE. If it sounds like I’m trying to gang up on IE, I am. Not everything is IE’s fault, but I’m sure it was the cause of many destroyed braincells…

These are just a few of the annoying issues that you may come across when using CSS when trying to make all browsers look the same:

Padding/Margin issues

IE padding

IE has default body margins and padding. This can be an EXTREME problem when you work with a lot of divs that are absolute(free floating). I personally use absolute divs for floating graphics exactly were I need them and even a one pixel difference can kill the illusion of seamless graphics. In order to solve this, you must create a ” body ” in your CSS and make all margin and padding attributes 0px in order to make IE like Firefox. Also state all margins and padding in all divs you create to avoid padding and margin issues when nesting divs in each other. Another tip is DO NOT use padding to move divs around, only margin. Reserve padding to text and html images only.

body
{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

Cerntering Issues

Centering Issue

When you attempt to use the HTML “center” tag around css divs, you will notice that in IE, the div goes all the way to the right, so it half works, but in Firefox…nothing happens. You could simply add ” text-align: center; ” to the body through CSS, but Firefox doesn’t see this. You could add ” margin:0 auto; ” to your main wrapper div, but IE doesn’t recognize ” auto ” . The best thing to do is to add both.

-Add text-align: center in your body for IE
-Add margin:0 auto; in a main page wrapper for Firefox
-Create a content div and make it 100% in width and also text-align: left; so that everything inside is left aligned.
-DO NOT use “center” tags with CSS EVER

body
{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
text-align: center;
}
#wrapper
{
width: 1100px;
height: 500px;
margin:0 auto;
padding:0px 0px 0px 0px;
text-align: center;
}
#content
{
width: 100%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
text-align: left;
}

After this, just place your page in between the wrapper and content divs in your HTML body.

Flickering hover images in IE

Firefox seems to not have any issues, but in IE, when you hover over button graphics that change, you will see the graphics disappear, then reappear to the new graphic. Since I’m an artist, I want my stuff to look clean and this will just not do! For this, the best thing to do is only have one graphic, then just move the graphic x/y position.

#button1
{
width: 100px;
height: 20px;
background: url(‘image.png’) no-repeat;
background-position: 0px 0px;
}

#button1:hover
{
width: 100px;
height: 20px;
background: url(‘image.png’) no-repeat;
background-position: -130px 0px;
}
This creates a smooth transition between two button instances by moving the image to the left 130px to show the next frame.

IE does not change cursor when hovering over CSS

Hovering cursors

This can be a pain because it confuses people. This was especially annoying to my last boss so I had to search a way to fix this. It’s actually a very easy fix!

All you need to do is add ” cursor: pointer; ” in your hover block and it should be just fine! The alternate way is to simply add the ” !DOCTYPE HTML ” tag before all of your HTML stuff.

Hovering Doesn’t work in IE

This was a pain as IE didn’t recognize css hovering unless you made it like ” #button a:hover ” but even so, you still had to add other attributes like a:active / a:link/ a:visted and these had to be in the correct order as well. Luckily just adding the ” !DOCTYPE HTML ” tag at the very top (before HTML code) allows IE to see ” #button:hover ” like Firefox and chrome can!

Padding-Right is broken

Right Padding Broke

This can be a big pain as text flows out of a css div. I noticed that this happened as well when I added ” !DOCTYPE HTML ” to my page. Realized it was because it needed to be in a different format.

Instead of:
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

USE:
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;

Also it’s a good idea to state width in every div that uses text!

I know that I have not covered all of the CSS issues, but hopefully these tips may help anyone who is delving into the world of CSS and realizing it’s a pain!