As a beginner, I'm facing a rather embarrassing situation here. Picture me banging my head on the table level of embarrassment... but let's give it a shot anyways. I've got a navigation bar and an image underneath (not behind). Both seem to be working fine individually. However, when I add absolutely positioned text on top of the relatively positioned image, suddenly my nav links stop working, except for in IE - go figure. If I remove position: relative from the box div, the links start working again. It seems like some clash between float and relative positioning is causing this issue... fairly basic stuff... Help me, please.... Is there a workaround for this? Here's some code snippet.
<ul id="nav">
<li><a href="a.html" title="a page">a</a></li>
<li><a href="b.html" title="b page">b</a></li>
<li><a href="c.html" title="c page">c</a></li>
<li><a href="d.html" title="d page">d</a></li>
<li><a href="e.html" title="e page">e</a></li>
<li><a href="f.html" title="f page">f</a></li>
<li><a href="g.html" title="g page">g</a></li>
</ul>
<div id="box">
<img src="images/image.jpg" alt="image">
<p id="box2">
text text text text text
</p>
</div>
css:
#allcontent {
width: 910px;
margin-left: auto;
margin-right: auto;}
#nav {
float: left;
margin: 0;
padding: 0; }
#nav li {
float: left; }
#nav li a {
display:block;
width:130px;
background-color: black;}
#nav li a:hover{
background-color: red;}
#box {
position: relative;}
#box2 {
position: absolute;
top: 300px;
left: 0;
color: blue;
background: black;
width: 250px;}