a Div in a Fieldset in a Form in PHP using CSS...

[Matt Ridge]

This is the code I am using: For some reason the CSS is only being used on partial of the code below.  I'd like to know why.

 

Can someone help?

 

<?php
echo '<form id="all">';
	echo '<fieldset>';
		echo '<div id ="added">';
		if (!empty($row['Added_By'])) {
			echo '<tr><td id ="ao">Added By: </td><td>' . $row['Added_By'] . '</td></tr>';
		if (!empty($row['Added_By_Date'])) {
			echo '   ';
			echo '<tr><td id ="add">On: </td><td>' . $row['Added_By_Date'] . '</td></tr>';
		echo '</div>';
	echo '</fieldset>';
echo '</form>';
?>

 

This is the CSS

 

#all {

	padding-top:		10px;
	padding-bottom:		5px;
	padding-left:		5px;
	border: 			5px solid #696969;
	border-style:		groove;
	font-family: 		serif;
	width: 				755px;
	height:				700px;
	top:				170px;
	margin-left: 		10px; 
	}

#added{
	left:				80px;
	}


#ao{
	left:				40px;
	}

#add{
	 left:				140px;
	}

[AyKay47]

can you be more specific as to what CSS isn't working correctly.

where in your code do you specifiy position: ? since you are using left:

[Matt Ridge]

can you be more specific as to what CSS isn't working correctly.

where in your code do you specifiy position: ? since you are using left:

 

Here:

 

http://kaboomlabs.com/PDI/@dm!n/viewncmr.php?id=2

 

The space between the added by field and the on field should be separated more than what it is. I know the PHP is written too close, I am expecting overlap, but if I see it I know the CSS is working.

[AyKay47]

your css is a bit off here.. you do not have a position: specified so your left: property will not effect anything.. I would do it using something like this..

 

<div id="added"><span style='display: inline-block;margin-right: 20px;'>Added By: Peter Teigeler</span>On: 2011-07-07</div>

 

for the spacing.. I don't see what you are trying to do with the left property, but you will need to specify a position property value.. most likely relative.

[Matt Ridge]

your css is a bit off here.. you do not have a position: specified so your left: property will not effect anything.. I would do it using something like this..

 

<div id="added"><span style='display: inline-block;margin-right: 20px;'>Added By: Peter Teigeler</span>On: 2011-07-07</div>

 

for the spacing.. I don't see what you are trying to do with the left property, but you will need to specify a position property value.. most likely relative.

Hmm, ok... before it worked with just a left attribute.

 

Is there a way to make it so each one moves independently?

[AyKay47]

coincides with the position: property

[Matt Ridge]

Is there a way to make it so each one moves independently?

[AyKay47]

i see that you are now using a table, don't, a table is not necessary here and will lead to more code writing then what is needed.. what exactly do you mean by "each one moves independently"?

if you mean that you want the spacing to be different values, you can group the chunks that you want to move in spans and move them with the method that I used above

[Matt Ridge]

i see that you are now using a table, don't, a table is not necessary here and will lead to more code writing then what is needed.. what exactly do you mean by "each one moves independently"?

if you mean that you want the spacing to be different values, you can group the chunks that you want to move in spans and move them with the method that I used above

 

The only problem with spans is that it does the work of a CSS... or so I am led to believe. I would rather leave all the changes to be held by the CSS.

 

Let me put it to you this way.  This was my XHTML script:

 

<form id='all'>
     <fieldset>
           <div id ="added">    
		<label>Added By:</label>
		<input type="text" name="Added_By" value="" />
		<label>on:</label>
		<input type="text" name="Added_By_Date" value="" />
	</div>
      </fieldset>
</form>

 

The form encases everything.

The fieldset is what it is.

The div id = added is the compartmentalized section which holds Added_By and Added_By_Date fields.

 

What I want to do in my PHP is to duplicate it, but use the CSS like I did with the XHTML form above.

 

Instead of doing an input it is doing an output though, so it is retrieving the data from the database instead of entering it.

 

The original CSS script was this:

 

#all {

	padding-top:		5px;
	padding-bottom:	5px;
	background-color: 	#00688B;
	border: 			5px solid #696969;
	border-style:		groove;
	font-family: 		serif;
	position:			absolute;
	width: 			755px;
	height:			700px;
	top:				170px;
	margin-left: 		10px; 
	}

#added {	
	text-align:		center;
	position:			absolute;
	left:				20px;
	font-family:		sans-serif;
	font-size:			14px;
}

 

I hope this makes sense.