Results 1 to 3 of 3

Thread: [RESOLVED] Positioning Problems; Nesting Absolutes and Relatives

  1. #1
    Join Date
    Jun 2007
    Blue Springs, MO

    resolved [RESOLVED] Positioning Problems; Nesting Absolutes and Relatives

    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;
    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">
          <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 -->

    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;}

  2. #2
    Join Date
    Apr 2003
    Change the span to a div
    For the positioning to work the container must be a block.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Jun 2007
    Blue Springs, MO
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center