Footer content disappearing

HTML & CSS
1

Footer content disappears when zooming all the way out in firefox 3.5 but not in IE8. Might anyone know why this might be happening? Below is the code I am using:

CSS

.footer {
	background:#2b2b2b;
	clear:both;
	float:left;
	font-size:0.9em;
	font-weight:bold;
	height:11.5em;
	overflow:hidden;
	text-align:center;
	width:100%;
}
.footer p {
	clear:both;
	color:#c1c1c1;
	padding-top:25px;
	width:100%;
}
#footerMenu {
	float:left;
	left:50%;
	list-style-type:none;
	margin: 0 auto;
	padding-top:30px;
	position:relative;
}

#footerMenu li {
	float:left;
	position:relative;
	right:50%;
}
#footerMenu li a {
	background: transparent url(_images/vertical.gif) center right no-repeat;
	color:#fff;
	display:block;
	line-height:1.2em;
	padding: 0 12px;
	text-decoration:none;
	width:auto;
}
#footerMenu li a:hover{
	text-decoration:underline;
}

HTML

	<div class="footer">
		<ul id="footerMenu">
			<li><a href="#">HOME</a></li>
			<li><a href="#">ABOUT US</a></li>
			<li><a href="#">SOLUTIONS</a></li>
			<li><a href="#">SERVICE &amp; SUPPORT</a></li>
			<li><a href="#">OUR CUSTOMERS</a></li>
			<li><a href="#">OUR PARTNERS</a></li>
		</ul>
		<p>Copyright &copy; 2009 SITENAME All Rights Reserved</p>
	</div>
2

Hi, you set a height and even though you do do it in ems, the footer will eventualy get cut off :). Remove the height or set it as min-height.

3

Are you saying to open your code in FF3.5 and then use only zoom out from the initial page load until you can zoom out no more.

I can zoom out in IE8 to where it is no longer readable (to me anyway) but it does not disappear (as you said).

I don’t have FF3.5 right now but FF3.0.11 only lets me zoom out three times. I can zoom in eight times though.

I would think that the user would have enough sense not to zoom out where they could no longer read the page, I could be wrong though.

4

min-height did the trick RyanReese, thank you so much for your help.

5

Out of curiosity, how many zoom outs does FF3.5 allow you to make from the initial page load? Ryan?

6

Be sure to feed IE6 the height property (Since it doesn’t understand min-height)

  • html #element{height:11.5em;}

If I do CTRL+(scroll the mouse), then at 6 it STARTS to cut off (half of it cut off). Though I do agree it’s absurd anyone would zoom out that much

Edit:

Misread, it allows as many as I want.

7

I’m sorry I gave wrong information.

CTRL+mouse doesn’t zoom out.

CTRL and - zooms out, and 3 was the maximum. However doing hte ctrl+mouse I still got hte results to fix the problem

At 3 it cut off

8

>At 3 it cut off

Hmm, It looks like FF3 has a formula of about twice as many zoom-ins as zoom-outs.

With this snippet below I can zoom-out 5 times and I can zoom-in 8 times.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<style type="text/css">

div {
width:8em;
height:8em;
margin:2em auto;
background:lime;
}

</style>
</head>
<body>

    <div>zoom me in and out</div>

</body>
</html>