Page 1 of 1

Not looking the same

Posted: Tue Dec 02, 2008 11:48 am
by CoolAsCarlito
This is my page:

http://kansasoutlawwrestling.com/argyle/backstage.php

And what I want it to look like is this:

http://prime.e-wrestling.net/backstage.php

Here's my css page:

Code: Select all

<style type="text/css">
body
{
    font-family: arial, geneva, tahoma, verdana, helvetica, sans-serif; 
    font-size: 10px; 
    font-style: normal; 
    color: #000000;
    letter-spacing: normal; 
    word-spacing: normal;
    margin: 0;
    padding: 0;
}
 
a:link, a:visited, a:active
{
    text-decoration: none;
    color: #000000;
}
 
a:hover
{
    color: #000000;
    text-decoration: underline;
}
 
#container{
    width: 100%;
    color: #000000;
    padding: 0px;
}
 
.header{
    background:  url(../../AppData/Local/Microsoft/Windows/Temporary%20Internet%20Files/Content.IE5/XWO8LA9B/%27/images/headerbg.gif%27) repeat-x;
    width: 100%;
    height: 121px;
    color: #000000;
    padding: 0px;
    margin: 0px;
}
 
.header img{
    padding: 5px;
}
 
.header table tr td a:link{color: #eee;}
.header table tr td a:visited{color: #ccc; }
.header table tr td a:hover{color: #660000; }
.header table tr td a:active{color: #eee; }
 
.header table tr td{
    color: #eee;
    font-size: 1.2em;
}
 
#container2{
    background:  url(../../AppData/Local/Microsoft/Windows/Temporary%20Internet%20Files/Content.IE5/XWO8LA9B/%27/images/contbg2.gif%27) repeat-y;
    width: 780px;
    float: left;
}
 
#nav{
    float: left;
    width: 155px;
    color: #000000;
    font: 1.2em arial, helvetica, sans-serif;
    text-transform: uppercase;
    padding: 0 0 20px 0;
}
 
#nav h1{
    font-size: 1.6em;
    color: #fff;
    font-weight: normal;
    margin: 0;
    line-height: 130%;
    text-align: center;
    background: #506887;
}
 
#content{
    float: left;
    width: 623px;
    margin: 0 0 0 1px;
    text-align: center;
    }
 
#footer{
    clear: both;
    width: 100%;
    border-top: 1px solid #222;
    background: #fff;
}
 
.table1{
    color: #000000;
    font-size: 10px;
    border: 1px solid #cccccc;
    text-align: left;
    margin-right: auto;
    margin-left: auto;
}
 
.table1 td{
    color: #000000;
    font-size: 10px;
    border: 1px solid #cccccc;
}
 
.table1heading
{
    color: #000000;
    font-weight: bold;
    border: 1px solid #cccccc;
}
 
.table1headingbg
{
    color: #000000;
    font-weight: bold;
    background-color: #D9E2FF;
}
 
.table1headingred
{
    color: #cc0000;
    font-weight: bold;
}
 
.table1headingredbg
{
    color: #cc0000;
    font-weight: bold;
    background-color: #cccccc;
}
 
.table1red
{
    color: #cc0000;
}
 
.rowheading
{
    color: #000000;
    background-color: #D9E2FF;
    font-size: 1em;
    text-transform: uppercase;
    font-weight: bold;
}
 
.rowheadingred
{
    color: #cc0000;
    background-color: #cccccc;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid #000000;
}
 
.row1
{
    color: #000000;
    background-color: #D9E2FF;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
}
 
.row2
{
    color: #000000;
    background-color: #ffffff;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    border: 1px solid #cccccc;
}
 
.row3
{
    color: #000000;
    background-color: #ffffff;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    border: 1px solid #cccccc;
}
 
.table2{
    color: #000000;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    border: 1px solid #D9E2FF;
    text-align: left;
}
 
 
 
h1.backstage{
    font-size: 2.4em; 
    font-weight: bold; 
    text-align:center;
    color: #000000;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #D9E2FF;
    border-top: 1px solid #5e7ba0;
    border-bottom: 1px solid #5e7ba0;
}
 
h2.backstage
{ 
    font-size: 1.6em; 
    font-weight: bold;
    text-align:center;
    color: #000000;
    margin: 0px;
    padding: 5px 0px;
    background: #D9E2FF;
    border-top: 1px solid #5e7ba0;
    border-bottom: 1px solid #5e7ba0;
}
 
h3.backstage
{
    font-size: 1.2em;
    text-align: center;
    color: #000000;
    margin: 0px;
    padding: 2px 0px; 
    font-weight: bold;
    background: #D9E2FF;
    border-top: 1px solid #5e7ba0;
    border-bottom: 1px solid #5e7ba0;
}
 
h4.backstage
{
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 10px; 
    font-weight: normal;
    font-style: normal; 
    text-align:center;
    color: #000000;
    background-color: #cccccc;
    letter-spacing: normal; 
    word-spacing: normal;
    margin: 0;
}
 
form 
{
    margin: 0px;
    padding: 0px;
}
 
ul 
{
    margin: 0px;
}
 
.button {
    color: #000000;
    font-family: verdana,tahoma,arial,helvetica;
    font-size: 8pt; border: 1px solid #000000;
    cursor: pointer; 
    margin: 0px;
}
 
.button15 {
    color: #000000;
    font-family: verdana,tahoma,arial,helvetica;
    font-size: 8pt; border: 1px solid #000000;
    cursor: pointer; 
    margin: 0px;
    width: 15px;
}
 
.button50 {
    color: #000000;
    font-family: verdana,tahoma,arial,helvetica;
    font-size: 8pt; border: 1px solid #000000;
    cursor: pointer; 
    margin: 0px;
    width: 50px;
    padding: 0px;
}
 
.button200 {
    color: #000000;
    font-family: verdana,tahoma,arial,helvetica;
    font-size: 8pt; border: 1px solid #000000;
    cursor: pointer; 
    margin: 0px;
    width: 200px;
}
 
.button300 {
    color: #000000;
    font-family: verdana,tahoma,arial,helvetica;
    font-size: 8pt; border: 1px solid #000000;
    cursor: pointer; 
    margin: 0px;
    width: 300px;
}
 
.dropdown {
    color: #000000;
    font-family: verdana,arial,helvetica;
    font-size: 8pt;
    border: 1px solid #000000;
    cursor: pointer;
}
 
.fieldtext40 {
    padding: 0px;
    margin: 0px;
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 12px;
    color: #000000;
    width: 40px;
}
 
.fieldtext80 {
    padding: 0px;
    margin: 0px;
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 12px;
    color: #000000;
    width: 80px;
}
 
.fieldtext100 {
    padding: 0px;
    margin: 0px;
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 12px;
    color: #000000;
    width: 100px;
}
 
.fieldtext140 {
    padding: 0px;
    margin: 0px;
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 12px;
    color: #000000;
    width: 140px;
}
 
.fieldtext160 {
    padding: 0px;
    margin: 0px;
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 12px;
    color: #000000;
    width: 160px;
}
 
.fieldtext300 {
    padding: 0px;
    margin: 0px;
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 12px;
    color: #000000;
    width: 300px;
}
 
.fieldtext330 {
    padding: 0px;
    margin: 0px;
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 12px;
    color: #000000;
    width: 330px;
}
 
.fieldtext360 {
    padding: 0px;
    margin: 0px;
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 12px;
    color: #000000;
    width: 360px;
}
 
.fieldtext450 {
    padding: 0px;
    margin: 0px;
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 12px;
    color: #000000;
    width: 450px;
}
 
.fieldtext490 {
    padding: 0px;
    margin: 0px;
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 12px;
    color: #000000;
    width: 490px;
}
 
.textarea330x100 {
    padding: 0px;
    margin: 0px;
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 12px;
    color: #000000;
    width: 330px;
    height: 100px;
}
 
.textarea360x100 {
    padding: 0px;
    margin: 0px;
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 12px;
    color: #000000;
    width: 360px;
    height: 100px;
}
 
.textarea360x200 {
    padding: 0px;
    margin: 0px;
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 12px;
    color: #000000;
    width: 360px;
    height: 200px;
}
 
.textarea360x400 {
    padding: 0px;
    margin: 0px;
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 12px;
    color: #000000;
    width: 360px;
    height: 400px;
}
 
.textarea490x100 {
    padding: 0px;
    margin: 0px;
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 12px;
    color: #000000;
    width: 490px;
    height: 100px;
}
 
.textarea490x200 {
    padding: 0px;
    margin: 0px;
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 12px;
    color: #000000;
    width: 490px;
    height: 200px;
}
 
.textarea490x400 {
    padding: 0px;
    margin: 0px;
    font-family: verdana,tahoma,arial,helvetica; 
    font-size: 12px;
    color: #000000;
    width: 490px;
    height: 400px;
}
 
body.results
{
    font-family: arial, verdana, tahoma, sans-serif;
    font-size: 12px;
    color: #eee;
    background: #272d06;
}
 
#container_results
{
    width: 600px;
    border: 1px solid #859913;
    margin-left: auto;
    margin-right: auto;
    background: #39470e;
}
 
h1.results
{
    font-size: 2em;
    color: #fff;
    text-decoration: underline;
    width: 580px;
    padding: 6px 10px;
}
 
h2.results
{
    font-size: 1.8em;
    color: #fff;
    text-decoration: underline;
    background: #8fad17;
    width: 580px;
    padding: 6px 10px;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
}
 
h3.results
{
    font-size: 1.8em;
    color: #fff;
    text-decoration: underline;
    background: #8fad17;
    width: 580px;
    padding: 6px 10px;
}
 
p.results
{
    text-align: justify;
    padding: 0px 10px;
    font-size: 1em;
    padding: 0px 10px;
}
 
img p.results
{
    padding: 5px;
    margin: 5px;
}
 
ul.sortable {
    text-align: left;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    font-size: 12px;
    font-family: Arial, sans-serif;
}
ul.sortable li {
    text-align: left;
    cursor:move;
    padding: 2px 2px;
    border: 1px solid #ccc;
    background-color: #eee;
}
 
#nav ul
{
        margin: 0;
        padding: 0;
        list-style: none;
}
 
#nav li
{
        width: 144px;
        height: 16px;
        list-style: none;
        margin: 2px 0;
}
 
#nav li a
{
        display: block;
        width: 144px;
        height: 16px;
        color: #111;
        padding-left: 10px;
        text-decoration: none;
}
 
#nav li a:hover
{
        width: 144px;
        height: 16px;
color: #6B6F7D;
background: #adb5cc;
 
}
 
 
#nav li.active
{
        width: 155px;
        height: 16px;
background: #ccc;
color: #222;
}
 
/* login code */
 
#login{
    background: #fff;
    border: 1px solid #a2a2a2;
    margin: 5em auto;
    padding: 1.5em;
    width: 30em;
    text-align: left;
}
 
#login h1 {
    margin: 2px;
    text-align: center;
    font-size: 2.5em;
    color: #5e7ba0;
    border-bottom: 1px solid #222;
}
 
#login p {
    font-size: 1.4em;
    font-weight: bold;
}
 
#login ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
 
#login li{
    display: inline;
    margin-left: 1em;
    text-align: center;
    font-size: 1.5em
}
 
#login dd{
 
}
 
#login dt{
 
}
 
input {
    width: 100%
}
 
input.button{
    width: 10em;
}
 
ul.characters {
    text-align: left;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    font-size: 10px;
    font-family: Arial, sans-serif;
}
 
ul.matches {
    text-align: left;
    list-style-type: none;
    padding: 0px;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 0px;
    font-size: 10px;
    font-family: Arial, sans-serif;
}
</style>
The backstage.php coding looks like this:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<?php include('backstage.css'); ?>
</head>
 
<body>
<center><table border=1 cellpadding=5 cellspacing=0 width=350 > 
<tr><td><h1><center>KOW Login</center></h1>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<p>Username:</p><br>
<input type="text" name="username" maxlength="40" size="40"> <br><br>
<p>Password:</p><br>
<input type="password" name="pass" maxlength="50" size="40"> 
<br><br>
<center><input type="submit" name="login" value="Process Login"><br><br></center>
</table> 
</form>
</center>
</body>
</html>
 

Re: Not looking the same

Posted: Sat Dec 06, 2008 6:12 am
by JAB Creations
You really need to get these pages to validate first and foremost.

1.) Not having a doctype throws every browser in to quirks mode.

2.) Even if a page has a doctype invalid code may be treated differently by each browser.

So I recommend...

1.) Download, install, and use Firefox.

2.) Install Chris Pederick's Web Developer Toolbar.

3.) Once you restart Firefox when you see the toolbar use the TOOLS menu and then click on VALIDATE HTML.

Once you iron out all the errors you should be much closer to consistent rendering across Firefox, Opera, and Safari.

Then I presume you'll still have errors with Internet Explorer so at that point I recommend reading my IECCSS tutorial.

If you can do all that (and none of it is hard and any questions you might post should be easy to answer) your site should work smoothly. 8)