Background and foreground mixing - IE 6, 7
On a little site I put together, anything in the p tag blends in the the background in IE. But if you refresh the page, it shows up. If you hightlight the text, it shows up, and when you un-highlight, it holds on to the CSS style. It's driving me nuts, and I have no idea where the problem is. It works in FF, Opera, Safari and Chrome. CSS is valid and so is the HTML.
Here's a giant image of what I'm talking about.
Any ideas?
webwiz posted this at 00:20 — 29th April 2009.
He has: 629 posts
Joined: May 2007
Odd. My Win xp install has IE 8, so I am looking at your page in IE 6 on Win 2000. Apart from the dubious practice of using pixel sizes for fonts, I see no problem at all, no matter how often I open/close IE or refresh the page.
Couple of things to try:
- Add 'hasLayout' to #content: "zoom: 1;" is a good temporary way to do that.
- Add "position: relative;" to #content or to the paragraph. That sometimes makes things show up.
That's just a guess of course.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
teammatt3 posted this at 00:53 — 29th April 2009.
He has: 2,102 posts
Joined: Sep 2003
The position:relative rule worked, but I had to add that rule to a bunch of other elements because they become hidden.
Do you have more info about how/why that fixes the problem? I did not know about that fix. I'd like to figure out a way around that if it's possible.
EDIT: Hey, no poking fun at me for using pixels. I can't do the math for ems, it's too confusing.
YET ANOTHER EDIT: Your zoom:1 does the trick too. What is the "zoom" property for?
webwiz posted this at 14:22 — 29th April 2009.
He has: 629 posts
Joined: May 2007
Dunno why "position: relative;" works-- I don't think anyone can explain the many oddities of IE.
"Zoom" is a Microsoft special property that gives an element "hasLayout"[1] - another Microsoft oddity. Understanding "hasLayout" is pretty much essential if you are ever to get a handle on IE bugs.
Re. your pixel sized fonts - I'm not making fun, I'm serious. It's a common design mistake. The text-size option in IE does not work when you do this. (View > Text size > Larger etc.) Although 16px is likely a good size on _your_ computer, on my high-res IBM laptop 16px is little more than half the default size. So 16px does not work for everyone.
Hope this helps.
[1] On having layout
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
Megan posted this at 16:23 — 29th April 2009.
She has: 11,421 posts
Joined: Jun 1999
There are a bunch of rules that will give an element hasLayout. Zoom is one of them, also height: 1%, position: relative, and a few other things.
You can check whether something hasLayout using the IE developers toolbar. It will show up as hasLayout: -1 if it does "have layout". If it doesn't that property won't appear at all.
This is always something to check if you're having weird IE problems.
Megan
Connect with us on Facebook!
teammatt3 posted this at 15:30 — 29th April 2009.
He has: 2,102 posts
Joined: Sep 2003
Thanks the help webwiz. I'm using the zoom rule on just the #content div, and it fixed everything. I'll add that to my IE bug fixing list.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.