Ian Piper wrote:
> Hi all, > > I am having trouble getting the CSS faux columns method working in a > site I'm developing. It is a Joomla 1.5 site BTW. I want to be able to > have either a two-column or three-column layout and thought the faux > column method would do it. So it does for Safari, FF (Win/Mac) and > IE7. But for IE6 there is a problem when I choose a three-column > layout. Here is the site (the index.php matters, otherwise you will > load my current live site). > > http://www.tellura.co.uk/index.php Amazing that I can still test in IE6. ;-) <!--[if lte IE 8]> <style type="text/css"> #leftfauxcol, #rightfauxcol {height:1%} /* #rightfauxcol {background:none;} */ </style> <![endif]--> Your current rules in the style sheet for IE6 called in by IE6 Conditional Comments is not doing nothing much at all. IE6 needs some hasLayout [1] instead. #leftfauxcol, #rightfauxcol {height:1%} At the same time you need to add a IE6pngfix on the transparent background image on the #rightfauxcol. I added my special rule (commented out) so I could see the transparent background image on the #leftfauxcol, yes the png was blocking the view. My question to you is why are you using two images for a fix with IE6 when the container is always a fixed width in this browser? I would suggest just serving IE6 just one image. You could alter the #leftfauxcol image and use the other image on #rightfauxcol to cover the right hand side of the #leftfauxcol image for the good browsers that support min-width. Do you follow what I mean by this? > Oh, there is one other weird thing on this site (IE6 only again): the > orange teaser bar near the top of the page should be about the same > depth as the blue menu title bars immediately below. In IE6 however > the bar is about 11px deeper than in other browsers. Again I'm > miserably baffled. > > Thanks, > > > Ian. Replace this. <div id="top"> </div> with <div id="top"></div> and alter you CSS. #top { background:#b0c2cc url(../images/teaser.png) no-repeat; padding:10px; /* DELETE */ height:27px; /* ADD */ clear:both; /* ADD */ } and the orange teaser bar will appear the same as it does in other browsers. BTW, You gave me no clues which divs to look out for, like ID name. Luckily I am skilled in the hunt and finally figured out what to target. IE Conditional Comments makes it more difficult for helpers when styles for IE are locked inside IE Conditional Comments. This forces us to have to go to extraordinary lengths to override the styles within them. I had to copy your code and replace your CC with my own CC. Simply this could be done with. * html #leftfauxcol, * html #rightfauxcol {height:1%} * html #leftfauxcol {background: url(one-image-ie6.png)} I love Internet Explorer........? [1] <http://www.satzansatz.de/cssd/onhavinglayout.html> Alan http://css-class.com/ ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
