Glad to have CSS Hacks. It always frustrates me when I am working on a new layout, I code it, I validate it, then I look at it in different browsers, and their is a slight problem. I found two today working on a new design. Luckily I was able to find an easy answer, but frustrating none the less. I think all of us web designers are looking forward to the day when all browsers handle CSS the same way. Anyway, here were the problems:
Borders:
I hadn’t realized it yet, but mozilla has a problem with borders. My div code looked like this:
[quickcode:noclick]
IE explorer handled this fine. They made the div only 150px wide, with a left border of 7px; Firefox had other plans. They made the width actually 157px, by adding the left border width to the total width. I new firefox did the same things with paddings and margins, but borders was new to me.
Solution:
For a quick workaround, I assigned the div to a CSS class id, and made a hack for mozilla. So when I was finished, my code looked like this:
[quickcode:noclick]
#Problem {border-left: 7px solid #006699; width: 150px}
/* Mozilla Hack /*
*>#Problem {border-left: 7px solid #006699; width: 143px}
It worked like a charm. The other problem I had, was a mistake on my own. However, I found it interesting that IE still processed it correctly. However, Firefox choked. Basically, in a style within a span, I put for the font size and color:
[quickcode:noclick]font-color=#999999;font-size=10[/quickcode]
For some reason I put equal signs instead of ” : ” . However, I didn’t recognize the problem because I was debugging in IE. When I switched to FireFox it was a disaster and I couldn’t figure out why.
Another day of lessons learned.