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... I will pay $5 via paypal to the first person who can fix it...
Try this code... /*------------------------------------------------------------------------ # 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} #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; } Code (markup): PM me if im right =P
And we have a winner! thank you so much. Can't beleive i didn't think of looking in the HTML.. only problem now is, when the site is viewed in FF, the "search movies..." feild is not quite in the same spot as it is in IE. Guess it's not such a big deal, but does anyone know how i can fix that too?
I can't seem to find that code in either the HTML or CSS. Are you sure it's not named something else?
Its in the HTML, you probably got confused since I already added in the <br /> tag in the quoted block.
Hmmm nope, it's not in there..see for yourself: <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." ); $iso = split( "=", _ISO ); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <?php if ( $my->id ) { initEditor(); } mosShowHead(); ?> <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> <link href="<?php echo $mosConfig_live_site."/templates/".$mainframe->getTemplate()."/css/template_css.css"; ?>" type="text/css" rel="stylesheet" /> <link href="<?php echo $mosConfig_live_site."/templates/".$mainframe->getTemplate()."/css/joomla.css"; ?>" type="text/css" rel="stylesheet" /> <link href="<?php echo $mosConfig_live_site."/templates/".$mainframe->getTemplate()."/css/typo.css"; ?>" type="text/css" rel="stylesheet" /> <script type="text/javascript" language="JavaScript" src="<?php echo $mosConfig_live_site."/templates/".$mainframe->getTemplate()."/suckerfish/js/menu.js"; ?>"></script> <?php { //START COLAPSING MODULES $left = mosCountModules( 'left' ); // LEFT SIDE MODULES $right = mosCountModules( 'right' ) ; // RIGHT SIDE MODULES if ( $left && $right ) {// Litle IF statement that says if module left and module right are published. Next line please $maincontent = 'main-body';// please use div main-body! Next line please $content = 'content'; // and use div content! } elseif ( $left ) { // Now second IF says, if only left module is published $maincontent = 'main-body-left';// please use div main-body-left! $content = 'content-left';// and use div content-left! } elseif ( $right ) {//And third IF says if only right module is published $maincontent = 'main-body-right';// please use div main-body-right! $content = 'content-right';// and use div content-right! } else {// Last statement says ,Otherwise if left and right module are not published $maincontent = 'main-body-full';// please use div main-body-full! $content = 'content-full';// and use div content-full! }//END COLAPSING MODULES ?> <?php } ?> </head> <body> <div id="credits"><a href="http://www.gerards.it/" title="Prodotti e trattamenti cosmetici">Prodotti e trattamenti cosmetici</a></div> <div id="wrap"><!--Just to add some color--> <div id="div1"> <div id="div1-left"></div> <div id="div1-right"><?php mosLoadModules('user5', -2); ?></div> <div id="div1-closer"></div> </div> <div id="div2"> <div id="div2-left"></div> <div id="div2-right"> <div id="space"></div> <?php mosLoadModules('user3', -2); ?></div> <div id="div2-closer"></div> </div> <div id="container"> <!--START CONTAINER--> <!--START MAIN BODY--> <div id="<? echo $maincontent; ?>"> <!--Ok here we go this line calls the div that we need depending if the module is published or not--> <div id="<? echo $content; ?>"><!--And same thing here. --> <div id="content-inside"> <?php if( mosCountModules('inset') ) : ?> <div id="box"><?php mosLoadModules ( 'inset', -2 ); ?></div> <?php endif; ?> <div id="news"> <?php if( mosCountModules('user1') ) : ?> <div id="news-left"><?php mosLoadModules ( 'user1', -2 ); ?></div> <?php endif; ?> <?php if( mosCountModules('user2') ) : ?> <div id="news-right"><?php mosLoadModules ( 'user2', -2 ); ?></div> <?php endif; ?> <div id="news-closer"></div> </div> <div id="mainbody"> You are in: <?php mosPathWay(); ?> <?php mosMainBody(); ?></div> <div id="bottom"> <?php if( mosCountModules('user7') ) : ?> <div id="bottom-left"><?php mosLoadModules ( 'user7', -2 ); ?></div> <?php endif; ?> <?php if( mosCountModules('user8') ) : ?> <div id="bottom-right"><?php mosLoadModules ( 'user8', -2 ); ?></div> <?php endif; ?> <div id="bottom-closer"></div> </div> <!--Most of you know this but for those who dont ,this Joomla command loads the component--> </div></div><!--Close That Div--> <?php if (mosCountModules('left')) {?> <!--This is one of the main comands for collapsing that says,ONLY If Joomla/Mambo counts or sees module being published in left position CONTINUE 2 LINES DOWN--> <div id="modleft"> <div id="modleft-inside"> <?php mosLoadModules('left',-2);?><!--Joomla/Mambo please show that module in left position.Which means that the div will not be loaded either if there is no module because we placed the if statement BEFORE the div id=modleft --> </div><!--Close That Div--> </div><!--Close That Div--> <?php } ?><!--This closes the if statement.Please watch for this one!!! If you place it before the closing div your command will still work but than your site might NOT Validate because it will leave div in there--> </div> <!--END MAIN BODY--> <?php if (mosCountModules('right')) { ?> <!--Same goes here as left module--> <div id="modright"> <div id="modright-inside"> <?php mosLoadModules('right',-2);?> <!--Same goes here as left module--> </div><!--Close That Div--> </div><!--Close That Div--> <?php } ?> </div><!--END CONTAINER--> <div id="clear"></div> <div id="footer"> <?php if( mosCountModules('banner') ) : ?> <div id="footer-left"><?php mosLoadModules('banner', -2); ?></div> <?php endif; ?> <?php if( mosCountModules('user9') ) : ?> <div id="footer-right"><?php mosLoadModules('user9', -2); ?></div> <?php endif; ?> <div id="footer-closer"></div> </div> </div> </body> </html> HTML:
I can edit this part: <div id="modleft"> <div id="modleft-inside"> <?php mosLoadModules('left',-2);?><!--Joomla/Mambo please show that module in left position.Which means that the div will not be loaded either if there is no module because we placed the if statement BEFORE the div id=modleft --> </div><!--Close That Div--> what do i do with that?
I mean the "module" that this code loads: That loads the HTML for the entire left column. Theres probably a separate file for the left column?