Hello, I recently started coding this page and have come to a lot of problems and can't find them. The page is: www.xomby.com/talkxbox/page2.html
There are 2 problems,
First in IE the main content bit is supposed to have an 8px margin all around, which it does on the top and left, but for some reason it won't work on the right.
The second is in firefox, for some reason it won't do anything to the menu width. I have all of this in css.
My css script is as follows:
HTML Code:
/* Main CSS */
body {
background-image: url("images/bg.jpg");
background-position: top;
background-repeat: repeat-x;
background-color: #3C4356;
margin: 0;
}
img {
border: 0;
padding: 0;
margin: 0;
}
td.left {
text-align: left;
}
form {
margin: 0;
}
span.bold {
font-weight: bold;
}
table.full {
width: 100%;
}
/* Main Table */
DIV#main {
margin-left: auto;
margin-right: auto;
text-align: center;
}
table#tmain {
margin-left: auto;
margin-right: auto;
text-align: center;
}
table {
border-collapse: collapse;
}
td {
padding: 0;
}
td#left {
width: 40px;
background-image: url("images/bgleft.jpg");
vertical-align: top;
}
td#right {
width: 40px;
background-image: url("images/bgright.jpg");
vertical-align: top;
}
td#center {
width: 785px;
vertical-align: top;
background-color: white;
}
/* Inside wrapper */
td.margin {
width: 10px;
}
/* Top menu */
td#tmenu {
background-image: url("images/btopbg.jpg");
height: 26px;
text-align: left;
}
td#tmenuborder {
background-image: url("images/menuborder.jpg");
height: 6px;
}
/* AD */
td#ad {
background-image: url("images/adbg.jpg");
height: 95px;
text-align: center;
padding-top: 5px;
}
img#ad {
border-style: solid;
border-color: #989A99;
border-width: 1px;
}
td#ad2 {
background-image: url("images/ad2bg.jpg");
height: 607px;
text-align: center;
}
/* left menu */
td#menutop {
background-image: url("images/menutop.jpg");
background-repeat: no-repeat;
height: 3px;
}
td#menubot {
background-image: url("images/menubot.jpg");
background-repeat: no-repeat;
height: 2px;
}
td#menu {
width: 184px;
vertical-align: top;
text-align: left;
}
ul#umenu {
margin: 0;
font-family: Arial,Verdana;
font-size: 10pt;
color: #6E7A8A;
}
li.head {
list-style-type: none;
background-image: url("images/menubg1.jpg");
background-repeat: no-repeat;
text-indent: 30px;
line-height: 22px;
width: 184px;
height: 25px;
padding: 0;
margin: 0;
font-weight: bold;
}
li {
font-size: 8pt;
list-style-type: none;
background-image: url("images/menubg2.jpg");
background-repeat: no-repeat;
text-indent: 30px;
line-height: 22px;
width: 184px;
height: 22px;
padding: 0;
margin: 0;
font-weight: bold;
}
a.menu {
color: #8D98AA;
text-decoration: none;
}
a.menu:link {
color: #8D98AA;
text-decoration: none;
}
a.menu:visited {
color: #8D98AA;
}
a.menu:active {
color: #8D98AA;
}
a.menu:hover {
color: #E97D01;
}
/* main content */
/* content->login */
table#tlogin {
width: 100%;
height: 43px;
}
td#loginleft {
background-image: url("images/loginleft.jpg");
width: 7px;
}
td#loginright {
background-image: url("images/loginright.jpg");
width: 7px;
}
td#loginmain {
width: 100%;
background-image: url("images/loginbg.jpg");
}
input.login {
font-size: 8pt;
width: 142px;
height: 15px;
border-style: solid;
border-color: #B1BDC9;
border-width: 1px;
background-image: url("images/inputbg.jpg");
}
/* content->main */
td#contop {
background-image: url("images/contop.jpg");
height: 3px;
}
td#content {
vertical-align: top;
width: 800px;
text-align: left;
background-image: url("images/conbg.jpg");
}
td.smallmargin {
width: 1px;
}
td#con {
height: 100%;
}
table#tcon {
width: 100%;
margin: 8px 8px 8px 8px;
}
/* content->page2 */
td.padding {
padding: 2px;
}
span.title {
color: #E87F00;
font-weight: bold;
font-size: 14pt;
font-family: Arial,Verdana;
}
span.title2 {
color: #E87F00;
font-weight: bold;
font-size: 12pt;
font-family: Arial,Verdana;
}
td.bigspace {
height: 30px;
}
td.bigpad {
padding: 10px;
}
td#tdcon2 {
background-color: white;
font-family: Arial,Verdana;
font-size: 9pt;
color: #94999D;
}
table#tcon2 {
width: 70%;
vertical-align: top;
}
img.gameimg {
margin: 10;
padding: 1px;
border-width: 1px;
border-color: #D7DBDE;
border-style: solid;
}
table#gameimg {
float: left;
}
td#tdgameimg {
padding: 5px 15px 15px 15px;
float: left;
}
td#gameimgspace {
width: 170px;
}
td#rating {
font-weight: bold;
font-size: 14pt;
}
span.orange {
color: #EA8511;
}
span.review {
color: #C7CACF;
}
td.dotted {
border-style: dotted;
border-color: #C6CCD8;
border-top-width: 1px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
font-size: 2pt;
}
td#byleft {
background-color: #4A6985;
color: white;
font-weight: bold;
}
td#byright {
background-color: #61809D;
color: white;
font-weight: none;
width: 75%;
}
td#screenshots {
background-color: #C2CBD4;
padding: 5px;
text-align: center;
}
/* footer */
td#foottop {
background-color: #2A3549;
background-image: url("images/foottop.jpg");
height: 4px;
}
td#footleft1 {
width: 27px;
background-image: url("images/footleft1.jpg");
}
td#footright1 {
width: 27px;
background-image: url("images/footright1.jpg");
}
td#footleft2 {
width: 27px;
background-image: url("images/footleft2.jpg");
}
td#footright2 {
width: 27px;
background-image: url("images/footright2.jpg");
}
td#tdfoot {
height: 49px;
background-color: #2A354B;
width: 811px;
}
table#foot {
width: 100%;
}
table#footin {
width: 100%;
}
td#footleft {
text-align: left;
}
td#footright {
color: white;
text-align: right;
font-family: Arial,Verdana;
font-size: 8pt;
padding-right: 5px;
}
a.foot {
text-decoration: none;
color: #C4C8D4;
}
a.foot:visited {
text-decoration: none;
color: #C4C8D4;
}
a.foot:active {
text-decoration: none;
color: #C4C8D4;
}
a.foot:hover {
text-decoration: underline;
color: #C4C8D4;
}
span#copyright {
font-weight: bold;
}
I know its a bit messy, but I haven't done css coding in a while so I'm a bit rusty at the moment.
Any help will be appreciated, Thanks 
|