Need a Little CSS Help

[charchap]

hello. I'm experiencing problems with my css code (once again) working with Firefox and not working with IE 6 or 7

I have a problem with my head_logo_inner not too sure what's going on . Here is my css for this particular template.

body{
    background-color: #333333;
    color: #333333;
    margin: 0px;
    padding: 0px;
    font-size: 0.8em;
    font-family: Verdana, sans-serif;
}
 
#body_outer { 
    width: 850px; 
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px; 
    background-image: url('../images/head_bg.gif');
    background-repeat: repeat-x;
}
 
#head{ width: 841px; height: 149px;}
#head_img{ 
    background-image: url('../images/head_img.gif');
    background-repeat: no-repeat;
    margin-right: 30px;
    float: left;
    width: 222px; 
    height: 149px;
}
#head_logo{ width: 630px; text-align: left; }
#head_logo_inner { width: 500px; padding-top: 30px;color: #ffffff;}
.logo{
    font-size: 1.7em;
    font-weight: bold;
}
.slogan{
    font-size: 1.3em;
}
#head_navi { width: 75%; height: 40px; text-align: right; margin-top: 35px;}
#head_navi_inner{ width: 99%;}
 
#content_outer { 
    width: 99%; 
    margin: 0px !important;
    margin: -7px;                 /* Fur IE */
    text-align: left;
}
#navi_outer { width: 222px; float: left; margin-right: 20px;}
#navi_topimg {
    height: 51px;
    background-image: url('../images/nav_top.gif');
    background-repeat: no-repeat; 
}
#navi_inner {
    padding-left: 20px;
        padding-right: 10px;
    padding-top: 6px; 
    padding-bottom: 10px; 
    text-align: left;
    background-image: url('../images/nav_bg.gif');
    background-repeat: repeat-y;
}
#navi_bottomimg {
    height: 33px;
        padding-top: -5px;
    background-image: url('../images/nav_bottom.gif');
    background-repeat: no-repeat;
}
 
#mainbody_outer { width: 552px; float: left; text-align: left;     color: #ffffff;}
#pathway { visibility: hidden;}
#user1, #user2 {width: 35% !important; width: 47%; float: left; text-align: left; padding: 5px; margin: 10px; }
#mainbody_inner { width: 100%; padding-top: 0px; }
 
 
#footer { 
    width: 850px; 
    margin-left: auto;
    margin-right: auto;
    clear: both;
        text-align: center;
    border-top: 1px solid #DCDCDC; 
    font-size: 0.7em; 
                color: #cccccc;
}
 
/* --------------------- Joomla CSS ---------------------- */
 
a:link, a:visited { color: #c64934; text-decoration: underline; }
a:hover { color: #900000; text-decoration: underline; }
 
table.contentpaneopen {
  width: 100%;
    padding: 0px;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: 0px;
}
 
table.contentpaneopen td {
   padding-right: 5px;
}
 
table.contentpaneopen td.componentheading {
    padding-left: 4px;
}
 
 
 
table.contentpane {
  width: 100%;
    padding: 0px;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: 0px;
}
 
table.contentpane td {
    margin: 0px;
    padding: 0px;
}
 
table.contentpane td.componentheading {
    padding-left: 4px;
}
 
table.contentpaneopen fieldset {
    border: 0px;
    border-bottom: 1px solid #eee;
}
 
.button {
  color: #c64934;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 1px solid #666666;
  background-color: #ffffff;
  width: auto;
  padding: 0px 5px;
  line-height: 18px !important;
  line-height: 16px;
  height: 26px !important;
  height: 24px;
  margin: 1px;
}
 
.inputbox {
    padding: 2px;
    border:solid 1px #666666;
    background-color: #ffffff;
}
 
.componentheading {
    color: #666666;
    text-align: left;
    padding-top: 4px;
    padding-left: 4px;
    height: 21px;
    font-weight: bold;
    font-size: 1.1em;
    text-transform: uppercase;
 
}
 
.contentcolumn {
    padding-right: 5px;
}
 
.contentheading {
    height: 30px;
    color: #c64934;
    font-weight: bold;
    font-size: 0.9em;
    white-space: nowrap;
}
 
 
 
.contentpagetitle {
    font-size: 0.9em;
    font-weight: bold;
    color: #cccccc;
    text-align:left;
}
 
table.searchinto {
    width: 100%;
}
 
table.searchintro td {
    font-weight: bold;
}
 
table.moduletable {
    width: 100%;
    margin-bottom: 5px;
    padding: 0px;
    border-spacing: 0px;
    border-collapse: collapse;
}
 
div.moduletable {
    padding: 0;
    margin-bottom: 2px;
}
 
table.moduletable th, div.moduletable h3 {
    color: #c64934;
    text-align: left;
    padding-left: 4px;
    height: 21px;
    line-height: 21px;
    font-weight: bold;
    font-size: 1.0em;
    text-transform: uppercase;
        margin-top: 20px;
        margin-bottom: 3px;
}
 
table.moduletable td {
    font-size: 0.8em;
    padding: 0px;
    margin: 0px;
    font-weight: normal;
}
 
table.pollstableborder td {
  padding: 2px;
}
 
.sectiontableheader {
  font-weight: bold;
  background: #666666;
  padding: 4px;
}
 
.sectiontablefooter {
 
}
 
.sectiontableentry1 {
    background-color : #333333;
}
 
.sectiontableentry2 {
    background-color : #666666;
}
 
.small {
    color: #999999;
    font-size: 0.7em;
}
 
.createdate {
    height: 15px;
    padding-bottom: 10px;
    color: #999999;
    font-size: 0.7em;
}
 
.modifydate {
    height: 15px;
    padding-top: 10px;
    color: #999999;
    font-size: 0.7em;
}
 
table.contenttoc {
  border: 1px solid #cccccc;
  padding: 2px;
  margin-left: 2px;
  margin-bottom: 2px;
}
 
table.contenttoc td {
  padding: 2px;
}
 
table.contenttoc th {
  color: #666666;
    text-align: left;
    padding-top: 2px;
    padding-left: 4px;
    height: 21px;
    font-weight: bold;
    font-size: 0.8em;
    text-transform: uppercase;
}
 
ul#mainlevel-nav
{
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8em;
}
 
ul#mainlevel-nav li{
    background-image: none;
    padding-left: 0px;
    padding-right: 0px;
    float: left;
    margin-right: 3px;
    font-size: 11px;
    line-height: 21px;
    white-space: nowrap;
        background-color: #cccccc;
        color: #333333;
}
 
ul#mainlevel-nav li a{
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
    color: #333333;
    background: transparent;
}
 
#buttons>ul#mainlevel-nav li a { width: auto; }
 
ul#mainlevel-nav li a:hover{
    color: #c64934;
    background: transparent;
}
 
 
a.mainlevel:link, a.mainlevel:visited {
    display: block;
    vertical-align: middle;
    font-size: 11px;
    color: #ffffff;
        background-color: #666666;
    text-align: left;
    padding-top: 5px;
    padding-left: 18px;
        margin-bottom: 3px;
    height: 20px !important;
    height: 25px;
    width: 160px;
    text-decoration: none;
}
 
a.mainlevel:hover {
    text-decoration: none;
        border-left: 5px solid #c64934;
    color: #ffffff;
}
 
a.mainlevel#active_menu {
        border-left: 5px solid #c64934;
        color: #ffffff;
}
 
a.mainlevel#active_menu:hover {
        border: 0px;
    color: #ffffff;
}
 
a.sublevel:link, a.sublevel:visited {
    padding-left: 1px;
    vertical-align: middle;
    font-size: 11px;
    color: #ffffff;
    text-align: left;
}
 
a.sublevel:hover {
    border-left: 5px solid #c64934;
        color: #ffffff;
    text-decoration: none;
}
 
a.sublevel#active_menu {
    border-left: 5px solid #c64934;
        color: #ffffff;
}
 
.highlight {
    background-color: #ffffff;
    color: #c64934;
    padding: 0px;
}
 
form {
/* removes space below form elements */
    margin: 0px;
     padding: 0px;
}
 
ul.latestnews, ul.mostread { border: 1px solid #cccccc; padding: 7px; list-style: none; margin-left: 0px;}
table.pollstableborder td { color: #ffffff; font-size: 0.9em; text-align: left;}
div.mosimage {
  border: 1px solid #cccccc;
}
 
.mosimage {
  border: 1px solid #cccccc;
  margin: 5px;
}
 
.mosimage_caption {
  margin-top: 2px;
  background: #cccccc;
  padding: 1px 2px;
  color: #666666;
  font-size: 10px;
  border-top: 1px solid #cccccc;
}
 
span.article_seperator {
    display: block;
    height: 1.5em;
}
 

The website is www.littlejohnart.com if ANYONE can help it would be greatly appreciated. Thanks!!

[KarlosSultana]

Hi, I feel a bit like I'm asking a stupid question but what actually is your problem?

[Jamison Bryant]

I tested the link you gave on the following browsers:

1. Google Chrome 5.0.375.127
2. Internet Explorer 8
3. Mozilla Firefox 3.6.8

and it seems to work just fine! Did you fix the issue? If so, please let us know.

Here's something else you might want to think about: being a web developer for over 10 years now, I've given up trying to make all but the most basic sites look the same in all browsers. My rule of thumb is to develop for Firefox/Chrome/Safari first, and IE LAST, if at all, just because it is just so terrible.

Let me know if this helps

[JKing]

I don't see that ID anywhere in the markup of any of your pages.