difficulty in re-templating admin.php

[House]

Hi everyone, hope I can get some help here. I've been pulling out my hair for a few days now...

My problem is css. At some points, it works ok, then I open in a different browser and it's broken. I'm trying to re-skin the admin.php area to fit our site, but working with both IE and FF is making me go grey. Here's a few examples of what I need a bit of help on, if you have a minute. Thanks!

http://www.digital-industry.net/images/house/good-css-ie.jpg
This looks ok. In IE and all looks aligned and ok...

http://www.digital-industry.net/images/house/good-css-ie2.jpg
This one also looks, ok. Just for reference...

http://www.digital-industry.net/images/house/bad-css-ff.jpg
Now, this one is a bit off but I can't get it sorted to save my life!

http://www.digital-industry.net/images/house/bad-css-ff2.jpg
Also, check out the footer here. It's the same footer as the FF image above, but it's decided to un-align itself...

Funny thing is, I've been trying to adjust the css FOR firefox (since there's so many issues for css in IE)...
HELP!!!

[fuzzyfree]

Can you post your CSS files? that will make it easier to see how you have it formatted

[House]

Thanks for looking in to this. Here's my admin.css file...

/* -------------------------------------------------------------- */
/* Common stuff and basic page layout */
/* -------------------------------------------------------------- */
html, body
{
margin : 0px;
padding : 0px;
text-align : center;
font : 12px verdana, tahoma, arial, sans-serif;
background : #757062 url("../imgs/bg_main.jpg") repeat-y center;
}

A { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #999966; text-decoration: none; font-weight:bold; }
A:link{ color: #443D28; text-decoration: none; }
A:visited{ color: #443D28; text-decoration: none; }
A:active{ color: #443D28; }
A:hover{ color: #000000; text-decoration: underline; }

#container
{
width : 1028px;
text-align : left;
margin-left : auto;
margin-right : auto;
}

#header
{
height : 222px;
width : 1028px;
background : #757062 url("../imgs/top_admin.jpg") no-repeat right;
padding : 0px;
margin : 0px;
}

#header #blogLink
{
float: left;
width : 1028px;
height: 52px;
margin-top: 55px;
}

#header span
{
display : none;
}

#header h1
{
margin : 0;
}

#content
{
position : relative;
width : 75%;
display : block;
margin : 0;
padding : 0;
}

#dashboard
{
padding-left : 13em;
padding-right : 1em;
}

.clr
{
clear : both;
}

/*-- Accessibility Tweaks --*/
#skipNav
{
position : absolute;
left : -9999px;
font-size : small;
}

#skipNav a:focus
{
display : block;
position : absolute;
top : 20px;
left : 10020px;
font-size : large;
background : #fff;
border : solid 2px #1B6BD8;
padding : 10px;
width : 15em;
z-index : 1;
}

#skipNav a:hover
{
color : #000000;
}

#skipNav a:active
{
display : block;
position : absolute;
top : 20px;
left : 10020px;
font-size : large;
background : #fff;
border : solid 2px #1B6BD8;
padding : 10px;
width : 15em;
z-index : 1;
}

.hide
{
display : none;
}

/* -------------------------------------------------------------- */
/* Navigation/menu bar */
/* -------------------------------------------------------------- */

#menubar
{
margin-bottom : 0;
background : #757062 url("../imgs/bg_menu.jpg");
height : 20px;
/*border-bottom : 1px solid #B4B4B4;*/
}

#menu
{
padding-top : 1px;
padding-bottom : 1px;
}

#menu ul
{
padding : 0;
margin : 0;
list-style-type : none;
color : #FFF;
width : 1028px;
text-align : center;
}

#menu li
{

position : relative;
padding : 0;
border-left : 0px solid #B4B4B4;
display : inline;
font-weight : bold;
font-family : verdana, tahoma, sans-serif;
font-size : 0.83em;
letter-spacing : 0.20em;
text-transform : uppercase;
}

#menu a, #menu a:link, #menu a:visited
{
padding : .2em 1em;
color : #C0BEB2;
text-decoration : none;
}

#menu a:hover
{
/*background : #818181;*/
color : #CBF002;
}

#menu li.selected
{
display : block;
width : auto;
padding : 2px 7px;
background : #5D5B4F;
color : #000000;
border-bottom : 1px solid #FFFFFF;
}

#menu br
{
clear: both;
}

/* -------------------------------------------------------------- */
/* Section title and navigation history bar */
/* -------------------------------------------------------------- */

#nav_bar
{
margin-left : 170px;
margin-right : auto;
align : center;
width : 680px;
margin-bottom : 15px;
border-bottom : 1px solid #000000;
}

#section_title
{
float : left;
width : 39%;
}

#section_title h2
{
color : #43402D;
font-weight : bold;
font-family : trebuchet ms, tahoma, sans-serif;
font-size : 1.5em;
letter-spacing : 0.08em;
width : 501px;
margin : 0;
padding-left : 4px;
}

#navigation
{
float : right;
width : 60%;
text-align : right;
padding-top : 7px;
font-family : verdana, tahoma, sans-serif;
font-size : 0.85em;
letter-spacing : 0.09em;
padding-right : 2px;
}

#navigation a
{
color : #43402D;
text-decoration : none;
}

#navigation a:hover
{
color : #000000;
text-decoration : none;
}

/* -------------------------------------------------------------- */
/* Admin Tabbed Ul's */
/* -------------------------------------------------------------- */

#tablist
{
padding : 3px 0;
margin-left : 100px;
width : 80%;
font : 11px trebuchet ms, verdana, tahoma, arial, sans-serif;
border-bottom : 1px solid #000000;
}

#tablist li
{
list-style : none;
margin : 0;
display : inline;
}

#tablist li a
{
padding : 3px 0.5em;
margin-left : 3px;
border : 1px solid #4E4B38;
background : #C6C5C0;
text-decoration : none;
}

#tablist li a:link
{
color : #5C5A45;
}

#tablist li a:visited
{
color : #5C5A45;
}

#tablist li a:hover
{
color : #000;
background : #FFFFFF;
border-color : #4E4B38;
}

#tablist li a#tab_current
{
color : #000000;
background : #FFFFFF;
border-bottom : 1px solid #4E4B38;
}

.menuTop_level1 ul, li
{
list-decoration: none;
}

.menuTop_level1 ul
{
list-style-type: disc;
list-style-image: url(../imgs/bullet.gif);
}


/* -------------------------------------------------------------- */
/* Form controls (input, ...) */
/* -------------------------------------------------------------- */

form
{
margin : 0px;
}

fieldset
{
border : 1px solid #DEDEDE;
color : #000000;
font-family : verdana, tahoma, sans-serif;
font-size : 0.90em;
padding-bottom : 0px;
margin : 0px;
}

textarea, input, select
{
background : #F0F0F0;
border : 1px solid #000000;
color : #000000;
font-family : verdana, tahoma, sans-serif;
font-size : 0.95em;
}

input:focus, textarea:focus, label:focus
{
border : 1px solid #000000;
background : #FFFFFF;
}

.checkbox, .radio
{
border : 0px;
}

.submit
{
/*margin-left : 4px;*/
}

.list_action_button a img
{
border : 0px;
padding : 0px;
}

.list_action_button a:hover img
{
filter : alpha(opacity=60);
-moz-opacity : 0.6;
}

.field
{
top : 0;
left : 0;
margin : 0 1em 1em 0;
background : #837F73;
color : #000000;
}

.field .field
{
margin : 1em 0 0 0;
background : #837F73;
}

.field label
{
font-size : 100%;
font-weight : bold;
background : #837F73;
}

.field_checkbox
{
top : 0;
left : 0;
}

.field_checkbox label
{
font-size : 100%;
}

.formHelp
{
font-size : 90%;
color : #C9C8C1;
background : #837F73;
margin : 0 0 0.2em 0;
}

.formHelp a
{
text-decoration : underline;
}

.formHelp:hover
{
color : #C9C8C1;
cursor : default;
}

fieldset
{
border : 1px solid #8cacbb;
margin : 1em 0em 1em 0em;
padding : 0em 1em 1em 1em;
line-height : 1.5em;
width : auto;
}

.inputField
{
width: 95%;
margin-left: 100px;
margin-right: auto;
background-color: #837F73;
border: 1px solid #DEDEDE;
}

.buttons
{
width: 88%;
margin-left: auto;
margin-right: auto;
text-align: right;
}

.inputField input
{
width:100%;
}

.inputField legend
{
font-weight: bold;
}

.inputField .dateTime
{
width: 100%;
}

.inputField .checkbox, .inputField .button, .inputField .radio
{
width: auto;
}

.inputField .file
{
width: auto;
}

.pager
{
float : left;
background : #656251;
margin-left : 100px;
width : 77%;
}

/* -------------------------------------------------------------- */
/* Data lists parameters & search bar */
/* -------------------------------------------------------------- */

#list_nav_bar
{
margin-left : 100px;
margin-right : auto;
width : 88%;
background-color : #837F73;
padding-bottom : 4px;
padding-left : 4px;
padding-right : 4px;
margin-bottom : 10px;
border : 0px solid #DEDEDE;
}

#list_nav_bar fieldset
{
border : 1px solid #DEDEDE;
color : #000000;
font-family : verdana, tahoma, sans-serif;
font-size : 0.90em;
padding : 0px;
margin : 0px;
height : 60px;
}

#list_nav_select
{
float : left;
width : 100%;
text-align : center;
}

#list_nav_search
{
float : left;
width : 30%;
text-align : center;
}

.list_nav_option
{
float : left;
text-align : left;
padding : 0px 4px 4px 4px;
margin-left : 5px;
}

#list_nav_bar legend
{
font-family : trebuchet ms, tahoma, sans-serif;
font-size : 1.1em;
font-weight : bold;
letter-spacing : 0.08em;
}

#list_nav_select label
{
}

/* -------------------------------------------------------------- */
/* Data lists table format */
/* -------------------------------------------------------------- */

.info
{
margin-left : 100px;
margin-right : auto;
margin-bottom : 10px;
width : 775px;
border-collapse : collapse;
border-bottom : 3px solid #DEDEDE;
border-spacing : 0px;
}

.info th
{
font-family : trebuchet ms, tahoma, sans-serif;
font-size : 1.1em;
font-weight : bold;
letter-spacing : 0.08em;
vertical-align : bottom;
border-bottom : 1px solid #DEDEDE;
padding : 4px;
text-align : left;
}

.info th a
{
color : #43402D;
text-decoration : none;
}

.info th a:hover
{
color : #000000;
text-decoration : none;
}

.even
{
background : #837F73;
}

.tableHover
{
background: #979282;
}

.info td
{
color : #43402D;
border-bottom : 1px solid #DEDEDE;
vertical-align : middle;
padding : 4px;
/*border:1px solid black;*/
}

.info td a
{
color : #43402D;
text-decoration : none;
}

.info td a img {
border: 0px;
}

.info td a:hover
{
color : #000000;
text-decoration : none;
}

/* -------------------------------------------------------------- */
/* Specific column format */
/* -------------------------------------------------------------- */

.col_highlighted
{
font-weight : bold;
}

/* -------------------------------------------------------------- */
/* Data lists bottom actions bar */
/* -------------------------------------------------------------- */

#list_action_bar
{
margin-left : auto;
margin-right : auto;
width : 768px;
padding : 4px;
text-align : right;
/*background-color : #F3F1FF;*/
margin-bottom : 10px;
/*border : 1px dashed #DEDEDE;*/
}


/* -------------------------------------------------------------- */
/* Positive or negative feedback messages */
/* -------------------------------------------------------------- */

#list #FormError
{
padding-left: 10px;
}

#FormError
{
align: left;
padding-top: 0px;
}

#list #FormInfo
{
padding-left: 10px;
}

#FormInfo
{
align: left;
padding-top: 0px;
}

.InfoIcon
{
float:left;
clear:left;
margin-top:3px;
}

.InfoText
{
color:green;
padding-left:20px;
padding-top:3px;
}

.ErrorText
{
color:red;
padding-left:20px;
padding-top:3px;
}

/**
* login screen
*/
.loginBox
{
width: 300px;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
}

h4, fieldset h4
{
font-family : trebuchet ms, tahoma, sans-serif;
font-size : 1.1em;
font-weight : bold;
letter-spacing : 0.08em;
vertical-align : bottom;
border-bottom : 1px solid #DEDEDE;
padding : 0px;
text-align : left;
text-transform : capitalize;
background-color : #ACA89D;
}

.sectionTitle
{
font-size: 1.3em;
}

.welcomeMessage {
margin-bottom: 10px;
}

.pager
{
float:left;
}

/**
* styles for the 'manage' page and similar.
*/
#content .menuTop
{
list-style-type : none;
padding-left: 45px;
padding-right: 45px;
margin: 0px;
}

#content .menuTop ul
{
padding: 0px;
margin: 0px;
}

#content .menuTop .Level_1
{
font-family : trebuchet ms, tahoma, sans-serif;
font-size : 1.0em;
font-weight : bold;
letter-spacing : 0.08em;
border-bottom : 1px solid #DEDEDE;
padding-top : 10px;
text-align : left;
}

#content .menuTop .Level_0
{
padding-left: 10px;
font-weight : normal;
}

#content .menuTop .Level_0 a
{
color : #888888;
text-decoration : none;
}

#content .menuTop .Level_0 a:hover
{
color : #5583BE;
text-decoration : none;
}

/* -------------------------------------------------------------- */
/* Dashboard */
/* -------------------------------------------------------------- */

#dashboard h2
{
color : #5B5849;
font-weight : bold;
font-family : verdana, arial, tahoma, sans-serif;
font-size : 1.4em;
letter-spacing : 0.08em;
margin : 80;
padding-left : 4px;
}

#dashboard h2 a
{
color : #5B5849;
font-weight : bold;
font-family : verdana, arial, tahoma, sans-serif;
margin : 0;
padding-left : 4px;
text-decoration : none;
}

#dashboard h2 a:hover
{
text-decoration : underline;
color : #000000;
}

#dashboard h3
{
color : #5B5849;
font-weight : bold;
font-family : verdana, arial, tahoma, sans-serif;
font-size : 1.1em;
margin : 0;
margin-top : 12px;
margin-bottom : 4px;
padding-left : 12px;
}

#dashboard table
{
margin-left : 12px;
width : 80%;
}

#dashboard th
{
}

#dashboard td
{
}

#dashboard a
{
color : #5B5849;
text-decoration : none;
}

#dashboard a:hover
{
color : #000000;
text-decoration : none;
}

#dashboard
{
color : #43402D;
}

#dashboard .dashboard_blog
{
border : 1px solid #000000;
padding : 10px;
background-color : #837F73;
margin-top : 4px;
width : 80%;
}

#dashboard .dashboard_blog_layout
{
margin-top : 2px;
border : 1px solid #000000;
margin : 0;
width : 100%;
background-color : #C4C1B8;
}

#dashboard .dashboard_blog_layout tr
{
}

#dashboard .dashboard_blog_layout td
{
}

#dashboard .dashboard_data_table
{
width : 98%;
}

#dashboard .dashboard_data_table th
{
border-bottom : 2px solid #000000;
height : 20px;
text-align : left;
}

#dashboard .dashboard_data_table td
{
border-bottom : 1px solid #000000;
height : 20px;
}

#dashboard .dashboard_data_table_statistics
{
width : 90%;
}

#dashboard .dashboard_data_table_statistics th, td
{
border-bottom : 1px solid #FFFFFF;
height : 20px;
text-align : centert;
}

.dashboard_logout_link a
{
float: right;
padding-right: 5px;
padding-top: 3px;
text-transform: capitalize;
color : #5B5849;
font-weight : bold;
font-family : verdana, arial, tahoma, sans-serif;
margin : 0;
padding-left : 4px;
text-decoration : none;
}

.dashboard_logout_link a:hover
{
text-decoration : underline;
color : #000000;
}

I changed a few things in the admin-ff.css file but to no avail. I back to the original admin-ff.css file now so didn't feel I needed to make this post any longer

Thanks!!

[Rehsa4]

ok, from what it looks like.

the TOpic View thing with the aligned left is specific only to that page. thus there is a specific CSS for it somewhere, or there is no css for it at all. try to find the actual page that queries that and find what css it is looking for, then edit it.

as for the banner on the bottom on that last one... my guess is that page doesn't have a specific div that others have had before, might wanna compare the coding.

i can't help much else than that.

[3raser]

At some points, it works ok, then I open in a different browser and it's broken. ... working with both IE and FF is making me go grey

Welcome to the wonderful world of CSS my friend. At least you still have hair!