Re: [css-d] CSS faux columns not working in IE6
Gunlaug Sørtun wrote:
Alan Gresley wrote:
Ian would you have happen to have download IE8 as an overwrite of
IE7? If so those [if lte IE 6] will not be seen by your standalone
version of IE6.
Just a comment here: we keep on running into these standalone and
conditional comments problems quite often, which complicates debugging
for some.
I use complete, original, versions of IE6, IE7 and IE8b1, which means I
never run into such problems. I see what a regular visitor will see.
The only extra work I have is that I have to download conditionally
commented stylesheets separately before I can debug them.
Very true Georg. For a developer wanting to develop for IE6 when using
conditional comments they must have original standalone versions of IE6, IE7
and IE8b1 to test with.
Since I never use such comments it does not affect me personally and I now see
it as a bonus having my version vectors corrupted. I know Georg, you are going
to cry fowl (ops foul :-) but please consider it from my perspective since now
my standalone IE6 will never see inside those conditional comment just meant
for IE6 when I first view a page. I now see the raw IE6 with all it bugs. Very
quickly I can see the dilemma one is facing with this browser. I say this since
I often see unnecessary rules in those special style rules for IE6 anyway and I
don't have the debug them as well as the normal CSS. Since other people are not
me and don't have access to my head, standalone versions are a must. :-)
Regarding the original case: it already had those 'hasLayout' fixes - in
double dose with 'float: left; width: 100%;'. One of those was of course
enough.
I have updated my fix accordingly.
http://css-class.com/x/tellura/
/* \*/
* html #leftfauxcol {float:left;width:100%}
* html #rightfauxcol {height:1%}
/**/
I can't figure out which one is correct. It could be this.
/* \*/
* html #leftfauxcol {height:1%}
* html #rightfauxcol {float:left;width:100%}
/**/
div id=wrap
div id=leftfauxcol
div id=rightfauxcol/div
/div
/div
I would think it the first one since #leftfauxcol contains #rightfauxcol. Is
this correct?
I found changing image-format wasn't enough though, as I immediately
changed it to 8bit png (same as gif in this case) and still had
background-positioning problems in my real IE6 - which led to the
proposed background-position change for IE6.
Problem was I forgot to mention the necessary image-format change, to
make IE6 see the transparent part as transparent, when I responded, and
I never looked back since my own copy worked flawless.
regards
Georg
--
http://www.gunlaug.no
I tried the 8bit png but I still saw the silver background so I changed it to a
gif.
As a general reminder please understand that there is two ways to debug a page
either being the quick way or the long way.
1. The quick way is to save the HTML source offline and hot link the linked
CSS. This way we don't have to download the CSS and images. All we need to do
now is add an embedded style to the source within the header. For the IE6 fixes
we just hack IE6 into line in most cases and then we know the exact fixes
needed. In Firefox we just edit the live CSS.
2. The long way is to create a special offline folder and save the HTML source
as an index page within this folder. Then we have to either embed the CSS in
the head or as an external file. Then we have to save particular images and
change the URL source in the CSS for each crucial image. In this case I had to
go back to Ian's page and save the header image also since Firefox will reduce
the height of the header if no image is loaded.
The quick way I did last night. I was able to determine that the right image
was hiding the left image or is that visa visa (not sure now, confused). This
took me about and hour. I have taken the longer way now, but since I already
had the source off-line I had already done most of the debugging and I only
needed another hour. I also played around with the #header since there was a h1
header with a negative left margin to hide it from view. This was creating the
height for the #header and as you adjusted the text size the header area height
would adjust in height accordingly and sometimes cover content. This h1 header
needed to be removed from the flow completely by absolute positioning and a
declared height was needed for the #header. These fixes you will find in the
main embedded style Ian.
So summing up, using pngs without considering IE6 support for transparent pngs
can cause confusion when trying to debug a page for IE6. Even though I have
spent 3 hour including writing emails I do see this as helping me understand
more about debugging IE6. I only began CSS when IE7 was released so I very good
with understanding IE7. I also somewhat understand IE6 or earlier bug behavior
but Georg is a true master with IE6. I will provide this link again.
Re: [css-d] CSS faux columns not working in IE6
On 24 Mar 2008, at 5:14am, Alan Gresley wrote:
Holly Bergevin wrote:
From: Ian Piper [EMAIL PROTECTED]
http://www.tellura.co.uk/index.php
As you can see, the image used for the background for the left
sidebar doesn't display in three-column mode and the content
column's
white background doesn't fill the space unless the content is
longer
than the sidebars. But only for IE6, and only when there is no
right
sidebar.
Ian, is it possible that the problem is the images for the faux
columns? They are .png; do they have 32-bit transparency applied?
It looks to me (and I could be all wet) like when the right side is
painted, since the image is as wide as the container, then the
background of the left side of the page (everything left of the
right blue column) gets covered by the image, which shows gray on
my machine, and reminds me of .png transparency issues in IE.
Have you tried 8-bit transparency, or a .gif for those faux columns
instead of the .png?
~holly
Hi Holly, this is indeed what is happening. The image on the right
is covering the left image. I have put my offline test online now.
http://css-class.com/x/tellura/
The image on the #rightfauxcol div is now transparent gif. The only
fix I applied to IE6 was.
#leftfauxcol, #rightfauxcol {height:1%}
These fixes are buried in the embedded in [if gte IE 6] conditional
comments in the header.
Ian would you have happen to have download IE8 as an overwrite of
IE7? If so those [if lte IE 6] will not be seen by your standalone
version of IE6. If not remember to change the conditional comments
from [if gte IE 6] to [if lte IE 6] or you will targeting IE8 as
well. If you want to use conditional comments for importing style
sheets for IE why not use just [if lte IE 7] and separate IE6 from
IE7 rules by using * html within the same style sheets.
Holly, Alan, Georg,
That is it. Thank you so much for getting to the bottom of this. Once
again I am in awe of the skill and readiness of people on this list to
help others. More power to your collective elbows.
Regards,
Ian.
--
(BTW I have not downloaded IE8, but will make a note of your
suggestions for when I do).
__
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/
Re: [css-d] CSS faux columns not working in IE6
Alan Gresley wrote: Very true Georg. For a developer wanting to develop for IE6 when using conditional comments they must have original standalone versions of IE6, IE7 and IE8b1 to test with. [...] Since other people are not me and don't have access to my head, standalone versions are a must. :-) To sum it up: any strategy may work for the one who creates it, but not necessarily for others. It's the same as that I have all developer-tools for Firefox, but never use them because they introduce debugging-limitations I'm not willing to accept. They work well for others though. So, having working strategies is fine, but one can not expect others to use or follow the same ones, or even understand them. Regarding the original case: it already had those 'hasLayout' fixes - in double dose with 'float: left; width: 100%;'. One of those was of course enough. I have updated my fix accordingly. http://css-class.com/x/tellura/ Coming through just fine. [...] I would think it the first one since #leftfauxcol contains #rightfauxcol. Is this correct? Doesn't really matter, as it is just adding fat on top of butter :-) I prefer using only 'width: value' when I can, as (outside a conditional comment) that wouldn't upset old IE/Mac (if supported). Means I won't have to hack these rules between IE/win and IE/Mac. I tried the 8bit png but I still saw the silver background so I changed it to a gif. Don't know why that happened, as IE6 treats static 8bit png same as 8bit gif. As a general reminder please understand that there is two ways to debug a page either being the quick way or the long way. ...or the other (usually very quick) way :-) I always use Opera's save as: 'HTML file with images' option, and then download 'CC' commented stylesheets for IE/win separately by copying their names from the originals into Opera and save them in the prepared sub-folder. Opera arranges everything as a main file, with a sub-folder for images, CSS, js etc., ready to be accessed by any browser and worked on by any editing software. Thus, at this stage working on any alien file is no different from working on my own files locally. The only thing Opera changes is file-names, as it is applying the old 8bytes + 3bytes naming-convention from DOS when downloading from the web. More about how it works, and why Opera in general does a better and more complete downloading-job than other browsers, is described here... http://www.howtocreate.co.uk/saving.html My own experience says Opera has a success-rate of better than 98% - less than 2% of the downloads are not very usable right away, and this is more than good enough for what I use it for. regards Georg -- http://www.gunlaug.no __ 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/
Re: [css-d] CSS faux columns not working in IE6
On 22 Mar 2008, at 7:30pm, Gunlaug Sørtun wrote:
Ian Piper wrote:
http://www.tellura.co.uk/index.php
As you can see, the image used for the background for the left
sidebar doesn't display in three-column mode and the content column's
white background doesn't fill the space unless the content is longer
than the sidebars. But only for IE6, and only when there is no right
sidebar.
IE6 is confused by the background-position provided for browsers that
support min/max-width.
In the IE6 stylesheet make that...
#leftfauxcol {
background-position: 0 0;
width:100%;
}
#rightfauxcol {
background-position: 100% 0;
width:100%;
}
...and IE6 will cooperate.
Thanks Georg. I tried that and I don't think it has had any effect (at
least from my browser). Odd.
Ian.
--
[EMAIL PROTECTED]
07973 156616 | 01926 811383
__
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/
Re: [css-d] CSS faux columns not working in IE6
From: Ian Piper [EMAIL PROTECTED] http://www.tellura.co.uk/index.php As you can see, the image used for the background for the left sidebar doesn't display in three-column mode and the content column's white background doesn't fill the space unless the content is longer than the sidebars. But only for IE6, and only when there is no right sidebar. Ian, is it possible that the problem is the images for the faux columns? They are .png; do they have 32-bit transparency applied? It looks to me (and I could be all wet) like when the right side is painted, since the image is as wide as the container, then the background of the left side of the page (everything left of the right blue column) gets covered by the image, which shows gray on my machine, and reminds me of .png transparency issues in IE. Have you tried 8-bit transparency, or a .gif for those faux columns instead of the .png? ~holly __ 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/
Re: [css-d] CSS faux columns not working in IE6
Holly Bergevin wrote:
From: Ian Piper [EMAIL PROTECTED]
http://www.tellura.co.uk/index.php
As you can see, the image used for the background for the left
sidebar doesn't display in three-column mode and the content column's
white background doesn't fill the space unless the content is longer
than the sidebars. But only for IE6, and only when there is no right
sidebar.
Ian, is it possible that the problem is the images for the faux columns? They
are .png; do they have 32-bit transparency applied?
It looks to me (and I could be all wet) like when the right side is
painted, since the image is as wide as the container, then the background
of the left side of the page (everything left of the right blue column) gets
covered by the image, which shows gray on my machine, and reminds me of .png
transparency issues in IE.
Have you tried 8-bit transparency, or a .gif for those faux columns instead
of the .png?
~holly
Hi Holly, this is indeed what is happening. The image on the right is covering
the left image. I have put my offline test online now.
http://css-class.com/x/tellura/
The image on the #rightfauxcol div is now transparent gif. The only fix I
applied to IE6 was.
#leftfauxcol, #rightfauxcol {height:1%}
These fixes are buried in the embedded in [if gte IE 6] conditional comments in
the header.
Ian would you have happen to have download IE8 as an overwrite of IE7? If so
those [if lte IE 6] will not be seen by your standalone version of IE6. If not
remember to change the conditional comments from [if gte IE 6] to [if lte IE 6]
or you will targeting IE8 as well. If you want to use conditional comments for
importing style sheets for IE why not use just [if lte IE 7] and separate IE6
from IE7 rules by using * html within the same style sheets.
Alan
http://css-class.com/test/
__
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/
Re: [css-d] CSS faux columns not working in IE6
Alan Gresley wrote: Ian would you have happen to have download IE8 as an overwrite of IE7? If so those [if lte IE 6] will not be seen by your standalone version of IE6. Just a comment here: we keep on running into these standalone and conditional comments problems quite often, which complicates debugging for some. I use complete, original, versions of IE6, IE7 and IE8b1, which means I never run into such problems. I see what a regular visitor will see. The only extra work I have is that I have to download conditionally commented stylesheets separately before I can debug them. Regarding the original case: it already had those 'hasLayout' fixes - in double dose with 'float: left; width: 100%;'. One of those was of course enough. I found changing image-format wasn't enough though, as I immediately changed it to 8bit png (same as gif in this case) and still had background-positioning problems in my real IE6 - which led to the proposed background-position change for IE6. Problem was I forgot to mention the necessary image-format change, to make IE6 see the transparent part as transparent, when I responded, and I never looked back since my own copy worked flawless. regards Georg -- http://www.gunlaug.no __ 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/
Re: [css-d] CSS faux columns not working in IE6
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=topnbsp;/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/
Re: [css-d] CSS faux columns not working in IE6
Gunlaug Sørtun wrote:
Ian Piper wrote:
http://www.tellura.co.uk/index.php
IE6 is confused by the background-position provided for browsers that
support min/max-width.
In the IE6 stylesheet make that...
#leftfauxcol {
background-position: 0 0;
width:100%;
}
#rightfauxcol {
background-position: 100% 0;
width:100%;
}
...and IE6 will cooperate.
regards
Georg
--
http://www.gunlaug.no
Very interesting and indeed it shows my error or is that MS error. My
standalone copy of IE6 would never had read the real IE6 conditional comments
in the first place. This causes no problem to me personally since I getting use
to having IE8 corrupting my registry and thus my IE6 version vectors but I will
continue on my merry path to test the chaos that can result (and until I have
two PCs in running order). It may confused others authors who have have not set
up IE8 on a virtual PC and not know that version vectors are corrupted when
using conditional comments and none of this is indicated on the IE blog [1] for
installing IE8. It's important to be able to test in standalone versions of
IE6, IE7 and IE8 and it seems that MS never considered the impact that IE8
could have with testing earlier versions of IE.
Another thing that I have now realized is that any request for help with IE6 on
this list where conditional comments do appear the code we must now consider if
this person is running IE8 on virtual PC or as an overwrite of IE7. It's like a
warp labyrinth which we must transverse to see the light. :-)
[1] http://blogs.msdn.com/ie/archive/2008/03/13/installing-ie8.aspx
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/
