Huge Text Inside Tables on IE5/5.5 | May 14, 2004

It's been known for quite a while that IE5/5.5 ignores text sizes applied to the body tag, inside tables. Doing a search on this issue comes up with a few solutions, mosty involving the use of IE5/5.5 specific hacks. However there is a much, much easier solution. Simply set the font-size for tables to 1em.

body {
	font: 76%/1.6em Verdana, Arial, Helvetica, sans-serif;
}

table {
	font: 1em Verdana, Arial, Helvetica, sans-serif;
}

It's neither clever or sexy, but may be of use to somebody.

Comments (9)

CSS Crib sheet #3 - Centering a Div | February 4, 2004

I often see people posting on CSS discussion lists to ask how to centre a div. It's actually very simple, although you need to use a few hacks for unruly browsers.

body {
	text-align: center;
	min-width: 600px;
}

#wrapper {
	margin:0 auto;
	width:600px;
	text-align: left;
}

To centre the div, simply set its width and then use margin auto on the right and left hand sides. Unfortunately this doesn't work in IE. However luckily for us, IE also misinterprets text-align: center. Applying this to the body centres the div in IE. However it also centres the body text in all the other browsers as well. To get round this you need to use text-align: left; on the div that you're centering.

This gets IE up to scratch. However this is the step I always forget. In Mozilla, if you reduce the size of the browser window, half of your centred div hangs off the left of the page. This is an odd one, but I've been reliably informed that it's the correct behaviour. To prevent this, just set a min-width on the body tag.

Comments (27)

CSS Crib sheet #2 - Clearing Floats | December 18, 2003

When floating elements it's fairly common to add an element to your document who's sole purpose is to clear the preceding float.

In a site I'm currently building, our developer added a <br class="clear" /> element to do this job. It worked fine in Safari but in IE/Win it would only clear the preceding float, not all the floats.

I thought the problem was down to the fact that the <br /> was inline, so a changed it to block. However it still didn't work in IE. It would have been nicer semantically to have been able to use a <br />, however in the end I resorted to using a block level element. We actually used a <p> containing a &nbsp; but normally I'd do this:

.clear {
  clear: both;
  height: 0;
}

<div class="clear"><!-- --></div>

Which has the added benefit of leaving no vertical space. something which can be quite important in certain layouts.

Comments (13)

CSS Crib sheet #1 - Gaps Between Vertical Nav Elements in IE5 | December 18, 2003

OK, I know the crib sheet idea isn't original but I've decided to start posting my own little CSS aid memoirs.

I do quite a bit of CSS development but always find myself coming across the same few silly little problems. Reading lists like CSS-Discuss, the same questions pop up time and again, so hopefully these posts may help out others as well.

My first crib sheet problem is a simple one. When creating a typical "Left Hand Menu" using Styled lists, whitespace appears between the nav elements in IE5. To fix this problem, simply set the containing li element to be inline.
If your anchors don't already have a width or height you'll need to apply one or the other to make sure IE creates a block box.
Here is an example of the CSS for a typical "Left Hand Menu" using a styled list:

#nav {
	margin: 0px;
	padding: 0px;
	text-align: left;
	list-style: none;
}

#nav li {
	display: inline;
	margin: 0px;
	padding: 0px;
	width: 142px;
	list-style: none;
}

#nav a:link {
	display: block;
	height: 14px;
	margin: 0px;
	padding: 0 0 0 10px;
	border-top: 1px solid #fff;
	font: bold 10px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
	background: #97A5BF;
	text-transform: uppercase;
}

#nav a:hover {
	text-decoration: none;
	background: #4E5F7E;
}

Comments (8)