Need a Little CSS Help

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • charchap
    New Member
    • Feb 2007
    • 1
    #1

    Need a Little CSS Help

    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.
    Code:
    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!!
    Last edited by AricC; Feb 6 '07, 11:14 PM. Reason: Please use code tags/activate hyperlink
    Tags: None
    • KarlosSultana
      New Member
      • Feb 2007
      • 4
      #2
      Hi, I feel a bit like I'm asking a stupid question but what actually is your problem?

        Comment

        • Jamison Bryant
          New Member
          • Aug 2010
          • 6
          #3
          Re: need a little css help

          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

            Comment

            • JKing
              Recognized Expert Top Contributor
              • Jun 2007
              • 1206
              #4
              I don't see that ID anywhere in the markup of any of your pages.

                Comment

                Previous template Next
                Working...