1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Does CSS rendering depend on page loading order?

Discussion in 'CSS' started by phil n, Mar 11, 2012.

0
  1. #1
    Hi all.

    My first attempt to code a trivial web application involves php, css, xhtml, mysql and a bit of ajax. It is a 'random' collection of html files; php files, scripts and functions; and a css style sheet.

    The problem is the generated code looks right and the css validates but the content won't go into the div's. The one that is entirely contained in a print() string (head01) works but the others just produce zero height divs and the content that should be in them appears elsewhere on the page. The css declarations do something because the borders exist.

    This doesn't work. The build___DropDown() functions also echo code to the browser which is what I was hoping would be displayed inside the 'dropDowns' div.

    echo("<div id='dropDowns'>");        
    
        buildDivisionDropDown();
        buildTypeDropDown();
        buildLineDropDown();
        buildColorDropDown();
        buildItemDropDown();

        echo('<span class="DD">');
        echo('<label for="quantity">Quantity</label><br />');
        echo('<input id="quantity" type="text" name="quantity" value="1" />');
    
        echo("</div> <!-- end div dropDowns -->"); // dropDowns
    Code (markup):
    This is the generated code for the page:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>

        <title>The RW Production Database</title>
        <meta http-equiv="content-type" content="text/html" charset="utf-8" />
        <script type="text/javascript" src="functions_js.js" ></script>
        <script type="text/javascript" src="ajax.js"></script>
        <link rel="stylesheet" type="text/css" href="styles.css" /> 

  </head>

  <body>
      
        <h2>RW Production Tracking Program :: Production Input</h2>
        
        <hr />
      
        <div id="content1">
        

            <div class='head01'>
        <p>
          <label for='date'>Today : </label>
          <span id=dateLabel>Friday March 09 2012</span>
        </p>
        <input type='submit' name='decYear' id='decYear' value='<<<' onclick='incDec(this)' />
        <input type='submit' name='decMonth' id='decMonth' value='<<' onclick='incDec(this)' />
        <input type='submit' name='decDay' id='decDay' value='<' onclick='incDec(this)' />
        <input type='text' name='week' id='date' style='width:25%' value=' Friday March 09 2012' />
        <input type='submit' name='incDay' id='incDay' value='>' onclick='incDec(this)' />
        <input type='submit' name='incMonth' id='incMonth' value='>>' onclick='incDec(this)' />
        <input type='submit' name='incYear' id='incYear' value='>>>' onclick='incDec(this)' />
      </div> // end head01
      <div id="dropDowns">
        <span class="DD">
          <label for="division">Division</label><br />
          <select class="dS" id="division" name="division">
            <option value="0">Enterprise</option>
            <option value="1">Rocky Mountain</option>
            <option value="2">RockyWall</option>
            <option value="3">Pacific FenceCrete</option>
          </select>
        </span>
        <span class="DD">
          <label for="type">Type</label><br />
          <select class="dS" id="type" name="type">
            <option value="0">Raw Materials</option>
            <option value="1">Old Stock</option>
            <option value="2">New Stock</option>
          </select>
        </span>
        <span class="DD">
          <label for="line">Line</label><br />
          <select class="dS" id="line" name="line">
            <option value="0">non standard</option>
            <option value="1">Universal</option>
            <option value="7">70 (Regal)</option>
            <option value="80">800</option>
            <option value="160">1600 (Majestic)</option>
            <option value="250">2500 (Jumbo)</option>
            <option value="500">Accessory</option>
          </select>
        </span>
        <span class="DD">
          <label for="color">Color</label><br />
          <select class="dS" id="color" name="color">
            <option value="0">Concrete Grey</option>
            <option value="1">Black Tusk</option>
            <option value="2">Eagle Mountain</option>
            <option value="3">Fog</option>
            <option value="4">Fraser Canyon</option>
            <option value="5">Whistler</option>
            <option value="7">Eagle Ridge</option>
          </select>
        </span>
        <span class="DD">
          <label for="item">Item</label><br />
          <select class="dS" id="item" name="item">
            <option value="1">Standard Unit</option>
            <option value="4">Short Half</option>
            <option value="5">Half Unit</option>
            <option value="8">15 Inch Unit</option>
            <option value="9">21 Inch Unit</option>
            <option value="10">Corner Unit</option>
            <option value="15">Right End</option>
            <option value="20">Left End</option>
            <option value="25">135 Degree Unit</option>
            <option value="50">Top Cap</option>
            <option value="100">Base Plate</option>
          </select>
        </span>
        <span class="DD">
          <label for="quantity">Quantity</label><br />
          <input id="quantity" type="text" name="quantity" value="1" />
      </div> // end dropdowns
      
      <p id='enterBtn'>
        <input type='button' name='writeToDB' id='writetodb' value='Write To DB' onclick='postData()' />
      </p>  <!-- from functions_php.php -->

            <!-- debug lines -->
            <div style="position:absolute; bottom:5%; padding-left:10px;"><!-- just in case --></div>
                  
        </div> // end content1
    
    </body>

</html>
    Code (markup):
    This is the relevant css:

    #content1 {border:thin solid red;}

#dropDowns
{
    width: 100%;
    border: thin blue solid;
}

.DD
{
    float:left;
    /*border:thin solid red;*/
    margin-left: 2px;
    width:10em;
}
    Code (markup):
    Any help would be greatly appreciated. Maybe I'm missing something trivial. (Wouldn't be the first time.)

    Thanks.
     
    phil n, Mar 11, 2012 IP