Layout Problems

Garcia

01-30-2007, 10:45 PM

Let me state my problem. Under my links which is under the banner, it says My Tickets, and User it seems in Internet Explorer it shows an extra 2px border on the bottom. Something to do with the height I assume.

Now in firefox there is a 10px gap in between the Ticket Deck banner and the Links Bar.

Also I can't keep to get the copyright centered for some reason :s .

Here is the html:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html><head><title>Ticket Deck v. 1.0 beta</title>
<link href='index.css' rel='stylesheet' type='text/css' />
<body>
<div id='header'>
<div id='tlogo'><div id='logo'></div></div>
<div id='links'>
<ul>
<li><a href='#'><img src='images/linksmy.gif' width='91' height='25' alt='My Tickets'></a></li>
<li><a href='#'><img src='images/linksuser.gif' width='83' height='25' alt='User Area'></a></li>
</ul>
</div>
</div>
<br />
<div id='memberbar'>
<div id='textmargin1'>
test
</div>
</div>
<br/>
<div id='container'>
<div id="content">Welcome to Ticket Deck's Ticket System. What is listed below is your ticket's summary clicking on the subject title will
bring you directly to your ticket.<br/>
<div id="tickets"><div id="tbar"><div id="textmargin">Ticket Summary</div></div>
<div id="tcontain">
<table width='100%' cellpadding='3' cellspacing='1' id='toutline'>
<tr>
<th width='5%'>id</th>
<th width='30%'>Subject</th>
<th width='10%'>Priority</th>
<th width='23%'>Starter</th>
<th width='15%'>Status</th>
<th width='10%'>Dept #</th>
</tr>
<tr>
</table>

</div>
<br/>
<center>Welcome Guest! Please login to view your tickets!</center>
</div>
</div>

<div id="nav"><div id="navbar"><div id="textmargin">Login</div></div>
<div id="textmargin">
Username: <br/>
<input type="text" name="username" size="25" /><br />
Password: <br/>
<input type="text" name="username" size="25" /><br /><br />
<input type="hidden" name="do" value="new">
<center>
<input type="submit" name="Submit" value="Login" />
<input type="reset" name="reset" value="Reset" /><br/>
</center>
</div>
<div id="navstrip"><div id="textmargin">Ticket Statistics</div></div>
lovely stats here
<br/>
<div id="navstrip"><div id="textmargin">Ticket Statistics</div></div>
Update: Ticket Deck re
</div>
<div id="copyright">
<center>Powered by <a href="#">Ticket Deck</a> v. 1.0 Beta 1</center>
</div>
</div>
</div>
</body>

The CSS

body {
background: #f8f8f8;
color: #8a6600;
font: 12px verdana, arial, sans-serif;
margin: 0px;
padding: 0px;
}
a img {
border:0;
}
div#tlogo {
background-image: url(images/tlogo.gif);
width: 100%;
height: 25px;
}
div#logo {
background-image: url(images/logo.gif);
width: 197px;
height: 25px;
margin-left: 25px;
}

div#links {
height: 25px;
min-height: 25px;
width: 100%;
background-image: url(images/linksbg.gif);
padding: 0;
margin-top: 1px;
}

div#links ul {
list-style:none;
}
div#links ul li {
float:left;
}
div#header {
height: 51px;
}
div#container {
color: #ebba34;
height: 200px;
min-height: 100%;
width: 830px;
margin: auto;
}
* html #container {
height:100%;
}
*html #copyright {
position: absolute;
bottom: 0px;
}
div#date {
margin-right: 10px;
float:right;
}
div#nav {
color: #1b90b7;
border: 1px solid #61a5b9;
float: left;
width: 220px;
background: #e5f9ff;
}

div#navbar {
border: 1px solid #61a5b9;
width: 216px;
color: #1b90b7;
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
height: 23px;
background-image: url(images/nav.gif);
}

div#navstrip {
width: 100%;
background-image: url(images/nav.gif);
height: 23px;
border-top: 1px solid #1b90b7;
border-bottom: 1px solid #1b90b7;
}

div#textmargin {
margin-left: 2px;
margin-top: 4px;
}

div#textmargin1 {
margin-left: 2px;
margin-top: 6px;
}

div#tickets {
background: #ffebb3;
width: 602px;
border: 1px solid #e8af3a;
float: right;
}

div#tbar{
width: 598px;
background-image: url(images/t_bar.gif);
height: 23px;
border: 1px solid #e8af3a;
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
}

div#tcontain{
width: 599px;
height: 18px;
margin-left: 1px;
margin-right: 1px;
}
div#content {
width: 602px;
color: #8a6600;
float: right;
}

div#memberbar {
color: #1b90b7;
style: bold;
width: 80%;
height: 28px;
background: #e5f9ff;
border: 1px solid #61a5b9;
margin:auto;
}

div#toutline {
border: 1px solid #cde1ed;
}

#copyright {
text-align: center;
height:20px;
position: absolute;
bottom: 0px;
position: bottom;
}

table,
tr,
td {
background: transparent;
font-size: 12px;
font-family: verdana, arial, sans-serif;
}

table th {
background: #fadc89;
font-size: 12px;
font-family: verdana, arial, sans-serif;
font-weight: normal;
text-align: left;
padding: 2px;
}

table th a {
color: #003E67 !important;
text-decoration: none;
}

Any help is appreciated . I know that this isn't valid xhtml I haven't gone that far in fixing it to make it valid, just trying to fix the obvious problems.

Thanks,
Brian

Garcia

01-30-2007, 10:55 PM

Blah I am having problems with the Edit button! First i edited and pressed enter and it never loaded all the way to save it. Now the button won't do anything when clicked.

So here is the link http://trueamericanlife.com/support/index.html

Excavator

01-30-2007, 11:16 PM

Hello Garcia,
Add this to your CSS:
* {
margin: 0;
padding: 0;
}

But you really need to work on validating if you expect any chance of rendering the same in different browsers. Have you looked at it in IE7?

Garcia

01-30-2007, 11:41 PM

Thanks fixed my first problem!

Now how do I fix the error with IE not handling heights very well in CSS and adding more then needed, and how to center the copyright :confused: .

Regards,
Brian

VIPStephan

01-30-2007, 11:58 PM

Fixing your errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ftrueamericanlife.com%2Fsupport%2Findex.html) might fix your problems.

Garcia

01-31-2007, 12:05 AM

Ahh thanks I did realize I missed a lot of important things since I exported it from one of my php scripts I am working on shows how unorganized I can get .

Garcia

01-31-2007, 01:23 AM

Ok fixed most of the errors.

Only problem is the links bar in IE, it appears it adds an extra 2px on the bottom. And the copyright does not appear because of the position: absolute; .

Here is the code don't mind the php .

http://trueamericanlife.com/support/index.php

<?php
session_start();
header("Cache-control: no-cache");
//All the required files
require ('config.php');
require ('en/en_text.php');
require ('sql/idx_sql.php');
require ('skin/skin_global.php');

print "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html><head><title>Ticket Deck v. 1.0 beta</title>
<link href='skin/index.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div id='tlogo'><div id='logo'></div></div>
<div id='links'>
<ul>
<li><a href='#'><img src='images/linksmy.gif' width='91' height='25' alt='My Tickets' /></a></li>
<li><a href='#'><img src='images/linksuser.gif' width='83' height='25' alt='User Area' /></a></li>
</ul>
<div id='date'>
";
print date('M d, Y');
print"
</div>
</div>
<div class='spacer'></div>
<div id='memberbar'>
<div class='textmargin1'><b>";
//Get Title
while ($row = mysql_fetch_assoc($rs) )
{
print ( $row['title'] );

}
print"</b>";

//login bar. checks if person is guest, and checks if person is logged on
if($_SESSION['id']) {
print ("< <a href='userarea.php'>User Area</a> Welcome ".$_SESSION['username']. "! " );
}
else {
print "$title <b>< <a href='login_form.php'>Login</a></b> or <b><a href='register.php'>Register</a></b> Guest! ";
}

print "
</div></div>
<div class='spacer'></div>
";

print "
<div id='container'>
<div id='content'>
Welcome to Ticket Deck's Ticket System. What is listed below is your ticket's summary clicking on the subject title will bring you directly to your ticket.<br/>
<div id='tickets'><div id='tbar'><div class='textmargin'>Ticket Summary</div></div>
<div id='tcontain'>
<table width='100%' cellpadding='3' cellspacing='1' id='toutline'>
<tr>
<th width='5%'>id</th>
<th width='30%'>Subject</th>
<th width='10%'>Priority</th>
<th width='23%'>Starter</th>
<th width='15%'>Status</th>
<th width='10%'>Dept #</th>
</tr>
</table>

</div>
<br/>
";
if($_SESSION['id']) {
print ("<center>Tickets to be displayed here</center>" );
}
else {
print "<center>Welcome Guest! Please login to view your tickets!</center>";
}

print "
</div>
</div>

";

print "
<div id='nav'><div id='navbar'><div class='textmargin'> ";
if($_SESSION['id']) {
print ("Welcome <a href='logout.php'>[Log Out]</a>" );
}
else {
print "Login";
}
print "
</div></div>
<div class='textmargin'>
";
if($_SESSION['id']) {
print ("<center>Logged in as: ".$_SESSION['username']."</center>
<br/>
<b>Ticket Summary</b>: <a href='#'>View</a><br/><br/>
<b>User Area</b>: <a href='#'>View</a><br/><br/>
" );
}
else {
print "
<form action='login.php' method='post'>
Username: <br/>
<input type='text' name='username' size='25' /><br />
Password: <br/>
<input type='password' name='password' size='25' /><br /><br />
<input type='hidden' name='do' value='new' />
<center>
<input type='submit' name='Submit' value='Login' />
<input type='reset' name='reset' value='Reset' /><br/>
</center>
</form>
";
}
print "
</div>
<div class='navstrip'><div class='textmargin'>Ticket Statistics</div></div>
lovely stats here
<br/>
<div class='navstrip'><div class='textmargin'>Ticket Statistics</div></div>
Update: Ticket Deck 10% Finished
</div>
";
print "<div id='copyright'>
Powered by <a href='#'>Ticket Deck</a> v. 1.0 Beta 1
</div>
</div>
</body>
</html>
";

?>

And here is the CSS.

body {
background: #f8f8f8;
color: #1b90b7;
font: 12px verdana, arial, sans-serif;
margin: 0px;
padding: 0px;
}
a img {
border:0;
}
* {
margin: 0;
padding: 0;
}
div#tlogo {
background-image: url(images/tlogo.gif);
width: 100%;
height: 25px;
}
div#logo {
background-image: url(images/logo.gif);
width: 197px;
height: 25px;
margin-left: 25px;
}

div#links {
height: 25px;
min-height: 25px;
width: 100%;
background-image: url(images/linksbg.gif);
padding: 0;
margin-top: 1px;
}

div#links ul {
list-style:none;
}
div#links ul li {
float:left;
}
div#header {
height: 51px;
}
div#container {
color: #1b90b7;
height: 200px;
min-height: 100%;
width: 830px;
margin: auto;
}
* html #container {
height:100%;
}

div#date {
margin-right: 10px;
height: 5px;
width: 100px;
float:right;
}
div#nav {
color: #1b90b7;
border: 1px solid #61a5b9;
float: left;
width: 220px;
background: #e5f9ff;
}

div#navbar {
border: 1px solid #61a5b9;
width: 216px;
color: #1b90b7;
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
height: 23px;
background-image: url(images/nav.gif);
}

.navstrip {
width: 100%;
background-image: url(images/nav.gif);
height: 23px;
border-top: 1px solid #1b90b7;
border-bottom: 1px solid #1b90b7;
}

.textmargin {
margin-left: 2px;
margin-top: 4px;
}

.spacer {
height: 20px;
}

.textmargin1 {
margin-left: 2px;
margin-top: 6px;
}

div#tickets {
background: #ffebb3;
width: 602px;
border: 1px solid #e8af3a;
float: right;
}

div#tbar{
width: 598px;
background-image: url(images/t_bar.gif);
height: 23px;
border: 1px solid #e8af3a;
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
}

div#tcontain{
width: 599px;
height: 18px;
margin-left: 1px;
margin-right: 1px;
}
div#content {
width: 602px;
color: #8a6600;
float: right;
}

div#memberbar {
color: #1b90b7;
width: 80%;
height: 28px;
background: #e5f9ff;
border: 1px solid #61a5b9;
margin:auto;
}

div#toutline {
border: 1px solid #cde1ed;
}

#copyright {
text-align: center;
height:20px;
width: 800px;
position:absolute;
bottom:0px;
}

table,
tr,
td {
background: transparent;
font-size: 12px;
font-family: verdana, arial, sans-serif;
}

table th {
background: #fadc89;
font-size: 12px;
font-family: verdana, arial, sans-serif;
font-weight: normal;
text-align: left;
padding: 2px;
}

table th a {
color: #003E67 !important;
text-decoration: none;
}

Any help is appreciated.