Instead of spacer.gif I use:
CSS:.spacer2px{font-size:2px;line-height:2px;}HTML:
<div class="spacer2px"> </div>
Works with <td> as well. We have spacer1px, spacer4px, spacer6px, etc. as needed. Works the same on all browsers, so long as each HTML page starts with the following, which keeps IE from entering quirks mode and makes it as standards compliant as it gets (requires no blank lines until after the opening HTML tag):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
... headers ...
<body>
<div id="page">
... content goes here ...
</div>
</body>We currently have two lines of browser-specific code in the entire application, and they are both in the CSS file:
/* This sets defaults for all elements and helps overcome browser differences */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
/* -moz-box-sizing: border-box; Firefox used to need this */
}
/* Add space for scrollbar on IE 6 so it doesn't obscure the page.
This uses the Commented Backslash Hack so only IE can see this: \*/
#page { margin-right: 16px; }
/* End Hack */Well, that's my recipe that I've been using for 5-6 years now. Tested on IE 6, 7, 8, 9, Firefox 2, 3, Safari 3, 4, Chrome, Opera 9, Epiphany, Konqueror and on Windows XP, Windows 7, Mac OS-X, the iPhone, and Linux (Ubuntu/Xubuntu).
Special thanks to quirksmode.org for probably being the best resource for these kind of details. The O'Reilly CSS: The Definitive Guide and HTML & XHTML: The Definitive Guide books are great for the basic rules.
1 comment:
That's great! Many thanks, I don't have to create gifs like i'm in 1994 now.
Post a Comment