Need Help With This CSS!

Discussion in 'CSS' started by cscott5288, Sep 6, 2008.

  1. #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