CSS Doesn't apply on a page

My Inbox page does not show the style it haves to show.

The header file shows the css, but not on the inbox page.
And all other pages with header are just fine.

I can’t seem to find the problem

I have an personal message page which is :


<title>DropDown - Best Booter Out!</title><link href="css/reset.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="css/ie.css" media="screen" rel="stylesheet" type="text/css">
<![endif]-->
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-tipsy.js"></script>
<script type="text/javascript" src="js/jquery-custom.js"></script>
	<body>

<div class="shadow"></div>
<!-- .shadow -->
<!-- BEGIN HEADER -->
<div id="header">

	<p class="logo"><a href="#" title="Administrator"><img src="img/mini.png"></a></p>
	<p class="user"><span>Welcome, <strong>Owner</strong> Harry Potter</span> <a href="inboxpm.php" class="tooltip" title="Do you want to view your messages?">Inbox</a> - <a href="mysettings.php" class="tooltip" title="Do you want to view your settings?">Settings</a> - <a href="logout.php" onclick='return confirm("Are you sure you want to logout?");' class="tooltip" title="Do you want to logout?" style="height: 18px; padding-top: 5px;">Logout</a></p>
</div><!-- end div #header -->

<!-- END HEADER -->
<!-- BEGIN SLIDEBAR -->
<div id="slidebar">
    <div id="menu">
    	<div class="menu-item">
    		<h3 class="open"><img src="img/icon/m-close.png" alt="" />Dashboard</h3>
    		<div class="menu-overflow">
    			<div class="menu-content">
    				<ul>
    					<li><a href="index.php"><img src="img/icon/famfamfam/chart_bar.png" alt="" />Home</a></li>

    					<li><a href="dropdown.php"><img src="img/icon/famfamfam/server.png" alt="" />Boot</a></li>
					<li><a href="updates.php"><img src="img/icon/famfamfam/newspaper.png" alt="" />Updates</a></li>
					<li><a href="mysettings.php"><img src="img/icon/famfamfam/image_edit.png" alt="" />Settings</a></li>
					<li><a href="new_message.php"><img src="img/icon/famfamfam/page_edit.png" alt="" />Send Message</a></li>
					<li><a href="logout.php" onclick='return confirm("Are you sure you want to logout?");'"><img src="images/delete.png" alt="" />Logout</a></li>
    				</ul>

    			</div><!-- end div .menu-content -->
    		</div><!-- end div .menu-overflow -->
    	</div><!-- end div .menu-item -->
    	<div class="menu-item">
    		<h3 class="open"><img src="img/icon/m-open.png" alt="" />Tools</h3>
    		<div class="menu-overflow">
    			<div class="menu-content">
    				<ul>

    					<li><a href="check.php"><img src="img/icon/famfamfam/page_edit.png" alt="" />Website Checker</a></li>
    					<li><a href="ipgrab.php"><img src="img/icon/famfamfam/page_edit.png" alt="" />IP Grabber</a></li>
					<li><a href="trace.php"><img src="img/icon/famfamfam/server.png" alt="" />Trace</a></li>
    				</ul>
    			</div><!-- end div .menu-content -->
    		</div><!-- end div .menu-overflow -->
    	</div><!-- end div .menu-item -->

	    	<div class="menu-item">
    		<h3 class="close"><img src="img/icon/m-close.png" alt="" />Administrator</h3>
    		<div class="menu-overflow" >
    			<div class="menu-content">
    				<ul>
    					<li><a href="OakK23mMWw02wa.php">Add Shells</a></li>
    					<li><a href="OakK23mMWw02wb.php">Manage Shells</a></li>

    					<li><a href="logs.php">Attack Logs</a></li>
					<li><a href="OakK23mMWw01wW.php">Admin Panel</a></li>
    				</ul>
    			</div><!-- end div .menu-content -->
    		</div><!-- end div .menu-overflow -->
    	</div><!-- end div .menu-item -->
	    </div><!-- end div #menu -->
</div><!-- end div #slidebar -->

<!-- END SLIDEBAR -->
<div id="content">
<div class="box-out">
    	<div class="box-in">
    		<div class="box-head"><h1>Statistics</h1></div>
    		<div class="box-content">
			<div class="table">
    				<form action="#" method="post">
    					<table>
    						<thead>

    							<tr>
    								<td><div>Member Statistics</div></td>
    								<td><div> </div></td>
    							</tr>
    						</thead>
    						<tbody>
    							<tr>
    								<td><div class="even">Total Users</div></td>

    								<td><div class="even"><a class="tooltip" href="#" title="How much users do we got in total">36     </div></td>
    							</tr>
    							<tr>
    								<td><div class="odd">Activated Users</div></td>
    								<td><div class="odd"><a class="tooltip" href="#" title="How many activated users are there">30</a></div></td>
    							</tr>
    							<tr>

    								<td><div class="even">Pending Users</div></td>
    								<td><div class="even"><a class="tooltip" href="#" title="How many users are pending">6</a></div></td>
    							</tr>
    							<tr>
    								<td><div class="odd">Total Attacks</div></td>
    								<td><div class="odd"><a class="tooltip" href="#" title="How many attacks did we do">1559</a></div></td>
    							</tr>

    						</tbody>
    					</table>
    				</form>
    			</div><!-- end div .table -->
    			<div class="table">
    				<form action="#" method="post">
    					<table>
    						<thead>
    							<tr>

    								<td><div>Shell Statistics</div></td>
    								<td><div> </div></td>
    							</tr>
    						</thead>
    						<tbody>
    							<tr>
    								<td><div class="even">Shell Rotation</div></td>

    								<td><div class="even"><a class="tooltip" href="#" title="Shows if there is wether or not a shell rotation">            															On
            															</a></div></td>
    							</tr>
    							<tr>
    								<td><div class="odd">Shells Available</div></td>
    								<td><div class="odd"><a class="tooltip" href="#" title="Shows the total amount of the shells we can use">3607</a></div></td>
    							</tr>
    						</tbody>

    					</table>
    				</form>
    			</div><!-- end div .table -->
    		</div><!-- end div .box-content -->
    	</div><!-- end div .box-in -->
    </div><!-- end div .box-out -->
<br>
<br><div class="box-out">
    	<div class="box-in">
    		<div class="box-head"><h1>Inbox</h1></div>

    		<div class="box-content">
<p>
<table>
<thead>
<tr>
<td><div>Messages</div></td>
<td><div>Status</div></td>
</tr>
</thead>
<tbody>
<tr>
<td><div><a href="read_message.php?messageid=54">****ing what bro</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=53">****ing hopw it works</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=52">lol wut wtf ****ing shitedjj</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=51">omfg</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=50">****ing hopw it works</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=49">1111111</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=48">hHA</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=47">lol wut</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=46">hgtdesw</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=45">hgtdesw</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=44">bvdsa</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=43">omg</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=42">omg</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=41">omg</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=40">ghyuikopl</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=39">**** you</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=36">**** you</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=35">**** you</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=34">test number 2</a></td><td>Read</div></td></tr><tr><td><div><a href="read_message.php?messageid=33">testst</a></td><td>Read</div></td></tr><tr></tr>

</tbody>
</table>
<br>
<br>
<form name="newmsgfrm" method="post" action="new_message.php">
<input type="submit" class="submit" value="Send a New Message">
</form>
</div>
</div>
</div>

But it doesn’t show the table styles and example the class submit I’ve applied on my button.

But they all work on all my other pages?

Example of a working one :


<title>DropDown - Best Booter Out!</title><link href="css/reset.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="css/ie.css" media="screen" rel="stylesheet" type="text/css">
<![endif]-->
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-tipsy.js"></script>
<script type="text/javascript" src="js/jquery-custom.js"></script>
	<body>

<div class="shadow"></div>
<!-- .shadow -->
<!-- BEGIN HEADER -->
<div id="header">

	<p class="logo"><a href="#" title="Administrator"><img src="img/mini.png"></a></p>
	<p class="user"><span>Welcome, <strong>Owner</strong> Harry Potter</span> <a href="inboxpm.php" class="tooltip" title="Do you want to view your messages?">Inbox</a> - <a href="mysettings.php" class="tooltip" title="Do you want to view your settings?">Settings</a> - <a href="logout.php" onclick='return confirm("Are you sure you want to logout?");' class="tooltip" title="Do you want to logout?" style="height: 18px; padding-top: 5px;">Logout</a></p>
</div><!-- end div #header -->

<!-- END HEADER -->
<!-- BEGIN SLIDEBAR -->
<div id="slidebar">
    <div id="menu">
    	<div class="menu-item">
    		<h3 class="open"><img src="img/icon/m-close.png" alt="" />Dashboard</h3>
    		<div class="menu-overflow">
    			<div class="menu-content">
    				<ul>
    					<li><a href="index.php"><img src="img/icon/famfamfam/chart_bar.png" alt="" />Home</a></li>

    					<li><a href="dropdown.php"><img src="img/icon/famfamfam/server.png" alt="" />Boot</a></li>
					<li><a href="updates.php"><img src="img/icon/famfamfam/newspaper.png" alt="" />Updates</a></li>
					<li><a href="mysettings.php"><img src="img/icon/famfamfam/image_edit.png" alt="" />Settings</a></li>
					<li><a href="new_message.php"><img src="img/icon/famfamfam/page_edit.png" alt="" />Send Message</a></li>
					<li><a href="logout.php" onclick='return confirm("Are you sure you want to logout?");'"><img src="images/delete.png" alt="" />Logout</a></li>
    				</ul>

    			</div><!-- end div .menu-content -->
    		</div><!-- end div .menu-overflow -->
    	</div><!-- end div .menu-item -->
    	<div class="menu-item">
    		<h3 class="open"><img src="img/icon/m-open.png" alt="" />Tools</h3>
    		<div class="menu-overflow">
    			<div class="menu-content">
    				<ul>

    					<li><a href="check.php"><img src="img/icon/famfamfam/page_edit.png" alt="" />Website Checker</a></li>
    					<li><a href="ipgrab.php"><img src="img/icon/famfamfam/page_edit.png" alt="" />IP Grabber</a></li>
					<li><a href="trace.php"><img src="img/icon/famfamfam/server.png" alt="" />Trace</a></li>
    				</ul>
    			</div><!-- end div .menu-content -->
    		</div><!-- end div .menu-overflow -->
    	</div><!-- end div .menu-item -->

	    	<div class="menu-item">
    		<h3 class="close"><img src="img/icon/m-close.png" alt="" />Administrator</h3>
    		<div class="menu-overflow" >
    			<div class="menu-content">
    				<ul>
    					<li><a href="OakK23mMWw02wa.php">Add Shells</a></li>
    					<li><a href="OakK23mMWw02wb.php">Manage Shells</a></li>

    					<li><a href="logs.php">Attack Logs</a></li>
					<li><a href="OakK23mMWw01wW.php">Admin Panel</a></li>
    				</ul>
    			</div><!-- end div .menu-content -->
    		</div><!-- end div .menu-overflow -->
    	</div><!-- end div .menu-item -->
	    </div><!-- end div #menu -->
</div><!-- end div #slidebar -->

<!-- END SLIDEBAR -->
<div id="content">
<div class="box-out">
    	<div class="box-in">
    		<div class="box-head"><h1>Statistics</h1></div>
    		<div class="box-content">
			<div class="table">
    				<form action="#" method="post">
    					<table>
    						<thead>

    							<tr>
    								<td><div>Member Statistics</div></td>
    								<td><div> </div></td>
    							</tr>
    						</thead>
    						<tbody>
    							<tr>
    								<td><div class="even">Total Users</div></td>

    								<td><div class="even"><a class="tooltip" href="#" title="How much users do we got in total">36     </div></td>
    							</tr>
    							<tr>
    								<td><div class="odd">Activated Users</div></td>
    								<td><div class="odd"><a class="tooltip" href="#" title="How many activated users are there">30</a></div></td>
    							</tr>
    							<tr>

    								<td><div class="even">Pending Users</div></td>
    								<td><div class="even"><a class="tooltip" href="#" title="How many users are pending">6</a></div></td>
    							</tr>
    							<tr>
    								<td><div class="odd">Total Attacks</div></td>
    								<td><div class="odd"><a class="tooltip" href="#" title="How many attacks did we do">1559</a></div></td>
    							</tr>

    						</tbody>
    					</table>
    				</form>
    			</div><!-- end div .table -->
    			<div class="table">
    				<form action="#" method="post">
    					<table>
    						<thead>
    							<tr>

    								<td><div>Shell Statistics</div></td>
    								<td><div> </div></td>
    							</tr>
    						</thead>
    						<tbody>
    							<tr>
    								<td><div class="even">Shell Rotation</div></td>

    								<td><div class="even"><a class="tooltip" href="#" title="Shows if there is wether or not a shell rotation">            															On
            															</a></div></td>
    							</tr>
    							<tr>
    								<td><div class="odd">Shells Available</div></td>
    								<td><div class="odd"><a class="tooltip" href="#" title="Shows the total amount of the shells we can use">3607</a></div></td>
    							</tr>
    						</tbody>

    					</table>
    				</form>
    			</div><!-- end div .table -->
    		</div><!-- end div .box-content -->
    	</div><!-- end div .box-in -->
    </div><!-- end div .box-out -->
<br>
<br><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery.validate.js"></script>

  <script>
  $(document).ready(function(){
    $("#myform").validate();
	 $("#pform").validate();
  });
  </script>
</head>

<body>
<div class="box-out">
    	<div class="box-in">
    		<div class="box-head"><h1>IPGrabber</h1></div>
    		<div class="box-content">
    <div class="box-content">
<p>
<label>Image Grab</label>
<input size="50" class="text" type="text" value="#">
<br>
<br>
<label>Vote Grab</label>
<input size="50" class="text" type="text" value="#">
<br>
<br>
Click <a href="ipgrab2.php">here</a> to view all details e.g Host, Browser, Referrer!

</p>
<br>
<h1>Newest IPs are shown at the top!</h1>
<br>
<h1>Clear Logs <a href="ipgrab.php?truncate" onclick='return confirm("WARNING : Abuse of deleting them will result into account suspension!");' class="tooltip" title="Clear logs only if there are more then 20!"><image border=0 src="images/cancel.png"></a></h1>
<div class="table">
<table>
<thead>
    <tr>

      <td><div>Time</div></td>
	<td><div>Type</div></td>

      <td><div>type 2</div></td>
      </tr>
</thead>
    <tbody>
    <tr>
      <td><div class="even">23 May 2011 06:54:50</div></td>
	<td><div class="even">Image Grab</div></td>
	  <td><div class="even">eg</div></td>

	  
      </tr>
</tdbody>

	<tbody>
    <tr>
      <td><div class="even">21 May 2011 16:04:55</div></td>
	<td><div class="even">Image Grab</div></td>
	  <td><div class="even">eg</div></td>

	  
      </tr>
</tdbody>

	
  </table>

</div>
</div>
</div>
</div>
</div>
</body>
</html>


<br>


Hi,

Ok at last :slight_smile:

The css isn’t being applied because you are referencing it via a div with a class of table ( <div class=“table”>) and in that last section you have no such div.

If you add this <div class=“table”> in the right place all the styles will apply.

e.g. here:


<div class="box-out">
<div class="box-in">
    <div class="box-head">
        <h1>Inbox</h1>
    </div>
    <div class="box-content">
       [B] <div class="table">[/B]
            <table>
                <thead>


Now the rules will apply because they are referenced like so:


#content .box-content .table {
    width:100%;
    padding:10px 0
}
#content .box-content .table table thead {
    border-top:1px solid #ccc;
    height:38px;
    line-height:38px;
    font-size:12px;
    color:#fff;
    font-weight:700
}

etc...

Missing doctype (you probably do want one), missing <html>, <head>, </head> is in wrong place, missing </body>, two <body> elements and in second document you have <br> after </html>. Then you include javascript files twice: once at start of document and once in middle, some of them are duplicates. Those errors probably aren’t responsible to missing css, but you should fix them anyway because right now your documents are a total mess.

And its </tbody>, not </tdbody>. Check your files with HTML validator to see all errors.

As for missing styling, probably error lies in your css files or maybe you have set wrong url to it. My guess is on wrong url.

This may or may not help the issue, but you don’t have a closing </head> before you begin the <body> element, so put that in and see what happens. :slight_smile:

Thanks for the suggestions.

I have closed the head and then started body element which should be more valid now.

But this did not solve the problem, all my pages are messy because of the different scripts had no time to organize.

My other pages that show proper are the same messy code how ever
inboxpm.php doesn’t show proper.

I will give the document itself it might help more :


<?php
session_start();
require("aah.php");

$get_messages = mysql_query("SELECT message_id FROM messages WHERE to_user='$userfinal' ORDER BY message_id DESC") or die(mysql_error());
$get_messages2 = mysql_query("SELECT * FROM messages WHERE to_user='$userfinal' ORDER BY message_id DESC") or die(mysql_error());
$num_messages = mysql_num_rows($get_messages);
?>
<div class="box-out">
    	<div class="box-in">
    		<div class="box-head"><h1>Inbox</h1></div>
    		<div class="box-content">
<p>
<table>
<thead>
<tr>
<td><div>Messages</div></td>
<td><div>Status</div></td>
</tr>
</thead>
<tbody>
<tr>
<?php
for($count = 1; $count <= $num_messages; $count++)
{

    $row = mysql_fetch_array($get_messages2);
    //if the message is not read, show "(new)" after the title, else, just show the title.
if($row['message_read'] == 0)
{
    echo '<td><div><a href="read_message.php?messageid=' . $row['message_id'] . '">' . $row['message_title'] . '</a></td><td>Unread</div></td></tr><tr>';
}else{
echo '<td><div><a href="read_message.php?messageid=' . $row['message_id'] . '">' . $row['message_title'] . '</a></td><td>Read</div></td></tr><tr>';
	}
}
?>
</tr>
</tbody>
</table>
<br>
<br>
<form name="newmsgfrm" method="post" action="new_message.php">
<input type="submit" class="submit" value="Send a New Message">
</form>
</p>
</div>
</div>
</div>
<?php 
include 'aaf.php';
?>

Not really. Apart from several serious security issues with your code (relying on register_globals being enabled and putting those variables directly in sql query without checking them first), that code is useless. It is completely irrelevant. All css links are in header, which is probably in aah.php

You should read this: PHP: Using Register Globals - Manual
and this: PHP: Magic Quotes - Manual

Posting your css files might be helpful.

Thanks for the concern about my security but I don’t really care about that,

I just need the template fixed, and nothing is wrong with my stylesheet, it has to do something with my page.
I can’t seem to figure thats why I posted here.

Hi,

In your first post the two snippets of code that you posted are exactly the same as far as I can see. Did you mean to post something different for the second one, or did I misunderstand?

In the snippet you posted below the code is different and you have wrapped your table in a p element which is not allowed and may stop some browsers from parsing correctly.

You can’t wrap a table in a p element so remove the opening and closing p tags.

If your CSS is working in other pages then it’s likely that it is corrupt html that is causing the issue. You only have to have one missing tag in a crucial place and the css misses its target completely.

So as others have said make sure the structure of the html is well formed.

It would be easier to debug this with a real page to work with:)

Don’t forget to inspect the elements with Firebug and you can soon see where the styles are being applied and which elements are missed and then narrow the problem down that way.

I am going to try Firebug now.

And about the snippets,

The first one was the output of my page that was not properly working ( Inbox Page )

The second one was the output of my page that was properly working ( Grabber Page )

The third one was the page source itself ( Inbox Page )

Nevermind Firebug is really nothing for me, to weird and slow.

Really need help with this can’t figure this out, already added the correct tags and ended them where needed.

You also have a closing div outside the td in which it started which will freak browsers out.


<div class="box-content">
<p>
<table>
    <thead>
        <tr>
            <td><div>Messages</div></td>
            <td><div>Status</div></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><div>
                <a href="read_message.php?messageid=54">****ing what bro</a></td>
            <td>Read
   [B] </div>[/B]
    
    </td>
    
    </tr>
    
    <tr>
        <td><div>
            <a href="read_message.php?messageid=53">****ing hopw it works</a></td>
        <td>Read
  [B]  </div>[/B]


Move all those closing divs into the correct place.

There are many more errors as others have mentioned but without a link to the actual page or without a working demo it will be hard to pinpoint which error is causing the problem because as I mentioned it only takes one error in some cases to trip up a whole page.

Although your other pages are working with errors it doesn’t neceesarily mean that all pages will work with errors and the ony way to eliminate html errors as a cause is to get them fixed and out of the equation. After that then debugging becomes easy.

Sorry, I can’t be more specific as it’s a bit like working in the dark when you don’t have a working copy to debug.

Nevermind Firebug is really nothing for me, to weird and slow

Firebug is the premier development tool for all experienced developers. There really is nothing better and nothing more useful. You really should stick at it and learn to use it to your advantage. I use it constantly, literally hundreds (perhaps thousands) of times a day.

Post the full updated html for the page that’s not working (view source) and all the css files that you are using and indicate by name if possible which elements seem to be missing the styles that you mentioned (I understand you said some elements are styled and some are not).

When I compare the source output, it looks same as all the others, I don’t get what is wrong.

And the header combined with all other pages work except with the inbox, while when comparing inbox with other pages excluding the header, it also looks the same structure.

I have added :
<– Here ends aah.php ( Header that I required ) –>
<– Here starts the inboxpm.php –>

To where those start and end.
Also I appreciate once again the time you spend for me.


<-- Here starts the aah.php ( header that I required ) -->
<html>
<title>DropDown - Best Booter Out!</title><head>
<link href="css/reset.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="css/ie.css" media="screen" rel="stylesheet" type="text/css">
<![endif]-->
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-tipsy.js"></script>
<script type="text/javascript" src="js/jquery-custom.js"></script>
</head>
	<body>

<div class="shadow"></div>

<!-- .shadow -->
<!-- BEGIN HEADER -->
<div id="header">
	<p class="logo"><a href="#" title="Administrator"><img src="img/mini.png"></a></p>
	<p class="user"><span>Welcome, <strong>Owner</strong> Harry Potter</span> <a href="inboxpm.php" class="tooltip" title="Do you want to view your messages?">Inbox</a> - <a href="mysettings.php" class="tooltip" title="Do you want to view your settings?">Settings</a> - <a href="logout.php" onclick='return confirm("Are you sure you want to logout?");' class="tooltip" title="Do you want to logout?" style="height: 18px; padding-top: 5px;">Logout</a></p>

</div><!-- end div #header -->
<!-- END HEADER -->
<!-- BEGIN SLIDEBAR -->
<div id="slidebar">
    <div id="menu">
    	<div class="menu-item">
    		<h3 class="open"><img src="img/icon/m-close.png" alt="" />Dashboard</h3>
    		<div class="menu-overflow">
    			<div class="menu-content">
    				<ul>

    					<li><a href="index.php"><img src="img/icon/famfamfam/chart_bar.png" alt="" />Home</a></li>
    					<li><a href="dropdown.php"><img src="img/icon/famfamfam/server.png" alt="" />Boot</a></li>
					<li><a href="updates.php"><img src="img/icon/famfamfam/newspaper.png" alt="" />Updates</a></li>
					<li><a href="mysettings.php"><img src="img/icon/famfamfam/image_edit.png" alt="" />Settings</a></li>
					<li><a href="new_message.php"><img src="img/icon/famfamfam/page_edit.png" alt="" />Send Message</a></li>
					<li><a href="logout.php" onclick='return confirm("Are you sure you want to logout?");'"><img src="http://www.sitepoint.com/forums/images/delete.png" alt="" />Logout</a></li>

    				</ul>
    			</div><!-- end div .menu-content -->
    		</div><!-- end div .menu-overflow -->
    	</div><!-- end div .menu-item -->
    	<div class="menu-item">
    		<h3 class="open"><img src="img/icon/m-open.png" alt="" />Tools</h3>
    		<div class="menu-overflow">
    			<div class="menu-content">

    				<ul>
    					<li><a href="check.php"><img src="img/icon/famfamfam/page_edit.png" alt="" />Website Checker</a></li>
    					<li><a href="ipgrab.php"><img src="img/icon/famfamfam/page_edit.png" alt="" />IP Grabber</a></li>
					<li><a href="trace.php"><img src="img/icon/famfamfam/server.png" alt="" />Trace</a></li>
    				</ul>
    			</div><!-- end div .menu-content -->
    		</div><!-- end div .menu-overflow -->

    	</div><!-- end div .menu-item -->

	    	<div class="menu-item">
    		<h3 class="close"><img src="img/icon/m-close.png" alt="" />Administrator</h3>
    		<div class="menu-overflow" >
    			<div class="menu-content">
    				<ul>
    					<li><a href="OakK23mMWw02wa.php">Add Shells</a></li>

    					<li><a href="OakK23mMWw02wb.php">Manage Shells</a></li>
    					<li><a href="logs.php">Attack Logs</a></li>
					<li><a href="OakK23mMWw01wW.php">Admin Panel</a></li>
    				</ul>
    			</div><!-- end div .menu-content -->
    		</div><!-- end div .menu-overflow -->
    	</div><!-- end div .menu-item -->

	    </div><!-- end div #menu -->
</div><!-- end div #slidebar -->
<!-- END SLIDEBAR -->
<div id="content">
<div class="box-out">
    	<div class="box-in">
    		<div class="box-head"><h1>Statistics</h1></div>
    		<div class="box-content">
			<div class="table">
    				<form action="#" method="post">

    					<table>
    						<thead>
    							<tr>
    								<td><div>Member Statistics</div></td>
    								<td><div> </div></td>
    							</tr>
    						</thead>
    						<tbody>

    							<tr>
    								<td><div class="even">Total Users</div></td>
    								<td><div class="even"><a class="tooltip" href="#" title="How much users do we got in total">36     </div></td>
    							</tr>
    							<tr>
    								<td><div class="odd">Activated Users</div></td>
    								<td><div class="odd"><a class="tooltip" href="#" title="How many activated users are there">30</a></div></td>

    							</tr>
    							<tr>
    								<td><div class="even">Pending Users</div></td>
    								<td><div class="even"><a class="tooltip" href="#" title="How many users are pending">6</a></div></td>
    							</tr>
    							<tr>
    								<td><div class="odd">Total Attacks</div></td>

    								<td><div class="odd"><a class="tooltip" href="#" title="How many attacks did we do">1592</a></div></td>
    							</tr>
    						</tbody>
    					</table>
    				</form>
    			</div><!-- end div .table -->
    			<div class="table">
    				<form action="#" method="post">

    					<table>
    						<thead>
    							<tr>
    								<td><div>Shell Statistics</div></td>
    								<td><div> </div></td>
    							</tr>
    						</thead>
    						<tbody>

    							<tr>
    								<td><div class="even">Shell Rotation</div></td>
    								<td><div class="even"><a class="tooltip" href="#" title="Shows if there is wether or not a shell rotation">            															On
            															</a></div></td>
    							</tr>
    							<tr>
    								<td><div class="odd">Shells Available</div></td>
    								<td><div class="odd"><a class="tooltip" href="#" title="Shows the total amount of the shells we can use">3607</a></div></td>

    							</tr>
    						</tbody>
    					</table>
    				</form>
    			</div><!-- end div .table -->
    		</div><!-- end div .box-content -->
    	</div><!-- end div .box-in -->
    </div><!-- end div .box-out -->
<br>
<br>
<-- Here ends aah.php ( Header that I required ) -->
<-- Here starts the inboxpm.php -->
<div class="box-out">
    	<div class="box-in">
    		<div class="box-head"><h1>Inbox</h1></div>
<div class="box-content">

<table>
<thead>

<tr>
<td><div>From</div></td>
<td><div>Messages</div></td>
<td><div>Status</div></td>

</tr>

</thead>
<tbody>
<tr>
<td><div>Allergy</td></div><td><div><a href="read_message.php?messageid=60">LOL</a></td><td>Read</div></td></tr><tr><td><div>potnikh4x</td></div><td><div><a href="read_message.php?messageid=58"><3</a></td><td>Read</div></td></tr><tr><td><div>cruel2a</td></div><td><div><a href="read_message.php?messageid=54">****ing what bro</a></td><td>Read</div></td></tr><tr><td><div></td></div><td><div><a href="read_message.php?messageid=53">****ing hopw it works</a></td><td>Read</div></td></tr><tr><td><div>vince</td></div><td><div><a href="read_message.php?messageid=52">lol wut wtf ****ing shitedjj</a></td><td>Read</div></td></tr><tr><td><div>vince</td></div><td><div><a href="read_message.php?messageid=51">omfg</a></td><td>Read</div></td></tr><tr><td><div>vince</td></div><td><div><a href="read_message.php?messageid=50">****ing hopw it works</a></td><td>Read</div></td></tr><tr><td><div></td></div><td><div><a href="read_message.php?messageid=49">1111111</a></td><td>Read</div></td></tr><tr><td><div></td></div><td><div><a href="read_message.php?messageid=48">hHA</a></td><td>Read</div></td></tr><tr><td><div>164</td></div><td><div><a href="read_message.php?messageid=47">lol wut</a></td><td>Read</div></td></tr><tr><td><div></td></div><td><div><a href="read_message.php?messageid=46">hgtdesw</a></td><td>Read</div></td></tr><tr><td><div>Resource id #13</td></div><td><div><a href="read_message.php?messageid=45">hgtdesw</a></td><td>Read</div></td></tr><tr><td><div>Resource id #13</td></div><td><div><a href="read_message.php?messageid=44">bvdsa</a></td><td>Read</div></td></tr><tr><td><div></td></div><td><div><a href="read_message.php?messageid=43">omg</a></td><td>Read</div></td></tr><tr><td><div></td></div><td><div><a href="read_message.php?messageid=42">omg</a></td><td>Read</div></td></tr><tr><td><div>aaaaaaaaa</td></div><td><div><a href="read_message.php?messageid=41">omg</a></td><td>Read</div></td></tr><tr><td><div>aaaaaaaaa</td></div><td><div><a href="read_message.php?messageid=40">ghyuikopl</a></td><td>Read</div></td></tr><tr><td><div></td></div><td><div><a href="read_message.php?messageid=39">**** you</a></td><td>Read</div></td></tr><tr><td><div></td></div><td><div><a href="read_message.php?messageid=36">**** you</a></td><td>Read</div></td></tr><tr><td><div></td></div><td><div><a href="read_message.php?messageid=35">**** you</a></td><td>Read</div></td></tr><tr><td><div></td></div><td><div><a href="read_message.php?messageid=34">test number 2</a></td><td>Read</div></td></tr><tr><td><div></td></div><td><div><a href="read_message.php?messageid=33">testst</a></td><td>Read</div></td></tr><tr></tr>

</tbody>
</table>
<br>
<br>
<form name="newmsgfrm" method="post" action="new_message.php">
<input type="submit" class="submit" value="Send a New Message">
</form>
</div>
</div>
</div>
</body>
</html>

I thin the problem is that div that I mentioned above.


<div class="box-out">
<div class="box-in">
<div class="box-head">
    <h1>Inbox</h1>
</div>
<div class="box-content">
<table>
    <thead>
        <tr>
            <td><div>From</div></td>
            <td><div>Messages</div></td>
            <td><div>Status</div></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><div>
                Allergy</td>
    [B]</div>[/B]
    <td><div>
            <a href="read_message.php?messageid=60">LOL</a></td>
        <td>Read
    </div>
    </td>
    </tr>
    <tr>
        <td><div>
            potnikh4x</td>
   [B] </div>[/B]
    <td><div>
            <a href="read_message.php?messageid=58"><3</a></td>
        <td>Read
    </div>
    </td>
    </tr>
    <tr>
        <td><div>
            cruel2a</td>
  [B]      </div>[/B]
        <td><div>
            <a href="read_message.php?messageid=54">****ing what bro</a></td>
        <td>Read
            </div></td>
    </tr>
    <tr>
        <td><div></td>
        </div>


The browser thinks that box-out, box-in and box-content are all finishing at the first three closing divs I have marked in bold. Therefore any rules that apply to those classes will stop short at the closing div because it thinks the context has ended.

Try just tidying up that table and test again. It may not be the cause but then we can rule it out and look again.:slight_smile:

Well it is looking fine tho on my code because this is how it looks :


    echo '<td><div>' . $row['from_user'] . '</td></div><td><div><a href="read_message.php?messageid=' . $row['message_id'] . '">' . $row['message_title'] . '</a></td><td>Unread</div></td></tr><tr>';
}else{
echo '<td><div>' . $row['from_user'] . '</td></div><td><div><a href="read_message.php?messageid=' . $row['message_id'] . '">' . $row['message_title'] . '</a></td><td>Read</div></td></tr><tr>';

And even if I would remove that.


<tbody>
<tr>
<td>
test</td>
<?php
/*
for($count = 1; $count <= $num_messages; $count++)
{

    $row = mysql_fetch_array($get_messages2);
    //if the message is not read, show "(new)" after the title, else, just show the title.
if($row['message_read'] == 0)
{
    echo '<td><div>' . $row['from_user'] . '</td></div><td><div><a href="read_message.php?messageid=' . $row['message_id'] . '">' . $row['message_title'] . '</a></td><td>Unread</div></td></tr><tr>';
}else{
echo '<td><div>' . $row['from_user'] . '</td></div><td><div><a href="read_message.php?messageid=' . $row['message_id'] . '">' . $row['message_title'] . '</a></td><td>Read</div></td></tr><tr>';
	}
}
*/
?>
</tr>
</tbody>

It would still cause the same problem.

Also, the header part is fully working, till we read the inboxpm.php

This is example picture :
http://img688.imageshack.us/img688/4371/exampleyq.png

I don’t do php but I can see that the above is badly broken.

It should be something like this:


echo '
<td><div>' . $row['from_user'] . '</div></td>
<td><div><a href="read_message.php?messageid=' . $row['message_id'] . '">' . $row['message_title'] . '</a></div></td>
<td><div>Unread</div></td>
</tr>
<tr>';
    }else{
    echo '
    <td><div>' . $row['from_user'] . '</div></td>
    <td><div><a href="read_message.php?messageid=' . $row['message_id'] . '">' . $row['message_title'] . '</a></div></td>
    <td><div>Read</div></td>
</tr>
<tr>';


Note the opening and closing div positions.

Also, the header part is fully working, till we read the inboxpm.php

This is example picture :
http://img688.imageshack.us/img688/4371/exampleyq.png

Yes but that broken table starts after the header which is exactly where we were looking.

I still believe the problem is the broken divs.

As I said above do me a “View source” with the full html and css and I will rebuild the page locally and test whether moving the divs into the right position makes it work as expected.

URL to the full thing is http://services-runesqape.com/panel/inboxpm.php

If you need an user account tell me.

HTML :


<html>
<title>DropDown - Best Booter Out!</title><head>
<link href="css/reset.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="css/ie.css" media="screen" rel="stylesheet" type="text/css">
<![endif]-->
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-tipsy.js"></script>
<script type="text/javascript" src="js/jquery-custom.js"></script>
</head>
	<body>

<div class="shadow"></div>

<!-- .shadow -->
<!-- BEGIN HEADER -->
<div id="header">
	<p class="logo"><a href="#" title="Administrator"><img src="img/mini.png"></a></p>
	<p class="user"><span>Welcome, <strong>Owner</strong> Harry Potter</span> <a href="inboxpm.php" class="tooltip" title="Do you want to view your messages?">Inbox</a> - <a href="mysettings.php" class="tooltip" title="Do you want to view your settings?">Settings</a> - <a href="logout.php" onclick='return confirm("Are you sure you want to logout?");' class="tooltip" title="Do you want to logout?" style="height: 18px; padding-top: 5px;">Logout</a></p>

</div><!-- end div #header -->
<!-- END HEADER -->
<!-- BEGIN SLIDEBAR -->
<div id="slidebar">
    <div id="menu">
    	<div class="menu-item">
    		<h3 class="open"><img src="img/icon/m-close.png" alt="" />Dashboard</h3>
    		<div class="menu-overflow">
    			<div class="menu-content">
    				<ul>

    					<li><a href="index.php"><img src="img/icon/famfamfam/chart_bar.png" alt="" />Home</a></li>
    					<li><a href="dropdown.php"><img src="img/icon/famfamfam/server.png" alt="" />Boot</a></li>
					<li><a href="updates.php"><img src="img/icon/famfamfam/newspaper.png" alt="" />Updates</a></li>
					<li><a href="mysettings.php"><img src="img/icon/famfamfam/image_edit.png" alt="" />Settings</a></li>
					<li><a href="new_message.php"><img src="img/icon/famfamfam/page_edit.png" alt="" />Send Message</a></li>
					<li><a href="logout.php" onclick='return confirm("Are you sure you want to logout?");'"><img src="images/delete.png" alt="" />Logout</a></li>

    				</ul>
    			</div><!-- end div .menu-content -->
    		</div><!-- end div .menu-overflow -->
    	</div><!-- end div .menu-item -->
    	<div class="menu-item">
    		<h3 class="open"><img src="img/icon/m-open.png" alt="" />Tools</h3>
    		<div class="menu-overflow">
    			<div class="menu-content">

    				<ul>
    					<li><a href="check.php"><img src="img/icon/famfamfam/page_edit.png" alt="" />Website Checker</a></li>
    					<li><a href="ipgrab.php"><img src="img/icon/famfamfam/page_edit.png" alt="" />IP Grabber</a></li>
					<li><a href="trace.php"><img src="img/icon/famfamfam/server.png" alt="" />Trace</a></li>
    				</ul>
    			</div><!-- end div .menu-content -->
    		</div><!-- end div .menu-overflow -->

    	</div><!-- end div .menu-item -->

	    	<div class="menu-item">
    		<h3 class="close"><img src="img/icon/m-close.png" alt="" />Administrator</h3>
    		<div class="menu-overflow" >
    			<div class="menu-content">
    				<ul>
    					<li><a href="OakK23mMWw02wa.php">Add Shells</a></li>

    					<li><a href="OakK23mMWw02wb.php">Manage Shells</a></li>
    					<li><a href="logs.php">Attack Logs</a></li>
					<li><a href="OakK23mMWw01wW.php">Admin Panel</a></li>
    				</ul>
    			</div><!-- end div .menu-content -->
    		</div><!-- end div .menu-overflow -->
    	</div><!-- end div .menu-item -->

	    </div><!-- end div #menu -->
</div><!-- end div #slidebar -->
<!-- END SLIDEBAR -->
<div id="content">
<div class="box-out">
    	<div class="box-in">
    		<div class="box-head"><h1>Statistics</h1></div>
    		<div class="box-content">
			<div class="table">
    				<form action="#" method="post">

    					<table>
    						<thead>
    							<tr>
    								<td><div>Member Statistics</div></td>
    								<td><div> </div></td>
    							</tr>
    						</thead>
    						<tbody>

    							<tr>
    								<td><div class="even">Total Users</div></td>
    								<td><div class="even"><a class="tooltip" href="#" title="How much users do we got in total">36     </div></td>
    							</tr>
    							<tr>
    								<td><div class="odd">Activated Users</div></td>
    								<td><div class="odd"><a class="tooltip" href="#" title="How many activated users are there">30</a></div></td>

    							</tr>
    							<tr>
    								<td><div class="even">Pending Users</div></td>
    								<td><div class="even"><a class="tooltip" href="#" title="How many users are pending">6</a></div></td>
    							</tr>
    							<tr>
    								<td><div class="odd">Total Attacks</div></td>

    								<td><div class="odd"><a class="tooltip" href="#" title="How many attacks did we do">1593</a></div></td>
    							</tr>
    						</tbody>
    					</table>
    				</form>
    			</div><!-- end div .table -->
    			<div class="table">
    				<form action="#" method="post">

    					<table>
    						<thead>
    							<tr>
    								<td><div>Shell Statistics</div></td>
    								<td><div> </div></td>
    							</tr>
    						</thead>
    						<tbody>

    							<tr>
    								<td><div class="even">Shell Rotation</div></td>
    								<td><div class="even"><a class="tooltip" href="#" title="Shows if there is wether or not a shell rotation">            															On
            															</a></div></td>
    							</tr>
    							<tr>
    								<td><div class="odd">Shells Available</div></td>

    								<td><div class="odd"><a class="tooltip" href="#" title="Shows the total amount of the shells we can use">3607</a></div></td>
    							</tr>
    						</tbody>
    					</table>
    				</form>
    			</div><!-- end div .table -->
    		</div><!-- end div .box-content -->
    	</div><!-- end div .box-in -->

    </div><!-- end div .box-out -->
<br>
<br><div class="box-out">
    	<div class="box-in">
    		<div class="box-head"><h1>Inbox</h1></div>
<div class="box-content">

<table>
<thead>

<tr>
<td><div>From</div></td>

<td><div>Messages</div></td>
<td><div>Status</div></td>
</tr>

</thead>
<tbody>
<tr>

    <td><div>Allergy</div></td>
    <td><div><a href="read_message.php?messageid=60">LOL</a></div></td>
    <td><div>Read</div></td>

</tr>
<tr>
    <td><div>potnikh4x</div></td>
    <td><div><a href="read_message.php?messageid=58"><3</a></div></td>
    <td><div>Read</div></td>
</tr>
<tr>
    <td><div>cruel2a</div></td>
    <td><div><a href="read_message.php?messageid=54">****ing what bro</a></div></td>

    <td><div>Read</div></td>
</tr>
<tr>
    <td><div></div></td>
    <td><div><a href="read_message.php?messageid=53">****ing hopw it works</a></div></td>
    <td><div>Read</div></td>
</tr>
<tr>
    <td><div>vince</div></td>

    <td><div><a href="read_message.php?messageid=52">lol wut wtf ****ing shitedjj</a></div></td>
    <td><div>Read</div></td>
</tr>
<tr>
    <td><div>vince</div></td>
    <td><div><a href="read_message.php?messageid=51">omfg</a></div></td>
    <td><div>Read</div></td>

</tr>
<tr>
    <td><div>vince</div></td>
    <td><div><a href="read_message.php?messageid=50">****ing hopw it works</a></div></td>
    <td><div>Read</div></td>
</tr>
<tr>
    <td><div></div></td>
    <td><div><a href="read_message.php?messageid=49">1111111</a></div></td>

    <td><div>Read</div></td>
</tr>
<tr>
    <td><div></div></td>
    <td><div><a href="read_message.php?messageid=48">hHA</a></div></td>
    <td><div>Read</div></td>
</tr>
<tr>
    <td><div>164</div></td>

    <td><div><a href="read_message.php?messageid=47">lol wut</a></div></td>
    <td><div>Read</div></td>
</tr>
<tr>
    <td><div></div></td>
    <td><div><a href="read_message.php?messageid=46">hgtdesw</a></div></td>
    <td><div>Read</div></td>
</tr>

<tr>
    <td><div>Resource id #13</div></td>
    <td><div><a href="read_message.php?messageid=45">hgtdesw</a></div></td>
    <td><div>Read</div></td>
</tr>
<tr>
    <td><div>Resource id #13</div></td>
    <td><div><a href="read_message.php?messageid=44">bvdsa</a></div></td>

    <td><div>Read</div></td>
</tr>
<tr>
    <td><div></div></td>
    <td><div><a href="read_message.php?messageid=43">omg</a></div></td>
    <td><div>Read</div></td>
</tr>
<tr>
    <td><div></div></td>

    <td><div><a href="read_message.php?messageid=42">omg</a></div></td>
    <td><div>Read</div></td>
</tr>
<tr>
    <td><div>aaaaaaaaa</div></td>
    <td><div><a href="read_message.php?messageid=41">omg</a></div></td>
    <td><div>Read</div></td>

</tr>
<tr>
    <td><div>aaaaaaaaa</div></td>
    <td><div><a href="read_message.php?messageid=40">ghyuikopl</a></div></td>
    <td><div>Read</div></td>
</tr>
<tr>
    <td><div></div></td>
    <td><div><a href="read_message.php?messageid=39">**** you</a></div></td>

    <td><div>Read</div></td>
</tr>
<tr>
    <td><div></div></td>
    <td><div><a href="read_message.php?messageid=36">**** you</a></div></td>
    <td><div>Read</div></td>
</tr>
<tr>
    <td><div></div></td>

    <td><div><a href="read_message.php?messageid=35">**** you</a></div></td>
    <td><div>Read</div></td>
</tr>
<tr>
    <td><div></div></td>
    <td><div><a href="read_message.php?messageid=34">test number 2</a></div></td>
    <td><div>Read</div></td>
</tr>

<tr>
    <td><div></div></td>
    <td><div><a href="read_message.php?messageid=33">testst</a></div></td>
    <td><div>Read</div></td>
</tr>
<tr></tr>
</tbody>
</table>
<br>
<br>
<form name="newmsgfrm" method="post" action="new_message.php">
<input type="submit" class="submit" value="Send a New Message">

</form>
</div>
</div>
</div>
</body>
</html>

CSS :


body{background:#1e1e1e url(../img/bg.gif);font-family:"Helvetica Neue", Helvetica, Arial, "Trebuchet MS"}.shadow{position:absolute;height:80px;width:100%;background:url(../img/shadow.png) repeat-x;z-index:-1;top:56px}#header{height:56px;background:url(../img/h-bg.gif);border-bottom:1px solid #505063}#header .logo{float:left;text-align:center;width:240px;padding-left:20px}#header .logo a{color:#fff;font-family:"Trebuchet MS", Arial, Helvetica;font-style:italic;font-size:28px;line-height:56px;text-decoration:none}#header .user{float:right;font-size:11px;color:#bcc1c9;padding:28px 20px 0 0}#header .user span{color:#fff;margin-right:20px}#header .user a{color:#bcc1c9;text-decoration:none}#header .user a:hover{text-decoration:underline}#slidebar{position:absolute;top:77px;left:20px;width:240px;border-top:1px solid #353540;border-bottom:1px solid #353540}#menu .menu-item h3{background:#181c23;height:38px;line-height:38px;color:#fff;font-size:14px;padding-left:20px;cursor:pointer;border-left:1px solid #353540;border-right:1px solid #353540}#menu .menu-item h3 img{margin:0 10px -3px 0}#menu .menu-item .menu-overflow{overflow:hidden}#menu .menu-content{border-left:1px solid #353540;border-right:1px solid #353540}#menu .menu-content ul li a{padding-left:20px;display:block;color:#273343;line-height:38px;font-size:12px;text-decoration:none;background:#f9f9f9;border-top:solid 1px #fff;border-bottom:solid 1px #d5d6d7}#menu .menu-content ul li a img{margin:0 10px -2px 0}#menu .menu-content ul li a:hover{background:#f0f0f0}#content{position:absolute;left:280px;right:20px;margin-top:20px}#content .box-in{border:1px solid #3e3e3e;background:#fff}#content .box-head{height:52px;background:url(../img/ht-bg.gif);border-bottom:#3e3e3e}#content .box-content:after{content:".";display:block;height:0;clear:both;visibility:hidden}#content .box-head h1{display:block;line-height:52px;color:#fff;font-size:16px;padding-left:20px;font-weight:700}#content .box-content hr{height:1px;border:0;border-bottom:1px solid #D8D9DA;margin-top:10px;margin-bottom:10px}#content .box-content .text h1{color:#2B2B2B;font-size:24px;padding:10px}#content .box-content .text h2{color:#2B2B2B;font-size:22px;padding:10px}#content .box-content .text h3{color:#2B2B2B;font-size:20px;padding:10px}#content .box-content .text h4{color:#2B2B2B;font-size:18px;padding:10px}#content .box-content .text h5{color:#2B2B2B;font-size:16px;padding:10px}#content .box-content .text h6{color:#2B2B2B;font-size:14px;padding:10px}#content .box-content .text ul{margin-left:20px;line-height:18px;font-size:11px;color:#6a727f;list-style-type:disc;padding:0 10px}#content .box-content .text ol{margin-left:20px;line-height:18px;font-size:11px;color:#6a727f;list-style-type:decimal;padding:0 10px}#content .box-content .text p{color:#6a727f;line-height:18px;font-size:12px;padding:10px}#content .box-content .text p a{color:#3f8bbc}#content .box-content .text p a:hover{text-decoration:none}#content .box-content .table{width:100%;padding:10px 0}#content .box-content .table table thead{border-top:1px solid #ccc;height:38px;line-height:38px;font-size:12px;color:#fff;font-weight:700}#content .box-content .table table thead td{border-top:1px solid #dddedf;border-bottom:1px solid #dddedf}#content .box-content .table table thead td div{display:block;background:url(../img/th-bg.gif) repeat-x;border-right:solid 1px #888f9a;margin:1px 0;padding:0 20px}#content .box-content .table table .checkbox{width:61px}#content .box-content .table table .checkbox div{padding:0 20px}#content .box-content .table table tbody td{border-bottom:1px solid #dddedf}#content .box-content .table table tbody td tr{height:40px}#content .box-content .table table tbody td div{border-right:solid 1px #d5d6d7;line-height:38px;font-size:12px;color:#2b2b2b;font-weight:700;margin:1px 0;padding:0 20px}#content .box-content .table table tbody td .odd{background:#eee}#content .box-content .table table tbody td div a{color:#3f8bbc;text-decoration:none}#content .box-content .actions{float:left;overflow:hidden;padding:20px 0 10px}#content .box-content .actions .applyfield{border:1px solid #e0e0e0;font-size:12px;color:#2b2b2b;padding:6px 9px}#content .box-content .actions .apply{background:#000 url(../img/s-bg.gif) repeat-x;border:1px solid #050505;font-weight:700;font-size:12px;color:#fff;text-decoration:none;text-align:center;text-transform:uppercase;cursor:pointer;padding:6px 9px}#content .box-content .gallery .menu{border-right:1px solid #D8D9DA;width:195px;padding-right:10px;float:left}#content .box-content .gallery .menu ul li a{display:block;line-height:38px;background:url(../img/g-bg.gif) repeat-x scroll 0 0 #4290BF;border:1px solid #3F8BBC;color:#FFF;font-size:12px;font-weight:700;text-decoration:none;text-transform:uppercase;margin:10px;padding:0 20px}#content .box-content .gallery .images{float:left;padding:10px 10px 0}#content .box-content .gallery .images ul li{float:left;height:130px;padding:0 10px 0 0}#content .box-content .gallery .images ul li p{text-align:center;font-size:10px;line-height:22px;text-transform:uppercase;font-weight:700}#content .box-content .gallery .images ul li p a{color:#3F8BBC;text-decoration:none}#content .box-content .gallery .images ul li img{border:1px solid #dddedf;padding:1px}.show_preview{position:absolute;width:372px;height:249px;background:#fff;margin:2px}#content .box-content .pagination{float:right;overflow:hidden;padding:20px 0 10px}#content .box-content .pagination a{border:1px solid #d5d6d7;font-size:12px;color:#2b2b2b;text-decoration:none;text-align:center;background:#fff url(../img/p-bg.gif) repeat-x;padding:6px 9px}#content .box-content .pagination .gap{vertical-align:3px}#content .box-content .form p{font-size:14px;color:#2b2b2b;margin-bottom:10px}#content .box-content .form label{display:block;font-size:14px;color:#2b2b2b;font-weight:700;line-height:30px}#content .box-content .form .text{border:1px solid #e0e0e0;font-size:14px;margin-bottom:10px;color:#2b2b2b;padding:10px}#content .box-content .form .file{font-size:14px;margin-bottom:10px}#content .box-content .form .small{width:25%}#content .box-content .form .medium{width:50%}#content .box-content .form .scrollbox{background:#FFF;border:1px solid #D8D9DA;height:120px;overflow:scroll;color:#2B2B2B;font-size:12px;font-weight:700;width:50%;margin-bottom:10px}#content .box-content .form .scrollbox div input{width:inherit;margin:0 10px 0 0;padding:0}#content .box-content .form .scrollbox div.odd{background:#f9f9f9}#content .box-content .form .submit{background:#000 url(../img/s-bg.gif) repeat-x;border:1px solid #050505;font-weight:700;font-size:12px;color:#fff;text-decoration:none;text-align:center;height:38px;text-transform:uppercase;cursor:pointer;padding:0 20px}#login{width:400px;z-index:9999;position:relative;margin:100px auto 0}#login .box-in{border:1px solid #3e3e3e;background:#fff;padding:20px}#login .logo{text-align:center;padding-bottom:20px}#login .logo a{color:#fff;font-family:"Trebuchet MS", Arial, Helvetica;font-style:italic;font-size:38px;text-decoration:none}#login label{font-size:14px;color:#2b2b2b;font-weight:700;line-height:36px;display:block}#hub label{font-size:14px;color:#2b2b2b;font-weight:700;line-height:36px;display:block}#login .text{border:1px solid #e0e0e0;font-size:14px;margin-bottom:10px;color:#2b2b2b;width:316px;padding:10px}#login .checkbox{float:left;margin:11px 10px}#login .submit{background:#000 url(../img/s-bg.gif) repeat-x;border:1px solid #050505;font-weight:700;font-size:12px;color:#fff;text-decoration:none;text-align:center;height:38px;text-transform:uppercase;cursor:pointer;float:left;padding:0 20px}#login .remember-me{display:inline;float:left}#login .forget-password{color:#bcc1c9;text-decoration:none;padding-left:5px;font-size:12px}#talign { text-align:left; }#login .forget-password:hover{color:#2facee}.shadow-login{height:80px;width:100%;background:url(../img/shadow.png) repeat-x}.notification{height:40px;margin-bottom:10px;position:relative}.notification .messages{color:#2b2b2b;font-size:12px;font-weight:700;position:relative;margin:1px;padding:13px 0 13px 50px}.notification .messages .close{position:absolute;top:15px;right:10px;cursor:pointer}.error{border:1px solid #c58f75}.error .messages{background:#f2bba0 url(../img/icon/error.png) no-repeat 20px 9px}.success{border:1px solid #9ac933}.success .messages{background:#cee790 url(../img/icon/success.png) no-repeat 20px 9px}.warning{border:1px solid #e6d260}.warning .messages{background:#f9edaa url(../img/icon/warning.png) no-repeat 20px 9px}.info{border:1px solid #acdbef}.info .messages{background:#daeffb url(../img/icon/info.png) no-repeat 20px 9px}.tipsy{margin-top:10px;font-size:12px;background:url(../img/ttarrow.png) no-repeat;padding:5px}.tipsy-inner{background:#181C23;color:#bcc1c9;max-width:200px;text-align:center;padding:10px 20px}.tipsy-north{background-position:top center}.tipsy-south{background-position:bottom center}.tipsy-east{background-position:right center}.tipsy-west{background-position:left center}#container,#content .box-content .table table{width:100%}#menu .menu-content ul,#content .box-content .gallery .menu ul,#content .box-content .gallery .images ul{list-style-type:none}
.leftsb {
background:url(../img/left.png) no-repeat;
width:21px;
height:375px;
float:left;
margin-left:-20px;
margin-top:-20px;
}
.rightsb {
  background: url("../img/right.png") no-repeat scroll 0 0 transparent;
  height: 375px;
  width: 21px;
  position: absolute;
  right: -21px;
  top: 105px;
}
#content .box-out,#login .box-out{border:1px solid #353540;margin-bottom:-20px;background:url(../img/alpha.png);padding:10px}#content .box-content,#content .box-content .form,#content .box-content .form .scrollbox div,#content .box-content .chart{padding:10px}#content .box-content .table table thead .action,#content .box-content .table table .action div{border-right:0}#content .box-content .table table tbody td .even,#content .box-content .form .scrollbox div.even{background:#fff}#content .box-content .table table tbody td div a:hover,#content .box-content .gallery .images ul li p a:hover{color:#2facee;text-decoration:underline}#content .box-content .actions .submit:hover,#content .box-content .form .submit:hover,#login .submit:hover{background:#4290bf url(../img/sh-bg.gif) repeat-x;border:1px solid #3F8BBC}#content .box-content .gallery .menu ul li a:hover,#content .box-content .gallery .menu ul li .select{background:#4290bf url(../img/gh-bg.gif) repeat-x;border:1px solid #050505}#content .box-content .pagination a:hover,#content .box-content .pagination .select{background:#4290bf url(../img/ph-bg.gif) repeat-x;border:1px solid #3f8bbc;color:#fff}#content .box-content .form .textarea,#content .box-content .form .big{width:98%}#content .box-content .form .text:focus,#login .text:focus{border:1px solid #000;color:#000}#content .box-content .form .text:focus,#hub .text:focus{border:1px solid #000;color:#000}#hub .checkbox{float:left;margin:11px 10px}#hub .submit{background:#000 url(../img/s-bg.gif) repeat-x;border:1px solid #050505;font-weight:700;font-size:12px;color:#fff;text-decoration:none;text-align:left;height:38px;text-transform:uppercase;cursor:pointer;float:left;padding:0 20px}#hub .remember-me{display:inline;float:left}#hub .forget-password{color:#bcc1c9;text-decoration:none;padding-left:5px;font-size:12px}#talign { text-align:left; }#hub .forget-password:hover{color:#2facee}#hub .box-in{border:1px solid #3e3e3e;background:#fff;padding:20px}#hub label{font-size:14px;color:#2b2b2b;font-weight:700;line-height:36px;display:block}#hub .text{border:1px solid #e0e0e0;font-size:14px;margin-bottom:10px;color:#2b2b2b;width:316px;padding:10px}.contra p{color:#6a727f;font-size:14px;padding:10px;}
#ipgrab .box-content .table{width:100%;padding:10px 0}#ipgrab .box-content .table table thead{border-top:1px solid #ccc;height:38px;line-height:38px;font-size:10px;color:#fff;font-weight:700}#ipgrab .box-content .table table thead td{border-top:1px solid #dddedf;border-bottom:1px solid #dddedf}#ipgrab .box-content .table table thead td div{display:block;background:url(../img/th-bg.gif) repeat-x;border-right:solid 1px #888f9a;margin:1px 0;padding:0 20px}#ipgrab .box-content .table table .checkbox{width:61px}#ipgrab .box-content .table table .checkbox div{padding:0 20px}#ipgrab .box-content .table table tbody td{border-bottom:1px solid #dddedf}#ipgrab .box-content .table table tbody td tr{height:40px}#ipgrab .box-content .table table tbody td div{border-right:solid 1px #d5d6d7;line-height:38px;font-size:10px;color:#2b2b2b;font-weight:700;margin:1px 0;padding:0 20px}#ipgrab .box-content .table table tbody td .odd{background:#eee}#ipgrab .box-content .table table tbody td div a{color:#3f8bbc;text-decoration:none}
#ipgrab .box-content .table table thead .action,#ipgrab .box-content .table table .action div{border-right:0}#ipgrab .box-content .table table tbody td .even,#ipgrab .box-content .form .scrollbox div.even{background:#fff}#ipgrab .box-content .table table tbody td div a:hover,#ipgrab .box-content .gallery .images ul li p a:hover{color:#2facee;text-decoration:underline}#ipgrab .box-content .actions .submit:hover,#ipgrab .box-content .form .submit:hover,#login .submit:hover{background:#4290bf url(../img/sh-bg.gif) repeat-x;border:1px solid #3F8BBC}#ipgrab .box-content .gallery .menu ul li a:hover,#ipgrab .box-content .gallery .menu ul li .select{background:#4290bf url(../img/gh-bg.gif) repeat-x;border:1px solid #050505}#stext{font-size:10px;}

#loginportal{width:400px;z-index:9999;position:relative;margin:10px auto 0}#loginportal .box-in{border:1px solid #3e3e3e;background:#fff;padding:20px}#loginportal .logo{text-align:center;padding-bottom:20px}#loginportal .logo a{color:#fff;font-family:"Trebuchet MS", Arial, Helvetica;font-style:italic;font-size:38px;text-decoration:none}
#loginportal label{font-size:14px;color:#2b2b2b;font-weight:700;line-height:36px;display:block}
a .portal{color:#fff;} a visited .portal{color:#fff;} a hover .portal{color:#fff;}

F-R-E-A-K-I-N-G G-E-N-I-U-S

You are simply amazing, only one issue left, the button is not styled I am going to try to figure it out to now.

EDIT:
Got everyything now THANKS ALOT.

Almighty of the CSS.