question on php with stle

[mbrown]

my original page looked like this:

 

 

i have edited this page to show my main central ban site and it looks like this:

 

Below is the code for the second image. Why does it not look like the first one with the edges?

 

thanks

 

<?php
session_start();
if ($_SESSION['loggedIn'] == TRUE)
{
	$username = $_SESSION['username'];

	include ("../includes/connect.php");

	$userquery = "SELECT * FROM users WHERE username = '$username'";

	$query = mysql_fetch_assoc(mysql_query($userquery));

	echo "
	<title>WASD Asset Tracking Administrator</title>
		<style type='text/css'> 
		<!-- 
		body  {
			font: 100% Verdana, Arial, Helvetica, sans-serif;
			background:#efefef;
			margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
			padding: 0;
			text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
			color: #000000;
		}
		.twoColHybLt #container { 
			width: 80%;  /* this will create a container 80% of the browser width */
			background: #FFFFFF;
			margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
			border: 1px solid #000000;
			text-align: left; /* this overrides the text-align: center on the body element. */
		} 

		/* Tips for sidebar1:
		1. Since we are working in relative units, it's best not to use padding on the sidebar. It will be added to the overall width for standards compliant browsers creating an unknown actual width. 
		2. Since em units are used for the sidebar value, be aware that its width will vary with different default text sizes.
		3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the '.twoColHybLt #sidebar1 p' rule.
		*/
		.twoColHybLt #sidebar1 {
			float: left; 
			width: 12em; /* since this element is floated, a width must be given */
			background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
			padding: 15px 0; /* top and bottom padding create visual space within this div  */
		}
		.twoColHybLt #sidebar1 h3, .twoColHybLt #sidebar1 p {
			margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
			margin-right: 10px;
		}

		/* Tips for mainContent:
		1. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
		2. Be aware it is possible to cause float drop (the dropping of the non-floated mainContent area below the sidebar) if an element wider than it can contain is placed within the mainContent div. WIth a hybrid layout (percentage-based overall width with em-based sidebar), it may not be possible to calculate the exact width available. If the user's text size is larger than average, you will have a wider sidebar div and thus, less room in the mainContent div. You should be aware of this limitation - especially if the client is adding content with Contribute.
		3. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent 'hasLayout.' This may help avoid several IE-specific bugs.
		*/
		.twoColHybLt #mainContent { 
			margin: 0 20px 0 13em; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
		} 

		/* Miscellaneous classes for reuse */
		.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
			float: right;
			margin-left: 8px;
		}
		.fltlft { /* this class can be used to float an element left in your page */
			float: left;
			margin-right: 8px;
		}
		.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
			clear:both;
			height:0;
			font-size: 1px;
			line-height: 0px;
		}
		--> 
		</style><!--[if IE]>
		<style type='text/css'> 
		/* place css fixes for all versions of IE in this conditional comment */
		.twoColHybLt #sidebar1 { padding-top: 30px; }
		.twoColHybLt #mainContent { zoom: 1; padding-top: 15px; }
		/* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
		</style>
		<![endif]--></head>

		<body class='twoColHybLt'>


		<p><img src='../images/header.jpg' width='800' height='150' /><br />
			<img src='../images/bottom.gif' width='800' height='37' /><br />
		</p>
		<div id='container'>
		  <div id='sidebar1'>
			<h3 align='center'>Navigation:</h3>";
		if($query[usergroup] == "Super Administrator")
			{
				echo "<div align='center'><a href='banadmin.php'>Ban Users</a>";


				echo "</div>";
			}//end of if($query[usergroup] == "Super Administrator")

  
		   echo " <!-- end #sidebar1 --></div>
		<div id='mainContent'>
		  <div align='left'>User Logged In: $username</div>";
					// include the files
				include "config.php";
				include "func.ban.php";
				// switch statement to do pages in admin
				switch ($_GET['x'])
					{ 
					   // if no page show bans
						default:
							listbans();
						break;
						// if add ban, show the form
						case "add":
							// if posted, insert it
							if ($_POST['add'])
								{
									$ip = $_POST['ip'];
									if (!$ip)
										{
											echo "You must put an ip address at least";
										}//end of if (!$ip)
									addban($ip,$_POST[reason],$_POST[legnth]);
									echo "<br />";
									echo "<br />";
									echo "Click <a href='banadmin.php'>here</a> to go back to the ban admin center";
								}//end of if ($_POST['add'])
							// otherwise show form
							else
								{
									echo "Add a ban.<br />";
									echo "<form method='post' action='banadmin.php?x=add'>";
									echo "IP Address<br /><input type='text' name='ip'><br />";    
									echo "Reason<br /><input type='text' name='reason'><br />";    
									echo "Legnth<br /><input type='text' name='legnth'><br />";
									echo "<input type='submit' name='add' value='Add Ban'>";
								}//end of else
						break;
						// delete ban    
						case "delete":
							// got the id, preform the action
							if ($_GET['id'])
								{
									delban($_GET['id']);
								}//end of if ($_GET['id'])
							// show error
							else 
								{
									echo "No ip selected to remove";
								}//end of else
						break;
					}//end of switch ($_GET['x'])

echo "</body>";
}


else 
{
	header("location: ../login.php");
}
?>

[premiso]

So what is the question?

 

Also the first image is not viewable if you click on it, and too small to see regularly.

[mbrown]

changed. why is there no borders on the second one like the first?

[Philip]

@premiso-

http://img211.imageshack.us/img211/8271/originaltj0.jpg

and

http://img259.imageshack.us/img259/8615/wrongbs5.jpg

 

@OP -

I think this is more of a CSS question. Since the box on the left is taller, and it is essentially overflowing.

 

Try adding in .twoColHybLt #sidebar1

display: block;

[premiso]

Hard to help without the "listbans()" function code. But the issue is going to be css related, perhaps a missed </div> tag or something.

 

EDIT:

@premiso-

http://img211.imageshack.us/img211/8271/originaltj0.jpg

and

http://img259.imageshack.us/img259/8615/wrongbs5.jpg

 

Yea, but that would require like quoting that and too much work for me imo Although I wish he would have just posted the urls instead of the full size images now....

[mbrown]

where am I supposed to add that to? Sorry been one hell of a week. girlfriend broke up with me and then i was a very very minor fender bender while coming back to my apartment today from seeing my parents. my eyes are a little heavy lol.

 

@premiso my apologizes my friend.

[premiso]

where am I supposed to add that to? Sorry been one hell of a week. girlfriend broke up with me and then i was a very very minor fender bender while coming back to my apartment today from seeing my parents. my eyes are a little heavy lol.

 

@premiso my apologizes my friend.

 

A good way to fix this, view the source of the page that is messed up, save it to a file on your desktop like test.html, then modify the CSS styles till it displays like it should, note the part you change then go back to your script and fix accordingly. That is the best way to debug CSS errors on a dynamic page imo.

[mbrown]

i just copied code from the first page to the second page. could it just be a missed </div>?

 

[premiso]

i just copied code from the first page to the second page. could it just be a missed </div>?

 

 

Dunno, Look at your html markup. I would suggest a syntax highlighting editor that also finds matching tags, such as Notepad ++ this way you can verify if you are missing a closing tag somewhere, if you are not then it is the CSS that is at fault.

 

EDIT:

Hope it is a missed tag, debugging CSS sucks!

[mbrown]

you guys are going to laugh at me.

...
switch ($_GET['x'])
					{ 
					   // if no page show bans
						default:
							listbans();
							break;
...

 

had to be changed to

switch ($_GET['x'])
					{ 
					   // if no page show bans
						default:
							listbans();
							echo "<br />";
							echo "<br />";
						break;

 

this will give it extra room. the white is the "main area" that will state how long it needs to be. the gray area was too big for the white area. if you get what i am trying to say.

 

thanks

 

mbrown

[Philip]

Yeah, that's more of a band aid fix though. Let's say you start banning more people, and the list is long, you won't need the <br />'s.

.twoColHybLt #sidebar1 {
float: left; 
width: 12em; /* since this element is floated, a width must be given */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div  */
}

I want to say, if you change it to the following it should be fixed:

.twoColHybLt #sidebar1 {
float: left; 
        display: block; /* added this, to make it fit inside the block, instead of overflowing */
width: 12em; /* since this element is floated, a width must be given */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div  */
}

[mbrown]

i had to put in another <br /> but that is it.

 

also now i am having a similar issue with another page

 

any help would be hot

 

here is the link to the image:

 

I am continuing working on it but would like another pair of eyes on it