[RESOLVED] Positioning Problems; Nesting Absolutes and Relatives

[cdp103188]

Ok, so it took me all weekend to identify what my problem was, but now I don't know how to fix it.

On my website (www.hunt-private-land.com) I have the entire body nested inside of a <div class="main"> that refers to the .main in my CSS file. The .main looks like this:

div.main {
position: relative;
left:180px;
top: 210px;
}

I use this to make sure the body does not cover up my background that borders the website. Please see my website if I did a poor job of describing this. www.hunt-private-land.com

Next, before I reworked my website it did not have that .main which means that the website was not nested in a "position:relative;", but now that it is, there is a section of my request form that tweaks out and shows up somewhere that I don't want it. It doesn't happen to everyone, I think only to IE6 users. The link to the problem page is www.hunt-private-land.com/request.php - The portion that does not work is a map of the united states that has checkboxes scattered on top of it. The image and the checkboxes are nested inside of a span that has a position value of relative so that the checkboxes may have an absolute position only within the <span> and not within the body of the website.

This used to work before it was within the div.main on my old website, and still works on a different website (www.north-american-hunter.com/request.php). Now, however, the map covers some of the fields above it, as if it is completely ignoring the div.main and not jogging down that additional 180px. If I make div.main's positioning absolute everything ends up where it is supposed to be, BUT the my background disappears?!

I'm sorry if this is too wordy and confusing, but I am trying to be thorough.

Here is the code for the checkboxes and it's corresponding CSS file.


Checkbox HTML:

<table border="0" class="USAForm">
   <tr>
      <td align="left" class="USATD">
         <span style="position: relative;">
            <img src="files/graphics/imagemaps/unitedstates.gif">
            <input type="checkbox" name="State[]" class="AL" value="Alabama"  <?php if (substr_count($sate,"Alabama")>0) { ?>checked<?php } ?> />
            <!-- Additional checkboxes for each state follow -->
         </span>
      </td>
   </tr>
</table>

Checkbox CSS

.USAForm {
table-layout: fixed;
width: 510px;
height: 300px;
}

.USATD {vertical-align: top;}

.AL {position: absolute; left: 301px; top: 175px;}
.AK {position: absolute; left: 85px; top: 240px;}
// Aditional States Would Appear Here
.WI {position: absolute; left: 260px; top: 58px;}
.WY {position: absolute; left: 124px; top: 71px;}

[Fang]

Change the span to a div
For the positioning to work the container must be a block.

[cdp103188]

Oh.... wow, that was a simple change.

I did realize just through trying to explain the problem that my code is way to messy and complicated. I am taking some tutorials on CSS layouts and I am just going to redo my entire website to eliminate 90% of the tables with div's. I hear that is the current and more efficient way to code HTML these days.

Thanks for your help.