CSS 101: There's always another way
Posted on August 30, 2007. 13 comments.
So your CSS layout breaks in a certain browser (cough IE cough).
Before applying any nasty hack to fix the issue, try to use another CSS technique to achieve your desired look.
For instance, if paddings make the layout break, try margins. If floats makes you pull your hair out, see if you can’t create the same result using absolute positioning. Or just change the way the divs float.
The point is that CSS gives you a lot of options on how to achieve your desired layout. And way too often, people spend a lot of time creating an ugly work-around before trying out every option.
There’s always another way, find it before resorting to hacks.
13 comments
Shahzad Khan says:
That is so very true, I know of so less people that would work all the options before they apply a hack or so !
peace -mE
Darren says:
I make every effort to avoid hacks. All my CSS and XHTML is valid. I hate in-valid markup when many hacks are there to correct mistakes that could be avoided by simply looking at the problem from another angle.
Justin says:
Yes! More people need to realize this. Hacks are dirty dirty dirty and the lazy way out.
Jeremy Curry says:
I found this in my latest site design. I was trying to use a bunch of absolute positioning with negative values, and Internet Explorer wouldn’t play ball. I won’t explain it all - but definitely true… Though it can muddy up your HTML syntax sometimes trying to make your CSS pretty… So it is sometimes a trade off.
Jack Jennings says:
Agreed, I’ve pretty much given up using padding on anything that I need to supply a width (or height) for.
Barney says:
Well said. …And if you have to use hacks (plain and simple IE display bugs), try the simplest and least compromising first.
Today a major project of ours went live. The design was always very ambitious and the price tag for the CSS alone was half of the original budget. After getting my head completely screwed up in the several alternate realities I’d engineered for IE6, IE7 and the rest of the civilised world (when you put the hacks in generally you can see the bigger picture – but then when you try modifying the design later…), I eventually scrapped a good 10K of mind-bending conditional hacked styles, and replaced them with a nice solid {zoom: 1;} rule.
When IE screws you around, before trying anything clever, try something stupid. Try zoom. It may invalidate your CSS, but who cares? Competent designers and any kind of client will be fine with it, only the most unsociable of the standards zealots will have an issue…
Zaigham says:
Hacks are the last resort, not 1st! Thanks for reminding it again.
says:
Thanks for the advice! I’ll try that next time.
farsahd says:
2
porov99 says:
I little update. IE8 is coming out soon, and i heard they have developed a new rendering engine from scratch that is standards compliant. You can download the beta and see for yourself. I hope that soon i wont have to always worry about IE rendering.
dıs cephe says:
thanks..
hekimboard says:
Yes! More people need to realize this.
Yuri says:
“Hacks are dirty dirty dirty and the lazy way out.” I think so too.