   [web] CSS Height
  I'm trying to create a simple menu bar with CSS. The problem I'm having is that the background is being displayed with a height of 0 if I've only got <a> tags in it. If I put some text inside it without any tags, the background bar resizes correctly. I should say that it seems to work fine in Visual Studio, but not in Internet Explorer, so I'm inclined to thinkg it's IE that's at fault. But I'd like it to work in IE.CSS:/* Main page body */body{margin: 0px;background-color: #ffffff;border: 0px solid #000000;position: absolute;top: 0px;left: 0px;height: auto;width: 100%;z-index: 1;padding: 0px 0px 0px 0px;}/* Menu bar styles */#menu{margin: 0px;padding: 0px;border: 1px solid #000000;background-color: #C0C0C0;width: auto;}a.menuoption{padding: 0px 5px 0px 5px;margin: 0px;border-style: none solid none none;border-width: 1px;border-color: #000000;width: auto;float: left;position: relative;cursor: pointer;}HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>    <head>   <title></title>   <link rel="stylesheet" type="text/css" href="stylesheets/main.css" />    </head>   <body> <!-- Page header -->   <div id="pagehead"><!-- Title logo -->  <img src="images/global/title.jpg" alt="" /><!-- Menu bar -->  <div id="menu">    <a class="menuoption" href="link1.html">Link1 </a>  <a class="menuoption" href="link2.html">Link2 </a>  <!-- Adding in any text will make the bar resize to fit it, but it doesnt resize when there are only the links above. E.g. Uncomment the text below to see the difference --> <!-- Test -->   </div></div>  </body></html>
  Add an element (e.g. a div) at the end of the menu that has a 'clear:left;' (or 'clear:both;') CSS element. The links do not take up any height in the menu, because their position is relative. Removing 'position:relative' fixes the problem in IE, but firefox needs the 'clear:left' solution.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>    <head>   <title></title>   <link rel="stylesheet" type="text/css" href="main.css" />    </head>   <body> <!-- Page header -->   <div id="pagehead"><!-- Title logo -->  <img src="images/global/title.jpg" alt="" /><!-- Menu bar -->  <div id="menu">    <a class="menuoption" href="link1.html">Link1 </a>  <a class="menuoption" href="link2.html">Link2 </a>  <!-- Adding in any text will make the bar resize to fit it, but it doesnt resize when there are only the links above. E.g. Uncomment the text below to see the difference --> <!-- Test -->   <div style="clear:left"></div></div></div>  </body></html>