Overcoming Those Annoying CSS Bugs

There are a number of different browsers that you must compensate for when designing your webpage's in any format (CSS, tables etc.), some of the most common browsers are : Internet Explorer 6/ 7, Firefox and Safari. The main issues that arise with CSS design is that all browsers interpret CSS differently, for example Firefox does not understand some of the CSS commands that Internet Explorer does and vice a versa.

One of the main issues I have found when designing with CSS is a problem with margins in Internet Explorer 6. I found that when using a float on a div tag that also had a margin set, the margin would actually double and then knock the whole pages layout out. After numerous late nights and an insane amount of coffee I finally found a solution to this double margin bug. By inserting a simple line of code the double margin no longer double ! That solution is as follows, by adding this line of code to your CSS div tag 'display: inline'.

Another problem I have found with CSS in Internet Explorer 6 is a problem when trying to define a div tag that has a smaller size than the base font size. This problem again can be fixed with a simple line of code this time all we need to add is the following line of code to the div tag: 'font-size:0px'. There is also another solution to this problem that should have the same effect, because the div tag auto stretches to compensate for content overflow adding 'overflow: hidden' should also resolve the problem.

Unfortunately I have been unable to cover all of the cross browser issues that you may experience when designing with CSS, but most of the problems that you may encounter can be resolved pretty easily with simple trial and error. Happy designing!