wutske 0 Report post Posted September 5, 2008 I'm working on a template for joomla, but I'm heaving some serious problems to get it working in IE6 and lower. Basically, this is my layout: -------------------------------------------------------------------------------------| | || header | || ----------------------------------------------------------------- | || | right || content | area || | || | || | || | || | |------------------------------------------------------------------------------------- html <?php defined( '_JEXEC' ) or die( 'Restricted access' );?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://forums.xisto.com/no_longer_exists/; <html xmlns="http://forums.xisto.com/no_longer_exists/; xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" ><head><jdoc:include type="head" /><link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/groenewijzer/css/style.css" type="text/css" /></head><body><div id="main_wrapper"> <div id="right_column"> <div id="h_arrow">Â </div> <!-- einde h_arrow --> <br /> <div id="right"><jdoc:include type="modules" name="right" style="xhtml" /></div> <!-- einde right --> <div id="user4"><jdoc:include type="modules" name="user4" style="xhtml" /></div> <!-- einde user4 --> </div> <!-- einde right_column --> <div id="header"> <div id="h_top">Â </div> <!-- einde h_top --> <div id="h_middle"><span id="title">De Groene Wijzer</span></div> <!-- einde h_middle --> <div id="h_bottom"> <table cellpadding="0" cellspacing="0"> <tr> <td id="pill_l">Â </td> <td id="pill_m"><jdoc:include type="modules" name="user3" /></td> <td id="pill_r">Â </td> </tr> </table> </div> <!-- einde h_bottom --> </div> <!--einde header --> <div id="content"> <jdoc:include type="component" /> <div id="footer" class="clear"> <jdoc:include type="modules" name="footer"/> </div> <!-- einde footer --> </div> <!-- einde content --></div> <!-- einde main_wrapper--></body></html> CSS body { background-color: #316b16; font: normal 12px arial;}#main_wrapper { background-color: #FFF; border: 1px solid #000; margin: auto; padding: 5px; width: 90%;}a img { border: 0;}a, a:visited { color: #4A4;}a:active, a:hover { color: #383;}.small { font-size: 10px;}.clear { clear: both;}td.contentheading { font: bold 14px arial;}td.createdate { font-size: 10px;}td.modifydate, td.createdate { padding: 0px; margin: 0px; font: normal 8px arial; color: #AAA;}#header { clear: none;} #h_top { height: 45px; background-color: #FFF; margin: 0px 192px 0px 0px; padding: 0px; border-right: 1px solid #d4f36a; } #h_middle { background-color: #d4f36a; height: 60px; margin: 0px 192px 0px 0px; padding: 0px; text-align: center; } #h_middle #title { font: bold 40px arial; color: #8a4; position: relative; top: 10%; } #h_bottom { height: 45px; text-align: center; background-color: #FFF; margin: 0px 192px 0px 0px; border-left: 1px solid #d4f36a; border-right: 1px solid #d4f36a; padding: 0px; text-transform: uppercase; } #h_bottom table { margin-top: 5px; margin-left: auto; margin-right: auto; } #pill_l { width: 23px; height: 34px; background: url(../images/pill_0_0.png) no-repeat; } #pill_m { background: url(../images/pill_0_2.png) repeat-x; } #pill_r { width: 23px; height: 34px; background: url(../images/pill_0_3.png) no-repeat; } #h_bottom ul { margin: 0px; padding: 0px; } #h_bottom li { /*Reserved for top menu*/ vertical-align: 50%; font-weight: bold; display: inline; list-style: none; margin-right: 10px; padding-left: 5px; border-left: 1px solid #793; } #h_bottom a, #h_bottom a:visited { color: #793; text-decoration: none; }#right_column { float: right;} #h_arrow { background: url(../images/arrow.gif) no-repeat; width: 192px; height: 150px; margin: 0px; padding: 0px; } #user4, #right { padding: 5px 3px 5px 7px; } #user4 *, #right * { max-width: 182px; } #content { padding: 5px; margin-right: 192px; border-left: 1px solid #d4f36a; border-bottom: 1px solid #d4f36a; border-right: 1px solid #d4f36a;}#footer { font: 8px italic arial; text-align: center;} and this is the problem: As soon as I add the "right_colum", my header shrinks a few pixels in IE6, changing the margin-left doesn't help, the header (and it's content) won't grow. It works in every other browser, IE7, FF, Opera, Safari ... except IE6, IE5.x Anyone has an idea how to fix this ? Ps. using tables is not an option ! Share this post Link to post Share on other sites
TavoxPeru 0 Report post Posted September 6, 2008 For me your problem is related with the margins and/or paddings of your divs, try to reset every one to zero and then start adding them as needed.To reset them simply add this to your css rules, for example for the body: body { background-color: #316b16; font: normal 12px arial; margin:0; padding:0;}Best regards, Share this post Link to post Share on other sites
wutske 0 Report post Posted September 6, 2008 (edited) I tried that, but it changed nothing, IE keeps my header 4-5px away from the right_content. I did find how I could fix it, but it's just ridiculous, as long as I don't set the height property, everything works like it should do. Hower, this means I have to start cheating with line-height to get the right height for my divs //edit: new code to show how I fixed it HTML <?php defined( '_JEXEC' ) or die( 'Restricted access' );?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://forums.xisto.com/no_longer_exists/; <html xmlns="http://forums.xisto.com/no_longer_exists/; xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" ><head><jdoc:include type="head" /><link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/groenewijzer/css/style.css" type="text/css" /></head><body><div id="main_wrapper"> <div id="right_column"> <div id="h_arrow"> </div> <!-- einde h_arrow --> <br /> <div id="right"><jdoc:include type="modules" name="right" style="xhtml" /></div> <!-- einde right --> <div id="user4"><jdoc:include type="modules" name="user4" style="xhtml" /></div> <!-- einde user4 --> </div> <!-- einde right_column --> <div id="h_top"> </div> <!-- einde h_top --> <div id="h_middle"><span id="title">De Groene Wijzer</span></div> <!-- einde h_middle --> <div id="h_bottom"> <table cellpadding="0" cellspacing="0"> <!-- if the padding-top: 5px is applied to this table, IE6 padds the whole h_bottom div, adding a gap in the borders (left and right) --> <tr id="IE6_lte_fix_header"><td colspan="3"> </td></tr> <!-- this tr with line-height: 5px does what padding-top: 5px should have done ... --> <tr> <td id="pill_l"> </td> <td id="pill_m"><jdoc:include type="modules" name="user3" /></td> <td id="pill_r"> </td> </tr> </table> </div> <!-- einde h_bottom --> <div id="content"> <jdoc:include type="component" /> <div id="footer" class="clear"> <jdoc:include type="modules" name="footer"/> </div> <!-- einde footer --> </div> <!-- einde content --></div> <!-- einde main_wrapper--></body></html> CSS (what's changed) #h_top { line-height: 45px; background-color: #FFF; margin-right: 192px; border-right: 1px solid #d4f36a; } #h_middle { background-color: #d4f36a; margin-right: 192px; padding: 0px; text-align: center; } #h_middle #title { font: bold 40px arial; line-height: 60px; color: #8a4; } #h_bottom { line-height: 45px; text-align: center; background-color: #FFF; margin-right: 192px; border-left: 1px solid #d4f36a; border-right: 1px solid #d4f36a; padding: 0px; text-transform: uppercase; } #h_bottom table { line-height: 12px; margin-left: auto; margin-right: auto; } #IE6_lte_fix_header { line-height: 5px; font: normal 5px arial; } #pill_l { width: 23px; height: 34px; background: url(../images/pill_0_0.png) no-repeat; } #pill_m { background: url(../images/pill_0_2.png) repeat-x; } #pill_r { width: 23px; height: 34px; background: url(../images/pill_0_3.png) no-repeat; } #h_bottom ul { margin: 0px; padding: 0px; } #h_bottom li { /*Reserved for top menu*/ vertical-align: 50%; font-weight: bold; display: inline; list-style: none; margin-right: 10px; padding-left: 5px; border-left: 1px solid #793; } #h_bottom a, #h_bottom a:visited { color: #793; text-decoration: none; } Edited September 6, 2008 by wutske (see edit history) Share this post Link to post Share on other sites
Herbert1405241469 0 Report post Posted September 18, 2008 I'm glad you figured it out. Man I hate Joomla. I had to jump in on a project that someone started in Joomla, and had to figure out where the heck they put everything, and it took an hour to make a new page with a form in it.... UGH. I much prefer coding straight PHP and using includes to minimize redundancy.IE 6 also ticks me off. I'll design a site that looks perfect in all modern browsers (ie 7, firefox, etc) and our client uses ie6 and complains that everything is broken >.<Luckily, I found a tutorial on how to get IE 6 in Ubuntu, so now at least I can see what he's talking about. And going to my other site's I've done, those are broke too, and never realized it. So web developers, take heed. Find a way to check your work in IE6. It sucks, but people still use it Share this post Link to post Share on other sites
wutske 0 Report post Posted September 19, 2008 I'm glad you figured it out. Man I hate Joomla. I had to jump in on a project that someone started in Joomla, and had to figure out where the heck they put everything, and it took an hour to make a new page with a form in it.... UGH. I much prefer coding straight PHP and using includes to minimize redundancy.IE 6 also ticks me off. I'll design a site that looks perfect in all modern browsers (ie 7, firefox, etc) and our client uses ie6 and complains that everything is broken >.<Luckily, I found a tutorial on how to get IE 6 in Ubuntu, so now at least I can see what he's talking about. And going to my other site's I've done, those are broke too, and never realized it. So web developers, take heed. Find a way to check your work in IE6. It sucks, but people still use it I have no troubles designing templates for Joomla, requires hardly any php coding so it's basicly the same as creating a site design.When I design a site, I always design them in linux and test them in windows. I have a virtual XP installed with the most common browsers (IE3 till 7, Firefox 3, Opera 9.50, Safari) and I try to make them work in all (altough I don't mind a few glitches in IE6 and lower, as long as they don't disturb) Share this post Link to post Share on other sites
