Tue, 2009-02-03 21:49
Hi everyone,
I've created a template for Joomla CMS 1.5 version as you can see ideia-atlantico.pt. And, as far as I know, it works fine in FF, Chrome, and IE7.
My problem, as I noticed just now, in IE 6 the footer bar which was supposed to be always aligned at the bottom of the page just isn't.
Please open the site with FF or IE 7 and IE 6 to illustrate my problem.
The template_css.css code is as follows:
/*general layout*/ body{ margin:0px; padding:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; background-image:url(../images/main_bg6.jpg); background-repeat:repeat-y; background-attachment:fixed; background-position: center top; /*background-position: 250px;*/ } #main_container{ /*min-width:800px; max-width:900px;*/ /*width:784px;*/ /*height:600px;*/ width:820px; height:auto; margin:0px auto; padding-bottom: 100px; background-color:#FFFFFF; overflow:hidden; } #header{ background-color:#FFFFFF; z-index:100; } html>body #header{ position:fixed; } * html #header{ top:0; position:absolute; } #head_banner{ height:129px; } #footer_menu{ background:url(../images/ia/bg_top_menu.jpg) repeat-x 0px 0px ; height:30px; width:820px; overflow:visible; z-index:100; position:absolute; /*top:129px; position:absolute;*/ /*overflow:auto; overflow:no-scroll;*/ } #menu_top{ background:url(../images/ia/bg_top_menu.jpg) repeat-x 0px 0px ; height:30px; width:820px; overflow:visible; z-index:100; /*top:129px; position:absolute;*/ /*overflow:auto; overflow:no-scroll;*/ } #top_nav { top:126px; position:absolute; overflow:visible; z-index:200; } #crumbs{ background-color: #e5e5e5; padding:8px 0px 7px 0px; border-bottom-width: 100x; border-bottom-style: solid; border-bottom-color: #FFFFFF; clear:both; top:159px; position:absolute; width:820px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; margin:0px 0px 10px 0px; } html>body #crumbs{ /*position:fixed;*/ } /*Ideia-atlantico Menu*/ #left_col_3cols, #left_col{ /*width:190px;*/ width:170px; height:200px; display:block; /*float:left; padding:390px 0px 0px 0px; */top:189px; position:absolute; padding:0px 10px 0px 0px; z-index:300; overflow:visible; } html>body #left_col{ position:fixed; } #left_col div.module div div div{ z-index:500; } .m0l0oout37{ background-image: url(../images/menu_bar_175.jpg); background-repeat: no-repeat; background-position: left top; } .m0l0oover37 { background-image: url(../images/menu_bar_175.jpg); background-repeat: no-repeat; background-position: left top; } /*#right_c_cols, */ #comp_col_right{ width:600px; /*float:right;*/ /*padding:186px 20px 100px 0px;*/ font-size:11px; /*padding:0px 0px 160px 0px;*/ left:180px; top:189px; overflow:hidden; position:relative; margin-bottom:30px; /*z-index:-10;*/ /* height:300px; overflow:auto;*/ } /*\*/ html*#comp_col_right{ [padding:0px 0px 0px 0px;/*older netscape and FF*/ padding:0px 0px 0px 0px;/*safari and chrome hack*/ ]padding:0px 0px 0px 0px; }/**/ .dummyend[id]{clear:both/*end hack using dummy attribute selector for IE5 mac, else error in CSS occurs!*/} /** html #comp_col_right{ width:600px; float:right; padding:1px 0px 0px 0px; }*/ #comp_col_left{ width:649px; float:left; } #comp_col_3cols{ width:500px; float:left; } #right_col_3cols, #right_col{ width:149px; float:right; } .module-left{ float:left; width:383px; } #footer{ /*background-image: url(../images/ia/bar_rodape.jpg); background-repeat: repeat-x; background-position: left -5px; padding-top: 0px;*/ clear:both; overflow:hidden; bottom:-30px; position:absolute; width:820px; display:block; height:60px; background-color:#FFFFFF; } * html #footer{ background-image: url(../images/ia/bar_rodape.jpg); background-repeat: repeat-x; background-position: left -8px; padding-top: 8px; clear:both; bottom:18px; position:relative; width:820px; background-color:#FFFFFF; } html>body #footer{ position:fixed; } /*styles*/ /*common styles*/ /*General link Styling*/ a:link { font-size: 11px; color: #00CCFF; text-decoration: none; } a:hover, a:active { color: #333; text-decoration: underline; } a:visited { font-size: 11px; color: #999; text-decoration: none; } /*List item Styling*/ li { list-style-type:none; background: url(../images/ia/images/bullet.gif) no-repeat 0px 5px; padding-left: 13px; margin-left: 5px; } ul { margin: 10px; } a img{border:none;} /*joomla core styles*/ /*Graphical Elements These styles provide management of content's appearences. */ hr { /*many components use this as a seperator line */ background: transparent; height:1px; border: 1px solid #ccc; } .pagenav { /* this is for formatting texts where you see "<< Start < Previous 1 Next > End >>" links within content*/ text-align: center; font-size: 11px; font-weight: bold; border: 1px double #cccccc; width: auto; background:#f8f8f8; padding: 0px 10px; line-height: 20px; margin: 1px; } a.pagenav, a.pagenav:visited { /* as above but specifically if they are links */ font-weight: normal; color: #999999; } a.pagenav:hover { /* as above but specifically when the links are hovered over */ color: #00CCFF; } .pagenav_prev a { float: left; width: 430px; font-weight: normal; color:#00CCFE; } .pagenav_next a { float: right; width: 40px; font-weight: normal; color: #00CCFE; } .back_button { font-size:8px; background: url(../images/button_bg.gif) repeat-x; padding-top:1px; width: 55px; border: 1px solid #fff; color: #FFFFFF; margin: 4px; font-weight: normal; font-size:10px; text-align: center; height:17px; border:#FFFFFF thin 1px; } .back_button a { font-size:9px; color: #fff; } .small { /* a symantic style to allow you to add text with this class, that is used for small text, like date/written by etc */ font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 9px; color: #999; letter-spacing: 0.1em; margin: 0; padding: 0; text-decoration: none; font-weight: normal; } .button { /* button style for Joomla component, form and module buttons*/ background: url(../images/button_bg.gif) repeat-x; border: 1px solid #fff; color: #FFFFFF; margin: 4px; font-weight: normal; font-size:10px; text-align: center; padding: 1px 0 3px 0; height:23px; } .inputbox { /* the look of input boxes in forms */ font-size: 12px; color: #666; background: #e7f5ff; border: 1px solid #999999; padding: 1px 3px; margin: 0; } .createdate { /* styling the date the content was created on*/ background:url(../images/ia/images/date.png) no-repeat 0 5px; font-size: 10px; color: #666; text-indent:21px; font-weight: normal; margin:0; margin: 7px 0 5px 4px; padding: 5px 0 5px 0; } .modifydate { /*Styles the "Last updated on" text at the end of articles/contents */ background: url(../images/ia/last_edit.png) no-repeat ; text-indent: 12px; font-size: 9px; color: #666; text-decoration: none; font-weight: normal; padding-left:10px; } .readon { display:block; background:url(../images/read_more.gif) no-repeat; text-align: center; width:74px; height:18px; line-height: 18px; margin: 1em 0; } a.readon:link, a.readon:visited, { /* formatting the "Read on..." link on blog layout pages */ background:url(../images/read_more.gif) no-repeat; color: #fff; text-decoration: none; font-size: 11px; } a.readon:hover{ color: #01CAFF; text-decoration: underline; font-size: 11px;} /*Default styling for the pathway displayed by the mosPathWay()*/ span.pathway a { background:url(/images/M_images/arrow.png) 100% 50% no-repeat; padding-right:20px; } span.pathway img { display:none; } .pathway {line-height:10px; margin-left: 0px; font-size: 13px; } a.pathway:link, a.pathway:visited { font-size: 13px; color: #999; } a.pathway:hover { color: #fffffff; text-decoration:underline; } .contentpane { /* This is used mainly for Table that holds all non-article information (components, category lists, contact forms, etc). all contained within a single table*/ background-color : #fff; font-size: 1em; } .contentpaneopen { /*background-color : #FFFFFF; */font-size: 1em; z-index:-10; } table.contentpaneopen{ /*float:left;*/ } .contentheading { /* Used as the Title of the content, article, etc. being displayed, it is also used for Section's heading / titulo dos artigos */ /*background:url(../images/ia/main_content_top_bar_bg1.jpg) no-repeat 0px 12px; height:40px; font-size: 11px; margin-bottom: 0.7em; font-weight: bold; color: #fff; text-indent:25px; padding-top:0.65em; margin-right:10px; border-right:10px;*/ background: url(../images/ia/main_content_top_bar_bg1.jpg) no-repeat 1px 0px; height:25px; font-size: 12px; margin-bottom: 0.7em; font-weight: bold; color: #fff; text-indent:27px; padding-top:5px; vertical-align:right; } .contentpagetitle { /*Title of articles*/ font-size: 13px; font-weight: bold; color: 333333; text-align:left; vertical-align:top; } .componentheading { /* Used to format a components heading or title / titulos dos componentes */ background: url(../images/ia/main_content_top_bar_bg1.jpg) no-repeat 1px 0px; height:25px; font-size: 12px; margin-bottom: 0.7em; font-weight: bold; color: #fff; text-indent:27px; padding-top:5px; vertical-align:top; } table.contenttoc { margin: 10px; padding: 0px; float:right; vertical-align:top; } /* Joomla Sections Styles Styling of sections tables */ .sectiontableheader { /* This is for styling the section table headers on a SECTION's page.*/ background:url(../images/ia/toc_table.jpg) no-repeat 0px 5px; background-repeat:repeat-x; padding-top:3px; color :#fff; font-weight : bold; height:23px; border-right:10px; } .sectiontableentry1 { /* this is used when there's a whole list of data to provide and you need to create alternate colors for each row of data. This is the first color */ background-color:#F9F9F9; padding: 1px 7px 5px 10px; line-height:25px; font-size:11px; } .sectiontableentry2 { /* this is the second color for the row*/ background-color : #F3F3F3; padding: 1px 0 1px 10px; line-height:25px; font-size:11px; } /* Polls */ .poll { /* polls texts */ font-size: 1em; line-height: 14px } /*this helps make the poll look better as it removes the section and table entry lines*/ .poll .sectiontableentry1, .poll .sectiontableentry2 { background: none; } .pollstableborder { /* set the border properties of the polls voting table */ border: none; width: 160px; border: none; } .poll td { /* set the table data properties of the polls voting table */ font-size: 0.95em; color: #999999; font-weight: normal; padding: 4px; } h3 { background:url(../images/ia/bg_menu_lnk.jpg) no-repeat 0px 0px; font-size:11px; color: #fff; text-align: left; padding:5px 0px 0px 35px; height: 30px; margin: 0; width:153px; } /*TOPMENU STYLING STARTS - configuração do menu do TOPMENU*/ #top_nav{ width:49.5%; float:left; } #icons{ width:49.5%; float:right; } div#top_nav ul#mainlevel-nav { margin: 0; padding: 0; width: 600px; height: 31px; line-height: 31px; border: 0px solid red; /*text-indent: 6px;*/ } div#top_nav ul#mainlevel-nav li { float: left; width: auto; margin:0px; padding: 0 0px 0 5px; list-style-type: none; background: none; } div#top_nav ul#mainlevel-nav a.mainlevel-nav{ background:url(../images/ia/bt_bg.jpg) no-repeat right ; } div#top_nav ul#mainlevel-nav a.mainlevel-nav:link, div#top_nav ul#mainlevel-nav a.mainlevel-nav:visited { color: #fff; text-decoration: none; padding: 3px 16px 4px 6px; } div#top_nav ul#mainlevel-nav a.mainlevel-nav:hover { background: #373737 ; border: 1px solid #666 ; text-decoration: none; padding: 2px 15px 3px 5px; } div#top_nav ul#mainlevel-nav a#active_menu { background: #373737; border: 1px solid #666; text-decoration: none; padding: 2px 15px 3px 5px; } .module-res{ position: absolute; top: 0px; left: 710px; float:right; padding:0px 10px 0px 0px; } /*search box styling top left*/ .search { position: absolute; left: 380px; float:left; top: 6px; padding:0px 10px 0px 0px; } .search form{ margin:0px; padding:0px; } .search input { background: #FFF; border: 1px solid #FFF; color: #000; } .search input:hover { background: #FFFFFF; border: 1px solid #FFF; color: #000; } /*left menu*/ /*.module_menu div div div ul,.module_menu div div div ul li{ margin:0px; padding:0px; } .module_menu div div div ul li{ height: 15px !important; height: 20px; background-image: url(../images/ia/bg_menu_lnk.jpg); background-repeat: no-repeat; background-position: left top; padding:5px 0px 0px 0px; } .module_menu div div div ul li a, .module_menu div div div ul li a:link, .module_menu div div div ul li a:visited{ padding:0px 0px 0px 30px; color:#CCCCCC; text-decoration:none; font-size:12px; } .module_menu div div div ul li a:hover{ color: #01CAFE; text-decoration:underline } .module_menu div div div ul li ul{} .module_menu div div div ul li ul li{ padding:0px; }*/ div.module_menu { margin: 0; padding: 0; /* margin-bottom: 15px; */} div.module_menu div div div { /*padding: 10px; padding-top: 30px; padding-bottom: 15px;*/ width: auto; } div.module_menu div div div div { background: none; padding: 0; } div.module_menu ul { margin:0; padding:0px 0px 0px 0px; } div.module_menu ul li{ background-image: url(../images/ia/bg_menu_lnk.jpg); background-repeat: no-repeat; background-position: left top; margin:0px 0px 0px 0px; padding:3px 0px 0px 30px; border-bottom:1px solid white; /*height:30px;*/ overflow:visible; } div.module_menu ul li a{ height:20px; display:block; } .module_menu div div div ul li a, .module_menu div div div ul li a:link, .module_menu div div div ul li a:visited{ padding:0px 0px 0px 0px; color:#CCCCCC; text-decoration:none; font-size:12px; } .module_menu div div div ul li a:hover{ color: #01CAFE; text-decoration:underline } div.module_menu ul li ul{ padding:0px 0px; margin:0px; } div.module_menu ul li ul li{ margin:0px; padding:0px 0px; background:none; } div.module_menu ul li a:link, div.module_menu ul li a:visited { } div.module_menu ul li ul li a{ display:block; margin:10px 0px; } div.module_menu div div div ul li ul li a, div.module_menu div div div ul li ul li a:link, div.module_menu div div div ul li ul li a:visited{ color:#333333; } div.module_menu div div div ul li ul li a:hover{ /**color: #01CAFE;*/ color:#333333; text-decoration:underline } .breadcrumbs, .pathway{ margin:2px; padding:0px; }
and I've added this code to index.php to try to fix this IE6 issue:
<!--[if lte IE 6]> <style type="text/css" media="screen"> body { overflow-y: hidden; } div#comp_col_right { height: 100%; overflow: auto; } div#footer_menu{ } div#footer{ clear:both; overflow:hidden; bottom:-30px; position:fixed; } </style> <![endif]-->
Any help please???
Thanks
João Ribeiro