joomla CSS help

cscott5288 Active Member

Messages:: 912

Likes Received:: 5

Best Answers:: 0

Trophy Points:: 60

#1

I am using Joomla 1.0 and have been trying to edit the template i downloaded too fit my site.

I have been successful in getting it perfect in IE but not in both IE and FF.

The site is here. As you can see, there is a big white box hanging under the logo, and all the tables need to be moved up right up to the black header border. Just those 2 things.

The CSS code (I reverted back to the original CSS i downloaded with the template because i just couldent get it to work with both FF and IE):

/*------------------------------------------------------------------------

# COLLAPSE MODULES TUTORIAL BY YOUJOOMLA.COM

# ------------------------------------------------------------------------

# Copyright (C) 2006-2007 Youjoomla.com, All Rights Reserved.

-------------------------------------------------------------------------*/

body {
	font-family:'trebuchet ms',arial,verdana,sans-serif;
	color: #333333;
	background-color:#EBE9E1;
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	line-height: 21px;
	background-image: url(../images/bg.jpg);
	background-repeat: repeat-x;

}
#credits{display:none;}
body.contentpane {
background: #ffffff;
}

#div1{
height:28px;
}
#div1-left{
float:left;
height:28px;
width:200px;
background-image: url(../images/slogan.jpg);
}
#div1-right{
float:right;
height:28px;
width:800px;
font-size:11px;
}
#div1-closer{
clear:both;
}

#div2{
height:72px;
}
#div2-left{
float:left;
height:72px;
width:200px;
background-image: url(../images/logo.jpg);
}
#div2-right{
float:right;
height:72px;
width:800px;
}
#space{height:42px}
#div2-closer{
clear:both;
}

#div3{
height:48px;
}
#div3-left{
float:left;
height:48px;
width:200px;
background-image: url(../images/search.jpg);
line-height:48px;
}

#div3-left .inputbox{
margin-top:13px;
margin-left:2px;
border:none;
padding:4px;
border:solid #efefef 1px;
font-size:10px;
}



#div3-right{
float:right;
height:48px;
width:800px;
text-transform:uppercase;
}
#div3-closer{
clear:both;
}

#wrap{
margin:0 auto;
width:1000px;
}
#container {
width:1000px; /*center hack*//*THIS IS THE MAIN CONTAINER FOR ALL DIVS*/
margin:0 auto; /*center hack*/
text-align:left;
}
#modright {/*THIS IS MODULE RIGHT*/
float:right;
width:150px;
overflow:hidden;
}
#modright-inside {/*THIS IS MODULE LEFT*/
padding:10px;
}
#modleft {/*THIS IS MODULE LEFT*/
margin-top:10px;
float:left;
width:198px;
overflow:hidden;
border:solid #DEDCD4 1px;
background-color:#FFFFFF;
}
#modleft-inside {/*THIS IS MODULE LEFT*/
padding:10px;
}

/*COLAPSE MODULES FUNCTIONS */

/*LEFT AND RIGHT MODULES VISIBLE */
#main-body {/*THIS IS MAIN DIV HOLDS THE CONTENT DIV*/
float:left;
width:850px;
}
#content {/*THIS IS CONTENT DIV AND YOUR MAINBODY IS INSIDE OF IT*/
text-align:left;
float:right;
width:650px;
}
#box {
margin-bottom:10px;
}
#mainbody{border:solid #DEDCD4 1px;
background-color:#FFFFFF;
padding:0 10px 0 10px;
}


#content-inside {
padding:11px 10px 10px 10px;
}
/*COLAPSE  LEFT MODULE ONLY*/
#main-body-right {
float:left;
width:850px;
}
#content-right {
text-align:left;
float:left;
width:850px;
}
/*COLAPSE RIGHT MODULE ONLY*/
#main-body-left {
float:left;
width:1000px;
}
#content-left {
text-align:left;
float:right;
width:800px;
overflow:hidden;
}
/*COLAPSE RIGHT AND LEFT MODULE */
#main-body-full {
float:left;
width:1000px;
}
#content-full {
margin:0 auto;
text-align:left;
width:1000px;
}
/*END COLAPSE MODULES FUNCTIONS */
#clear{
clear:both;
}

#footer{
border-top:solid #ccc 1px;

}
#footer-left{
margin-top:10px;
float:left;
width:480px;


}
#footer-right{
float:right;
width:520px;
margin-top:10px;

}
#footer-closer{
clear:both;}





a img {
	border: none;
}
img {
	margin: 0;
	padding: 0;
}


h1, h2, h3, h4, h5, h6{

}



h1{
font-size:25px;

line-height:30px;
}

h2{
font-size:20px;

line-height:25px;
}

h3{
font-size:15px;

line-height:20px;
}
h4{
font-size:12px;

line-height:17px;
}






#news{


}
#news-left{

float:left;
width:46%;
border:solid #DEDCD4 1px;
background-color:#FFFFFF;
padding:10px;
margin-bottom:8px;
}
#news-right{
float:right;
width:46%;
border:solid #DEDCD4 1px;
background-color:#FFFFFF;
padding:10px;
margin-bottom:8px;
}
#news-closer{
clear:both;

}


#bottom{
margin-top:6px;

}
#bottom-left{
float:left;
width:46%;
border:solid #DEDCD4 1px;
background-color:#FFFFFF;
padding:10px;
}
#bottom-right{
float:right;
width:46%;
border:solid #DEDCD4 1px;
background-color:#FFFFFF;
padding:10px;

}
#bottom-closer{
clear:both;}











.moduletablemainnav{
position:relative;
z-index:100;
margin:0;
padding:0;

}
#mainlevelmainnav,#mainlevelmainnav ul{
float:left;
list-style:none;
background:transparent;
line-height:30px;
margin:0;
padding:0;
}
#mainlevelmainnav a{
display:block;
color:#fff;
text-decoration:none;
padding:0 0.5em 0 0.5em;
}

ul#mainlevelmainnav li a#active_menumainnav  {
	color: #000000;

	background-image: url(../images/menu-bg.jpg);
	background-repeat:repeat-x;

}

#mainlevelmainnav a:hover{
color: #000000;

	background-image: url(../images/menu-bg.jpg);
	background-repeat:repeat-x;

}

#mainlevelmainnav a:hover li{
color: #000000;
background-image:none;

}



#mainlevelmainnav li{
float:left;
padding:0;
background-image:none;
}
#mainlevelmainnav li ul{
position:absolute;
left:-999em;
width:12em;
background:#444;
border:#333 1px solid;
margin:0;
background-image:none;
}
#mainlevelmainnav li li{
width:11em;


}
#mainlevelmainnav li ul a{
width:11em;
color:#fff;
background-image:none;
line-height:25px;

}
#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul, #mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
left:-999em;
background-image:none;
}
#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul, #mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover ul, #mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul{
left:auto;
z-index:6000;
background-image:none;
}
#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover{
background-image:none;
}

HTML:

I would be so grateful if anyone could fix this, im sure it's just a matter of tweaking some things..i have been able to tweak it to work for IE, but not for both IE and FF...

cscott5288, Sep 6, 2008 IP