I've run into a small problem that, so far, NO ONE no either of the other 2 CSS forums in which I've posted to has been able to answer. I've exhausted all the resources I know of, and was hoping that someone here might be able to provide a bit of insight into this issue!
<!-- m --><a class="postlink" href="http://tinyurl.com/6xobl">http://tinyurl.com/6xobl</a><!-- m -->
Essentially, the page that I'm building looks fine in Opera, IE 6, Mozilla, and Firefox.
HOWEVER, in IE 5 and 5.5, the background image for my main (text-wrapper) div won't repeat on the y-axis!! The body background color--a light grey--just shows through.
The oddest part is that the background flashes/is visible for a split second before it disappears.
I know there simply must be some way around this. Perhaps a * html hack somewhere. . . ?? Might someone have any ideas at all?Are you talking about main-bg.jpg in #textwrap?
There is no problem with it in IE.The browsers it does not show up correctly in are IE 5.0 and IE 5.5 (PC. . . I'm not sure about Macs at this point)
The div that is holds this background image is the "textwrap" div.No problem on XP IE5 and IE5.5What? Are you comparing the page to how it should look. . . in IE 6 (XP Pro)??
I just posted a screenshot of how it should look and how it's appearing to me in IE 5 and 5.5 here:
<!-- m --><a class="postlink" href="http://tinyurl.com/4wgph">http://tinyurl.com/4wgph</a><!-- m -->
Can you let me know if you're seeing the same things?XP home IE6, 5.5 and 5 all OK here.This is absolutely bizarre. . . Sooo. . . XP Home shows it correctly but XP Pro shows it incorrectly? My confusion is growing. Oh dear!
Can anyone else out there running XP Pro come take a look and see what they see?
(Thanks for looking, Fang. It's so odd that when you view the site in IE 5 and 5.5, it looks correct to you!)Background is fine for me, running IE 5.5 on Win XP Pro...Thanks for checking that, MstrBob.
I'm beginning to wonder why on earth my versions of IE 5 and 5.5 would render these div/div backgrounds so differently than everyone elses!!!!!!!!Try a Ctrl+F5 to clear the cacheNo, it's not a cache issue. I've cleared it several times over the past few weeks, and it looks the same. . .Try adding this CSS hack to the element that has the background:
/*\*/
* html #textwrap { height: 1px; }
/**/
I realize it's a grossly incorrect height for that element, but the nice (and not nice) thing about IE-Win is that it expands elements when the contents get too big. IE-Win will recognize that it requires more than 1 pixel of height to hold all of #textwrap's contents, then recalculates the correct size, and then magically it starts displaying background images correctly.
And I too don't see a problem with IE5-Win. Now are you previewing with those browsers running in their native operating system (like Win9x or Win2k)? That might make a difference, as would your Internet connection speed, or maybe even video drivers.Thanks, toicontien.
Though the hack didn't work, I did learn something. And after having 9 other people view this page and everyone telling me that it looks okay. . . I pretty much now know that it's some quirk on my machine. (XP Pro). Don't know WHAT the quirk is or WHY my particular machine, which is usually great, is acting up, though. . .
toicontien, I do have two questions for you regarding the CSS you listed. First, of the 3 lines of code, are #1 and #3 required, or can you just put in that * hack for IE?
Second, when do you know, exactly, to use this particular hack?The CSS comments are required. Here's how the hack works, then you'll understand why all the lines are needed.
Internet Explorer, both PC and Mac versions, encapsulate Web pages within some unknown element. Nobody knows what the name of this element is, but using the universal selector, *, enables Internet Explorer to apply styles to it, or its children.
So, "* html #textwrap" means: apply these styles to an element with "textwrap" for an ID, only if it's a child of the <html> element, and then only if the <html> element is contained inside any other element.
Again, * html #someID will work for Internet Explorer on PCs and Macs.
Setting the height to 1px will cause IE-Win to recalculate the height of that element when the contents are too tall. This is because IE-Win doesn't support the height CSS property correctly. It treats height and width as min-height and min-width respectively. IE5-Mac DOES support the width and height properties correctly. Setting the height of #textwrap to one pixel will indeed make that element one pixel tall, with it's content flowing beyond the bottom edge. We don't want this.
So, we encapsulate the whole "* html #textwrap" hack inside the IE5-Mac backslash hack.
1. /*\*/
2. * html #textwrap { ... }
3. /**/
Line 1. The backslash before the asterick (*) causes IE5-Mac to ignore that asterick (*). So IE5-Mac sees line 1 as:
/*/
Which is not a complete CSS comment. This will cause IE5-Mac to view all other text, from the backslash on down, as a comment - that is until it reaches the next "*/". That's where line 3 comes in. Line three is a complete comment, and contains the "*/" that IE5-Mac needs to complete its hacked comment starting on line 1.
So, IE5-Mac igores anything between /*\*/ and /**/ - which is what we want in this case, because only IE-Win treats the height property as the min-height property.Have you tried re-installing IE5 and 5.5? If you use a system cleaner program the chances are that essential files have been deleted.
Please do not get into the habit of using hacks, they are unnecessary and can be avoided in the majority of cases. I have never used a hack.If you could build one of my websites and have it show up the same in IE 5, IE 5.5, IE 6, Opera v.whatever, Mozilla, and Firefox without using any hacks, I think I would bow down to you and shower you with riches. With designs requring pixel-perfect placements, etc. . . how in the world does one code an entire site without a hack???
I am absolutely intrigued!!! Send me examples!Originally posted by Fang
I have never used a hack.
Really? Maybe you just haven't had to do complex layouts yet. Then just out of curiosity, try your hand at this layout
: <!-- m --><a class="postlink" href="http://template-tk.ispi.net/?template=L2&skin=skin2">http://template-tk.ispi.net/?template=L2&skin=skin2</a><!-- m -->
When you mix background images and Internet Explorer, I've found hacks to be unavoidable.
EDIT: Oh, and by the way, there are six skins for this layout: skin1 - skin6 - and they all need to use the same HTML file and CSS must be coded for the Directory, Calendar, Classifieds, Dining Guide and newspaper applications.
If you can code the layout hack-free, then you will forever have my admiration
I'm prepared to help with specific problems, but not rewrite the site. 
But can we see examples of your work??? See entire sites built with no hacks??? Would you mind showing us some?Originally posted by Fang
I'm prepared to help with specific problems, but not rewrite the site.
Oh no. There aren't any problems with it. It was a challenge to put your money where your mouth is
A childish challenge, I admit.I know it's not finished yet, but validation, Opera space above #bottomNav, FF bottom of #foo ...
<!-- m --><a class="postlink" href="http://tinyurl.com/6xobl">http://tinyurl.com/6xobl</a><!-- m -->
Essentially, the page that I'm building looks fine in Opera, IE 6, Mozilla, and Firefox.
HOWEVER, in IE 5 and 5.5, the background image for my main (text-wrapper) div won't repeat on the y-axis!! The body background color--a light grey--just shows through.
The oddest part is that the background flashes/is visible for a split second before it disappears.
I know there simply must be some way around this. Perhaps a * html hack somewhere. . . ?? Might someone have any ideas at all?Are you talking about main-bg.jpg in #textwrap?
There is no problem with it in IE.The browsers it does not show up correctly in are IE 5.0 and IE 5.5 (PC. . . I'm not sure about Macs at this point)
The div that is holds this background image is the "textwrap" div.No problem on XP IE5 and IE5.5What? Are you comparing the page to how it should look. . . in IE 6 (XP Pro)??
I just posted a screenshot of how it should look and how it's appearing to me in IE 5 and 5.5 here:
<!-- m --><a class="postlink" href="http://tinyurl.com/4wgph">http://tinyurl.com/4wgph</a><!-- m -->
Can you let me know if you're seeing the same things?XP home IE6, 5.5 and 5 all OK here.This is absolutely bizarre. . . Sooo. . . XP Home shows it correctly but XP Pro shows it incorrectly? My confusion is growing. Oh dear!
Can anyone else out there running XP Pro come take a look and see what they see?
(Thanks for looking, Fang. It's so odd that when you view the site in IE 5 and 5.5, it looks correct to you!)Background is fine for me, running IE 5.5 on Win XP Pro...Thanks for checking that, MstrBob.
I'm beginning to wonder why on earth my versions of IE 5 and 5.5 would render these div/div backgrounds so differently than everyone elses!!!!!!!!Try a Ctrl+F5 to clear the cacheNo, it's not a cache issue. I've cleared it several times over the past few weeks, and it looks the same. . .Try adding this CSS hack to the element that has the background:
/*\*/
* html #textwrap { height: 1px; }
/**/
I realize it's a grossly incorrect height for that element, but the nice (and not nice) thing about IE-Win is that it expands elements when the contents get too big. IE-Win will recognize that it requires more than 1 pixel of height to hold all of #textwrap's contents, then recalculates the correct size, and then magically it starts displaying background images correctly.
And I too don't see a problem with IE5-Win. Now are you previewing with those browsers running in their native operating system (like Win9x or Win2k)? That might make a difference, as would your Internet connection speed, or maybe even video drivers.Thanks, toicontien.
Though the hack didn't work, I did learn something. And after having 9 other people view this page and everyone telling me that it looks okay. . . I pretty much now know that it's some quirk on my machine. (XP Pro). Don't know WHAT the quirk is or WHY my particular machine, which is usually great, is acting up, though. . .
toicontien, I do have two questions for you regarding the CSS you listed. First, of the 3 lines of code, are #1 and #3 required, or can you just put in that * hack for IE?
Second, when do you know, exactly, to use this particular hack?The CSS comments are required. Here's how the hack works, then you'll understand why all the lines are needed.
Internet Explorer, both PC and Mac versions, encapsulate Web pages within some unknown element. Nobody knows what the name of this element is, but using the universal selector, *, enables Internet Explorer to apply styles to it, or its children.
So, "* html #textwrap" means: apply these styles to an element with "textwrap" for an ID, only if it's a child of the <html> element, and then only if the <html> element is contained inside any other element.
Again, * html #someID will work for Internet Explorer on PCs and Macs.
Setting the height to 1px will cause IE-Win to recalculate the height of that element when the contents are too tall. This is because IE-Win doesn't support the height CSS property correctly. It treats height and width as min-height and min-width respectively. IE5-Mac DOES support the width and height properties correctly. Setting the height of #textwrap to one pixel will indeed make that element one pixel tall, with it's content flowing beyond the bottom edge. We don't want this.
So, we encapsulate the whole "* html #textwrap" hack inside the IE5-Mac backslash hack.
1. /*\*/
2. * html #textwrap { ... }
3. /**/
Line 1. The backslash before the asterick (*) causes IE5-Mac to ignore that asterick (*). So IE5-Mac sees line 1 as:
/*/
Which is not a complete CSS comment. This will cause IE5-Mac to view all other text, from the backslash on down, as a comment - that is until it reaches the next "*/". That's where line 3 comes in. Line three is a complete comment, and contains the "*/" that IE5-Mac needs to complete its hacked comment starting on line 1.
So, IE5-Mac igores anything between /*\*/ and /**/ - which is what we want in this case, because only IE-Win treats the height property as the min-height property.Have you tried re-installing IE5 and 5.5? If you use a system cleaner program the chances are that essential files have been deleted.
Please do not get into the habit of using hacks, they are unnecessary and can be avoided in the majority of cases. I have never used a hack.If you could build one of my websites and have it show up the same in IE 5, IE 5.5, IE 6, Opera v.whatever, Mozilla, and Firefox without using any hacks, I think I would bow down to you and shower you with riches. With designs requring pixel-perfect placements, etc. . . how in the world does one code an entire site without a hack???
I am absolutely intrigued!!! Send me examples!Originally posted by Fang
I have never used a hack.
Really? Maybe you just haven't had to do complex layouts yet. Then just out of curiosity, try your hand at this layout
: <!-- m --><a class="postlink" href="http://template-tk.ispi.net/?template=L2&skin=skin2">http://template-tk.ispi.net/?template=L2&skin=skin2</a><!-- m -->When you mix background images and Internet Explorer, I've found hacks to be unavoidable.
EDIT: Oh, and by the way, there are six skins for this layout: skin1 - skin6 - and they all need to use the same HTML file and CSS must be coded for the Directory, Calendar, Classifieds, Dining Guide and newspaper applications.
If you can code the layout hack-free, then you will forever have my admiration
I'm prepared to help with specific problems, but not rewrite the site. But can we see examples of your work??? See entire sites built with no hacks??? Would you mind showing us some?Originally posted by Fang I'm prepared to help with specific problems, but not rewrite the site.
Oh no. There aren't any problems with it. It was a challenge to put your money where your mouth is
A childish challenge, I admit.I know it's not finished yet, but validation, Opera space above #bottomNav, FF bottom of #foo ...