CSS layout Problems!

whitecrook · 5 Nov 2009 at 16:56

Hi

Working on my first site using CSS and having a little issue with the layout and things.

Here's screen shots of my page is various browsers. The relevent browsers are IE7 (that's the one most folk are using) and Opera - the one I like to use.

Anyway You can see that Only Chrome displays the pages properly, the main issues with the other browsers being the Edit/Add has a line going right through, Gecko seems to draw a white box in a seemingly random place, and the IE7 draws the add edit under the line and IE6 does something weird with the top box....

PICS:
chrome 3

opera10

ie7

seamonkey1.7

IE6

FF3.5.3

full size http://whitecrook.ath.cx/resize/full/

css here http://whitecrook.ath.cx/resize/mystyle.css
php page here : http://whitecrook.ath.cx/resize/mainpage.php

This is a temp hosting, so there no db back end etc..

Anyway - I wonder if anybody could point out why the css layout doesn't seem to be working, and how I might fix it.

Regards,

PHP:

<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />


</head>
<body>
<?php

include('./_includes/config.php');

// default
$default_holder_text = '--- Select a Job ---';
$jobname = $default_holder_text;
$batchprefix = '';
$batchmask = '4';
$sourceroot = '';
$sourcepath = '';
$destroot = '';
$destpath = '';


if (isset($_POST['submitted'])) {
// execute job 
$jobname = $_POST['jobname'];
$batchprefix = $_POST['batchprefix'];
$batchmask = $_POST['batchmask'];
$sourceroot = $_POST['sourceroot'];
$sourcepath = $_POST['sourcepath'];
$destroot = $_POST['destroot'];
$destpath = $_POST['destpath'];
// echo "$jobname $batchmask $batchprefix $sourceroot $sourcepath $destroot $destpath"; 

foreach($_POST AS $key => $value) { $_POST[$key] = mysql_real_escape_string($value); } 
$sql = "INSERT INTO `automator` ( `jobname` ,  `sourceroot` ,  `sourcepath` , 
				`destroot` , `destpath` , `batchmask` , `batchprefix`  )
	VALUES
	(  '{$_POST['jobname']}' ,  '{$_POST['sourceroot']}' ,  '{$_POST['sourcepath']}' , 
	'{$_POST['destroot']}' , '{$_POST['destpath']}' , '{$_POST['batchmask']}' , '{$_POST['batchprefix']}' ) "; 
// echo $sql;
mysql_query($sql) or die(mysql_error()); 

echo "<div id='stylized' class='myform'>";
	echo "<h1>Added: </h1>"; 
	echo "<p>New Job:" . $_POST['jobname'] . "</p>";
echo "<P><a href='list.php'>Back To Main Page</a></p>";

echo "</div>";

} else {
	if (isset($_POST['loadjob'])) {
		//draw form with values
$searchstring = $_POST['jobname'];
	// get values
    $sql = "SELECT jobname, sourceroot, sourcepath, destroot, destpath, batchmask, batchprefix " .
	"FROM automator " .
        "WHERE jobid = '$searchstring' ";

        $result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
  $jobname = $row['jobname'];
  $sourceroot = $row['sourceroot'];
  $sourcepath = $row['sourcepath'];
  $destroot = $row['destroot'];
  $destpath = $row['destpath'];
  $batchmask = $row['batchmask'];
  $batchprefix = $row['batchprefix'];
}

	} 
	drawForm($jobname, $sourceroot, $sourcepath, $destroot, $destpath, $batchmask, $batchprefix, $default_holder_text);
	exit;

}


function drawForm($jobname, $sourceroot, $sourcepath, $destroot, $destpath, $batchmask, $batchprefix, $default_holder_text) {
?>
<div id="stylized" class="myform">
	<form action='' method='POST' name='loadjobform'>
	<h1>Choose Job</h1>
	<p>Provides facilities to Execute stored jobs.</p>
	<label>Job Name:
	<span class="small">Select correct job name</span>
	</label>
	<select class='halfwidth' name='jobname' >
<?php
	$sql = "SELECT jobid, jobname FROM automator ".
		"ORDER BY jobname";

	$result = mysql_query($sql);
	echo "<option selected value='$jobid'>$jobname";
while($row = mysql_fetch_array($result))
{
  echo "<option value=\"".$row['jobid']."\">".$row['jobname']."\n  ";
}
?>
</select>	

<input type='hidden' value='1' name='loadjob' />

	<button  type="submit">Load Job</button>
</form>
</div>

<div id='stylized' class='myform'>

<?php 
if($jobname === $default_holder_text) {
echo "<h1>Please choose a job from the menu above.</h1>";
} else {
echo "<h1>$jobname</h1>";
}
?>

<p>Settings for this job:
<span class='right'>Edit | Add | Delete</span></p>
<form action='' method='POST' name='mainform'>

	<label>Batch Prefix:
	<span class="small">Prefix for each batch no.</span>
	</label>
<?php	echo "<input class='qtrwidth'type='text' name='batchprefix' value='$batchprefix'/>"; ?>
	<label>Batch Number:
	<span class="small">Choose no. of digits</span>
	</label>


	<select class='qtrwidth' type='text' name='batchmask' >
	<?php
	for ( $counter=3; $counter <=9; $counter++ ) {
		echo "<option ";
		if ( $counter == $batchmask ) { echo "selected"; }
		echo " value='$counter'>$counter - ";
		for ( $zerocount=1 ; $zerocount <=$counter; $zerocount++ ) {
			echo "0";
		}
		echo "</option>";
	}
echo "</select>";
// the above code produces similar to the following
//	<option value="3">3 - 000</option>
//	<option selected value="4">4 - 0000</option>
//	<option value="5">5 - 00000</option>
//	<option value="6">6 - 000000</option>
//	<option value="7">7 - 0000000</option>
//	<option value="8">8 - 00000000</option>
//	<option value="9">9 - 000000000</option>
//	</select>
?>	

	<label>Source Drive:
	<span class="small">Choose the drive</span>
	</label>
  <select class='halfwidth' type='text' name='sourceroot'>
<?php
        $sql = "SELECT mount_point, friendly_name FROM locations ".
                "WHERE type <=1 " .
                "ORDER BY friendly_name";

        $result = mysql_query($sql);
        while($row = mysql_fetch_array($result))
{
 if($sourceroot==$row['mount_point']) {
  
echo "<option selected value=\"".$row['mount_point']."\">".$row['friendly_name']."\n  ";
} else {
echo "<option value=\"".$row['mount_point']."\">".$row['friendly_name']."\n  ";
}
}

echo  "</select>";



//	<select class='halfwidth' type='text' name='sourceroot'>
//	<option selected value="/mnt/fwshare/">(Formware) I:\</option>
//	<option value="/mnt/imagestore-a-m">ImageStore-A-M</option>
//	</select>



?>	
	<label>Source Path:
	<span class="small">Location of the batches</span>
	</label>
<?php echo "<input type='text' name='sourcepath' value='$sourcepath' />"; ?>
	<label>Destination Drive:
	<span class="small">Choose the output drive</span>
	</label>

  <select class='halfwidth' type='text' name='sourceroot'>
<?php
        $sql = "SELECT mount_point, friendly_name FROM locations ".
                "WHERE type >=1 " .
                "ORDER BY friendly_name";

        $result = mysql_query($sql);
        while($row = mysql_fetch_array($result))
{
 if($sourceroot==$row['mount_point']) {

echo "<option selected value=\"".$row['mount_point']."\">".$row['friendly_name']."\n  ";
} else {
echo "<option value=\"".$row['mount_point']."\">".$row['friendly_name']."\n  ";
}
}

echo  "</select>";



//	<select class='halfwidth' type='text' name='destroot'>
//	<option selected value="/mnt/fwshare/">(Formware) I:\</option>
//	<option value="/mnt/imagestore-a-m">ImageStore-A-M</option>
//	</select>
?>
	<label>Destination Path:
	<span class="small">Where to place the encrypted files</span>
	</label>
<?php echo "<input type='text' name='destpath' value='$destpath' />"; ?>
	<button  type="submit">Execute Job</button>
	<div class="spacer"></div>

<input type='hidden' value='1' name='submitted' /></p>
	</form>
	</div>
<?php
}
?>
</body>
</html>

suarve · 5 Nov 2009 at 19:12

Page rank

5

For your 'random' white box I think that's the hidden input field. You can just add a class of say 'hide' to hide: display:none.

I think IE7 and above will suppot the following too:

input[type="hidden"] {display:none;}

whitecrook · 6 Nov 2009 at 14:22

Sweet that solved the white line in the gecko browsers.

Anyone got any ideas on the other issues?

CSS layout Problems!

whitecrook

whitecrook

suarve

suarve

whitecrook

whitecrook