CSS works, but except in this one area... why?

Discussion in 'CSS' started by Matt Ridge, Feb 20, 2012.

  1. #1
    I am rewriting this code from scratch, what can be in php is, what can be in html is...Here is my problem, the CSS is working perfectly until this last part, box4, This part streches out far down the page and I can't figure out why.

    Here is my script, and my CSS script. Can someone take a peak and tell me what you see that I don't?

    
    <?php
    require_once('tb/connectvars.php');
    echo '<div id="postwrap">'
    ?>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>PDI NCMR - Edit</title>
      <link rel="stylesheet" type="text/css" href="tb/postie.css" />
    </head>
    <body>
       <div id="logo">
    	<img src="../images/PDI_Logo_2.1.gif" alt="PDI Logo" />
    </div>
    
    
    <?php
      if (isset($_POST['submit'])) {
    // Connect to the database
        $dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
    	
    // Enter data into the database
    	$id = mysqli_real_escape_string($dbc, trim($_GET['id']));
    	$ab = mysqli_real_escape_string($dbc, trim($_POST['ab']));
    	$date = mysqli_real_escape_string($dbc, trim(date('Y-m-d',strtotime ($_POST['date']))));
    	$part = mysqli_real_escape_string($dbc, trim($_POST['part']));
    	$rev = mysqli_real_escape_string($dbc, trim($_POST['rev']));
    	$partdesc = mysqli_real_escape_string($dbc, trim($_POST['partdesc']));
    	$ncmrqty = mysqli_real_escape_string($dbc, trim($_POST['ncmrqty']));
    	$comp = mysqli_real_escape_string($dbc, trim($_POST['comp']));
    	$ncmrid = mysqli_real_escape_string($dbc, trim($_POST['ncmrid']));
    	$rma = mysqli_real_escape_string($dbc, trim($_POST['rma']));
    	$jno = mysqli_real_escape_string($dbc, trim($_POST['jno']));
    	$fdt = mysqli_real_escape_string($dbc, trim($_POST['fdt']));
    	$cof = mysqli_real_escape_string($dbc, trim($_POST['cof']));
    	$fab1= mysqli_real_escape_string($dbc, trim($_POST['fab1']));
    	$fab2= mysqli_real_escape_string($dbc, trim($_POST['fab2']));
    	$fab3= mysqli_real_escape_string($dbc, trim($_POST['fab3']));
    	$non= mysqli_real_escape_string($dbc, trim($_POST['non']));
    	$dis= mysqli_real_escape_string($dbc, trim($_POST['dis']));
    	$comm= mysqli_real_escape_string($dbc, trim($_POST['comm']));
    	$caad= mysqli_real_escape_string($dbc, trim($_POST['caad']));
    	$po= mysqli_real_escape_string($dbc, trim($_POST['po']));
    	$pod = mysqli_real_escape_string($dbc, trim(date('Y-m-d',strtotime($_POST['pod']))));
    	$dri = mysqli_real_escape_string($dbc, trim(date('Y-m-d',strtotime($_POST['dri']))));
    
    
    	$query = "UPDATE ncmr SET ab = '$ab', date = '$date', part = '$part', rev = '$rev' , partdesc = '$partdesc' , ncmrqty = '$ncmrqty' , comp = '$comp' , ncmrid = '$ncmrid' , rma = '$rma' , jno = '$jno' , fdt = '$fdt' , cof = '$cof' , fab1 = '$fab1' , fab2 = '$fab2' , fab3 = fab3' , non = '$non' , dis = '$dis' , comm = '$comm' , caad = '$caad' , po = '$po' , pod = '$pod' , dri = '$dri'  WHERE id = '$id'";
    
    
    // echo your raw query and look for obvious errors
         echo "Query is : " . $query . "<br />";
      
    // and at least use a basic mechanism to trap possibles errors
           mysqli_query($dbc, $query)  or die('Query Error : ' . mysqli_error($dbc));
    
    
    // Clear the data to clear the form
    	$id = "";
    	$ab = "";
    	$date = "";
    	$part = "";
    	$rev = "";
    	$partdesc = "";
    	$ncmrqty = "";
    	$comp = "";
    	$ncmrid = "";
    	$rma = "";
    	$jno = "";
    	$fdt = "";
    	$cof = "";
    	$fab1= "";
    	$fab2= "";
    	$fab3= "";
    	$non= "";
    	$dis= "";
    	$comm= "";
    	$caad= "";
    	$po= "";
    	$pod = "";
    	$dri = "";
    
    
    // Confirm success with the user
    		echo '<p>If you wish to edit more NCMRs, please <a href="list.php">go to the admin page!</a></p>';
    
    
    			mysqli_close($dbc);
    			}
    	
      else {	
     
    // Connect to the database
      $dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
    // Grab the profile data from the database
     if (!isset($_GET['id'])) {
        $query = "SELECT * FROM ncmr WHERE id = '$id'";
      }
      else {
        $query = "SELECT * FROM ncmr WHERE id = '" . $_GET['id'] . "'";
      }
      $data = mysqli_query($dbc, $query);
    
    
      if (mysqli_num_rows($data) == 1) { 
    // The user row was found so display the user data
        $row = mysqli_fetch_array($data);
        echo'<div id="title"><h3 id="NCMR2">Non-Conforming Materials Report (NCMR:&nbsp;&nbsp;' . $row['rma'] . ')</h3></div>';
    	
    	if (empty($row['ab'])) $row['ab'] == "Empty";
    	if (empty($row['date'])) $row['date'] == "Empty";
    	if (empty($row['part'])) $row['part'] == "Empty";
    	if (empty($row['rev'])) $row['rev'] == "Empty";
    	if (empty($row['partdesc'])) $row['partdesc'] = "Empty";
    	if (empty($row['ncmrqty'])) $row['ncmrqty'] = "Empty";
    	if (empty($row['comp'])) $row['comp'] == "Empty";
    	if (empty($row['ncmrid'])) $row['ncmrid'] == "Empty";
    	if (empty($row['rma'])) $row['rma'] == "Empty";
    	if (empty($row['jno'])) $row['jno'] == "Empty";
    	if (empty($row['non'])) $row['non'] == "Empty";
    	if (empty($row['dis'])) $row['dis'] == "Empty";
    	if (empty($row['comm'])) $row['comm'] == "Empty";
    	if (empty($row['caad'])) $row['caad'] == "Empty";
    	if (empty($row['po'])) $row['po'] =="Empty";
    	if (empty($row['pod'])) $row['pod'] =="Empty";
    	if (empty($row['dir'])) $row['dri'] =="Empty";
    	
    ?>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    	<fieldset>
    		<div id="box1">
    			<div id="ab"><span class="b">Added By:&nbsp;&nbsp;</span><input type="text" name="ab" value="<?php echo $row['ab']?>" /></div>
    			<div id="date"><span class="b">Date Filed:&nbsp;&nbsp;</span><input type="text" name="date" value="<?php echo $row['date']?>" /></div>
    			<div id="part"><span class="b">Part Number:&nbsp;&nbsp;</span><input type="text" name="part" value="<?php echo $row['part']?>" /></div>
    			<div id="rev"><span class="b">Part Revision:&nbsp;&nbsp;</span><input type="text" name="rev" value="<?php echo $row['rev']?>" /></div>
    			<div id="partdesc"><span class="b">Part Description:&nbsp;&nbsp;</span><textarea rows="4" cols="22" value=><?php echo $row['partdesc']?></textarea></div>
    			<div id="ncmrqty"><span class="b">NCMR Qty:&nbsp;&nbsp;</span><input type="text" name="ncmrqty" value="<?php echo $row['ncmrqty']?>"/></div>	
    		</div>
    		
    		<div id="box2">
    			<div id="comp"><span class="b">Company:&nbsp;&nbsp;</span><input type="text" name="comp" value="<?php echo $row['comp']?>" /></div>
    			<div id="ncmrid"><span class="b">Customer NCMR ID:&nbsp;&nbsp;</span><input type="text" name="ncmrid" value="<?php echo $row['ncmrid']?>" /></div>
    			<div id="rma"><span class="b">Internal RMA #:&nbsp;&nbsp;</span><input type="text" name="rma" value="<?php echo $row['rma']?>" /></div>
    			<div id="jno"><span class="b">Job #:&nbsp;&nbsp;</span><input type="text" name="jno" value="<?php echo $row['jno']?>" /></div>
    		</div>
    		
    		<div id="box3">
    			<h2>Failure</h2>
    				<div id="cof"><span class="b">Class of Failure:&nbsp;&nbsp;</span><input type="text" name="cof" size="15" value="<?php echo $row['cof']?>" /></div>
    				<div id="fdt"><span class="b">Failure Due To:&nbsp;&nbsp;</span><input type="text" name="fdt" size="15" value="<?php echo $row['fdt']?>" /></div>
    		</div>
    <?php
    		echo '<div id="box4">';
    			echo '<h2>Fabricators</h2>';
    		if ($row['fab1']=="--None--")
    {
    			echo'<div id="fab1">';
    				$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME); 
    				$mysqli->select_db('user');
    				$result = $mysqli->query("SELECT * FROM user"); 
    		echo "<SELECT name='fab1'>\n";
    	while($row = $result->fetch_assoc())
        {
            echo "<option value='{$row['user']}'>{$row['user']}</option>\n";
        }
        echo "</select>\n";
        echo '</div>';
    }
    else
    {
        echo '<div id="fab1"><span class="b"></span><input type="text" name="fab1"  size="20" value="' . $row['fab1'] . '" /></div>';
        echo '</div>';
    }
    
    
    if ($row['fab2']=="--None--")
    {
        echo'<div id="fab2">';
        $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME); 
        $mysqli->select_db('user');
        $result = $mysqli->query("SELECT * FROM user"); 
        echo "<SELECT name='fab2'>\n";
        while($row = $result->fetch_assoc())
        {
            echo "<option value='{$row['user']}'>{$row['user']}</option>\n";
        }
        echo "</select>\n";
        echo '</div>';
    }
    else
    {
        echo '<div id="fab2"><span class="b"></span><input type="text" name="fab2"  size="20" value="' . $row['fab2'] . '" /></div>';
        echo '</div>';
    }
    
    
    if ($row['fab3']=="--None--")
    {
        echo'<div id="fab3">';
        $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME); 
        $mysqli->select_db('user');
        $result = $mysqli->query("SELECT * FROM user"); 
        echo "<SELECT name='fab3'>\n";
        while($row = $result->fetch_assoc())
        {
            echo "<option value='{$row['user']}'>{$row['user']}</option>\n";
        }
        echo "</select>\n";
        echo '</div>';
    }
    else
    {
        echo '<div id="fab3"><span class="b"></span><input type="text" name="fab3"  size="20" value="' . $row['fab3'] . '" /></div>';
        echo '</div>';
    }
    
    
    ?>
    
    
    	</fieldset>
    </form>
    <?php
    		}
    	}
    
    
    echo '</div>';
    
    
    ?>
    </body>
    </html>
    
    Code (markup):
    /* This CSS was designed by Matthew Ridge for the company Plastic Design Inc. */
    /* This is the Internet Explorer CSS for the front end/Post NCMR web app */
    
    
    /* Cleaning up Internet Explorer  implied formats to universal internet standards*/
    
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center, height, width, top, bottom,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* Entire page*/
    body {
    		font-size:			14px;
    		background-color:	#BCD2EE;
    }
    
    
    h2{
    		font-size:			18px;
    		font-weight:		bold;
    		text-align:			center;
    }
    /* For the text areas that take up more than one line */
    textarea { 
    		font-family:		sans-serif;
    		font-size:			14px;
    		resize: 			none;
    }
    .b {
    		font-weight:		bold;
    }
    
    
    .desc{
    		font-weight:		bold;
    		font-family:		sans-serif;
    		font-size:			18px;
    }
    .desc{
    		font-weight:		bold;
    		font-family:		sans-serif;
    		font-size:			18px;
    }
    
    
    .editlist{
    		font-family:		sans-serif;
    		font-size:			14px;
    		font-weight:		bold;
    }
    .ncmrdata {
    		color: 				#ffffff;
    		background-color:	#BCD2EE;
    		padding:			3px;
    		font-weight:		bold;
    		text-align: 		left;
    		font-size:			14px;
    		width:				400px;
    		left:				30px;
    		top:				50px;
    		font-family:		sans-serif;
    		border:				groove;
    		border-color:		black;
    		border-width:		3px;
    		
    }
    
    
    .footer{
    		text-align:					center;
    		font-family:				sans-serif;
    		font-size:					10px;
    }
    
    
    .pfooter{
    		position:			absolute;
    		text-align:					center;
    		font-family:				sans-serif;
    		font-size:					10px;
    }
    
    
    a:pdi{
    		color:				blue;
    }
    
    
    }
    
    
    a:elist{
    		color:				#ffffff;
    }
    
    
    
    
    #footer{
    		position:			absolute;
    		width:				500px;
    
    
    }
    
    
    #comwrap
    {
    		left:				50px;
    		position:			relative;
    		width:				750px;
    		height:				900px;
    		}
    #postwrap
    {
    		position:			relative;
    		width:				750px;
    		height:				930px;
    		}
    #printwrap
    {
    		left:				50px;
    		position:			relative;
    		width:				750px;
    		height:				900px;
    		}
    
    
    #alert {
    		position:			relative;
    		left:				5px;
    		width:				700px;
    
    
    }
    #logo {
    		width: 				700px;
    		height:				118px;
    		display: 			block;
    		margin-left: 		10px; 
    		margin-top: 		10px; 
    }
    #title	{
    		width: 				700px;
    		font-weight:		bold;
    		font-size:			210%;
    		font-family:		sans-serif;
    		left:				70px;
    		margin-left: 		10px; 
    }
    #box1 {
    		padding:			5px;
    		float:				left;
    		height:				248px;
    		width:				350px;
    		border: 			3px #999999;
    		margin:				3px;
    		border-style:		groove;
    
    
    }
    #ab{
    		position: 			relative;
    		width:				300px;
    		left:				100px;
    }
    #date{
    	
    		position: 			relative;
    		left:				95px;
    		top:				6px;
    		
    }
    #part{
    		position: 			relative;
    		width:				300px;
    		left:				79px;
    		top:				11px;
    }
    #rev{
    		position: 			relative;
    		width:				300px;
    		left:				75px;
    		top:				16px;
    }
    #partdesc{
    		position: 			relative;
    		width:				300px;
    		top:				21px;
    		left:				57px;
    }
    #ncmrqty{
    		position: 			relative;
    		width:				300px;
    		left:				90px;
    		top:				26px;
    }
    #box2 {
    		float:				left;
    		height:				125px;
    		width:				350px;
    		padding:			5px;
    		border: 			3px #999999;
    		border-style:		groove;
    		margin:				3px 0px 3px 0px;
    		left:				374px;
    }		
    #comp{
    		position: 			relative;
    		width:				300px;
    		left:				98px;
    }
    #ncmrid{
    		position: 			relative;
    		width:				300px;
    		left:				30px;
    		top:				5px;
    }
    #rma{
    		position: 			relative;
    		width:				300px;
    		left:				58px;
    		top:				10px;
    }
    #jno{
    		position: 			relative;
    		width:				300px;
    		left:				124px;
    		top:				15px;
    }
    #box3 {
    		float:				left;
    		margin:				0px 3px 3px 0px;
    		height:				120px;
    		width:				160px;
    		padding:			2px;
    		border: 			3px #999999;
    		border-style:		groove;
    		left:				190px;
    }		
    #fdt {
    		position:			relative;
    		text-align:			center;
    }
    #cof {
    		position:			relative;
    		text-align:			center;
    		top:				5px;
    }
    #box4 {
    		float:				left;
    		top:				110px;
    		height:				120px;
    		width:				187px;
    		padding:			2px;
    		border: 			3px #999999;
    		border-style:		groove;
    		left:				547px;
    }		
    #fab1 {
    		position:			relative;
    		text-align:			center;
    		left:				5px;
    }
    #fab2 {
    		position:			relative;
    		text-align:			center;
    		top:				5px;
    		left:				5px;
    }
    #fab3 {
    		position:			relative;
    		text-align:			center;
    		top:				10px;
    		left:				5px;
    
    
    }
    #box5 {
    		float:				left;
    		margin:				0px 0px 0px 3px;
    		top:				5px;
    		height:				375px;
    		width:				703px;
    		padding:			5px;
    		border: 			3px #999999;
    		border-style:		groove;
    		left:				5px;
    }		
    
    
    
    
    #non {
    		position:			relative;
    		top:				5px;
    		left:				5px;
    }
    
    
    #dis {
    		position:			relative;
    		top:				10px;
    		left:				5px;
    }
    
    
    #comm {
    		position:			relative;
    		top:				15px;
    		left:				5px;
    }
    
    
    #caad {
    		position:			relative;
    		top:				20px;
    		left:				5px;
    }
    
    
    #podr{
    		position:			relative;
    		top:				10px;
    		left:				25px;
    		width:				500px;
    }
    
    
    #po {
    		position:			relative;
    		top:				30px;
    		left:				25px;
    }
    
    
    #pod {
    		position:			relative;
    		top:				7px;
    		left:				155px;
    		
    }
    
    
    #dri {
    		position:			relative;
    		top:				-15px;
    		left:				320px;
    		
    }
    #box6{
    		float:				left;
    		margin:				3px 0px 0px 3px;
    		height:				245px;
    		width:				703px;
    		padding:			5px;
    		border: 			3px #999999;
    		border-style:		groove;
    }
    
    
    #button {
    		position:			relative;
    		top:				10px;
    		left:				220px;
    		
    }
    
    
    #ncmrsr {
    		top:				5px;
    		padding:			5px;
    }
    
    
    #ncmrsc {
    		padding:			5px;
    }
    #button2 {
    		position:			relative;
    		left:				520px;
    		
    }
    #button3 {
    		position:			relative;
    		left:				210px;
    		top:				-10px;
    		
    }
    /* This section is for the print.css page. */
    #box1p {
    		padding:			5px;
    		float:				left;
    		height:				228px;
    		width:				350px;
    		border: 			3px #999999;
    		margin:				3px;
    		border-style:		groove;
    
    
    }
    
    
    #abp{
    		position: 			relative;
    		width:				300px;
    		left:				100px;
    }
    #datep{
    	
    		position: 			relative;
    		left:				95px;
    		top:				11px;
    		
    }
    #partp{
    		position: 			relative;
    		width:				270px;
    		left:				79px;
    		top:				22px;
    }
    #revp{
    		position: 			relative;
    		width:				300px;
    		left:				75px;
    		top:				33px;
    }
    #partdescp{
    		position: 			relative;
    		text-align:			right;
    		width:				250px;
    		top:				44px;
    		left:				57px;
    }
    #ncmrqtyp{
    		position: 			relative;
    		width:				300px;
    		top:				55px;
    		left:				90px;
    }
    
    
    #box2p {
    		float:				left;
    		height:				115px;
    		width:				350px;
    		padding:			5px;
    		border: 			3px #999999;
    		border-style:		groove;
    		margin:				3px 0px 3px 0px;
    		left:				374px;
    }		
    
    
    #box3p {
    		float:				left;
    		margin:				0px 3px 3px 0px;
    		height:				110px;
    		width:				160px;
    		padding:			2px;
    		border: 			3px #999999;
    		border-style:		groove;
    		left:				190px;
    }		
    #box4p {
    		float:				left;
    		top:				110px;
    		height:				110px;
    		width:				187px;
    		padding:			2px;
    		border: 			3px #999999;
    		border-style:		groove;
    		left:				547px;
    }		
    #box5p {
    		float:				left;
    		margin:				0px 0px 0px 3px;
    		top:				5px;
    		height:				315px;
    		width:				703px;
    		padding:			5px;
    		border: 			3px #999999;
    		border-style:		groove;
    		left:				5px;
    }		
    
    
    #podrp{
    		position:			relative;
    		top:				20px;
    		left:				25px;
    		width:				500px;
    }
    
    
    #pop {
    		position:			relative;
    		top:				30px;
    		left:				25px;
    }
    
    
    #podp {
    		position:			relative;
    		top:				12px;
    		left:				155px;
    		
    }
    
    
    #drip {
    		position:			relative;
    		top:				-5px;
    		left:				320px;
    		
    }
    
    
    
    
    #box6p{
    		float:				left;
    		margin:				3px 0px 0px 3px;
    		height:				200px;
    		width:				703px;
    		padding:			5px;
    		border: 			3px #999999;
    		border-style:		groove;
    }
    
    
    
    Code (markup):

     
    Matt Ridge, Feb 20, 2012 IP
  2. phil n

    phil n Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I'm no expert but I'm replying because I have a somewhat similar problem so I was reading this one and I notice, FWIW, your box4 declaration is the only box that doesn't have a margins setting. Maybe nothing or maybe some kind of quirk.
     
    phil n, Mar 11, 2012 IP
  3. nemanja.todic

    nemanja.todic Well-Known Member

    Messages:
    69
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    130
    #3
    Please post the HTML code your PHP scrip produces. Then it will be much easier to find the source of the problem...
     
    nemanja.todic, Mar 13, 2012 IP
  4. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #4
    Try that and see how it goes.
     
    drhowarddrfine, Mar 13, 2012 IP