The most sane way to develop CSS based websites is to start off by importing a reset CSS file. That way, browser defaults won't show up as random inconsistencies.
Among the key tags to reset are li, ul and ol as Firefox and IE's formatting of these guys is painfully different.
Today, though, I had a site that was rendering legacy content - which expected ul tags to produce actual bullets. At the same time, the site itself was relying on the CSS reset script to render correctly. I scratched my head over this, till I realized the solution: I just needed to undo the reset for the div tag that contains the legacy content.
Dav Glass offers up the clean solution to do exactly this. (And so does Yahoo, apparently).
In the case of the ul tag, the very short answer is to say:
.legacy-content ul { display: block; list-style-type: disc; margin: 1em 0; padding-left: 40px; }
.legacy-content ol { display: block; list-style-type: decimal; margin: 1em 0; padding-left: 40px; }
.legacy-content li { display: list-item; }
No comments:
Post a Comment