I'm creating a menu with text sat on top of thumbnail images.

For various layout reasons, I've had to set the font-size of the parent container element to 0 (the space taken up by the container appeared larger than the image otherwise).

The problem is, I then can't set the font size of the text within it using em units - it seems I have to resort to px values instead (as 1em = 0). I'd rather not use explicit px values, as I'm trying to code an adaptive layout.

Is there any way of ignoring the parent container element's font-size when it comes to the text, or perhaps relating it back to the main document?

HTML code:
<div class="sect_thumb_container"><a href=""><div class="sect_button"><img src="images/work01.jpg" /><span>Title Text</span></div></a></div>
.sect_thumb_container {
	width: 50%;
	float: left;
	padding: 0;
	margin: 0;
	font-size: 0;

.sect_button {
	font-size: 0.75em;
	font-weight: bold;
	margin: 1px;
	background: #262626;
	color: #FFFFFF;
	text-align: center;
	height: 100%;
	padding: 0.75em 0;

.sect_button img {
	max-width: 100%;
	height: auto;
	width: auto\9;

.sect_button span {
	width: 100%;
	font-size: 1em;
	color: #FFFFFF;
	background: #000000;
	padding: 1em auto;
	z-index: 10;
	position: relative;
	bottom: 0;
	height: auto;
In the case above, the .sect_button_span font-size of 1em equates to 0, thanks to the parent (sect_thumb_container) setting font-size to 0.

So is there anyway of setting it back (ie so 1em relates to the main body element instead?)

I hope that makes sense!