White Text on white background - IE vs FF

I cannot tell if the problem I am seeing is a problem with my CSS, the HTML, or a browser issue.

http://www.absolutehobbiesonline.com/catalog/

When viewed in FF, the text 'Welcome to Absolute Hobbies' shows up (above the center images) as black text on white background, as it should.
But when viewed in IE, the text is not seen as it is white on white.:yuck:

What is strange is that my local copy on my laptop does not have this problem. Both IE and FF show the black text. That made me think maybe i missed some files during the upload... but it actually works in FF on both my laptop and the website...

Even stranger yet, on the website the text can be mouse highlighted in IE to make the text appear. Unhighlighting (clicking elsewhere) will then retain the black text color.... unless you roll over the category menu, then it reverts back to white on white.... :shocking:

I've found since my initial tests that the problem is happening on a majority of the my pages in that same general area (center column heading/error) sections:
-Main Page
-Manufacturer
-Login page after bad login - error message (red box with error icon)
-Search Page - error message (red box with error icon)
-Product Page - Product Item Name and sometimes the description

I've checked the basic html and the css, but didn't find anything obvious.

What am I missing?

I'm going to re-upload the entire catalog and see if that fixes the problem...

I hate css.... :P

Hmmm... not sure if anyone out there has looked at this, but I have a few more notes to add to the situation.

• the upload of code did not resolve the issue.

• my laptop is not connected to the internet, therefore the Google Checkout and GoDaddy SSL cert javascripts to not get loaded.

• when viewed from a desktop that has internet connectivity, the scripts do get loaded on the page and it appears that then the problems with the white text occur.

• the rollover's in the categories box appear to 'reset' the problem

So the next step I'm taking is commenting out the scripts for Google and GoDaddy to see if the problem continues... wish me luck hehehe

:cry:

I commented out the Google Checkout and GoDaddy SSL scripts... with only partial success at a fix. The main page was no longer afflicted by the problem, but the other pages were (tested it on the login page).

I even went so far as to comment out the entire BetterCategories box at the same time. With all three of these things commented out the problem was still there for some of my pages.

I'm thinking I have some bad CSS or some bad html somewhere that IE doesn't like..... I just wish I could figure out why the IE on my laptop shows the text fine....

Using http://jigsaw.w3.org/css-validator/ to validate the xml/html and the css I'm not sure if anything there is causing problems... there are a few css problems I will want to cleanup, but nothing stuck out at me as being the cause of this problem...

I tested using the URL: http://www.absolutehobbiesonline.com/catalog/index.php

I decided to take a break on this to cool my mind... and then I came back... :lamo:

I'm now looking to see if this is a bug in the way IE6 displays the page. I found this link, specifically point 3, that may be related (unlikely since it deals with backgoround images):

http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml

I'll post more info if I find it...

Found this:

http://www.evolt.org/article/MSIE6_bug_with_floating_divs_and_spacers/17/23899/

Sounds very similar.... I'm going to try adding

position: relative;

to all my header tags (h1 - h6) and see if it fixes the problem... :wink2:

http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml
Point #6

It appears that adding

position: relative;

fixed the main part of the problem. I had to add that line to several styles in order to make everything work. I'm worried that it will cause problems elsewhere so it's time to crawl the site, page by page... :cool:

These are the styles I had to add... If ANYONE has anything to tell me about this please post... now that I've wrriten an entire blog by myself, I'm feeling kinda lonley, hehehehe

h1, h2, h3, h4, h5, h6 {
position:relative;
margin: 0.1em;
}

P {
position:relative;
}

div.messageStackWarning, div.messageStackError, div.messageStackSuccess, div.messageStackCaution {
position:relative;
}

I'm assuuming the same problem is the reason these are in the CSS file?

   position: relative;  /*do not remove-fixes stupid IEbug*/

I just added it to more things :D

IE's infamous peekaboo bug et al

Haven't actually seen the problem before it was fixed, but agree that the symptoms sound like the IE Peekaboo bug. This site is going to be particularly prone to this bug because of the way you have styled it.

CSS stands for cascading stylesheets with the idea that you set styles at the outer or high level of a site and they cascade down to the inner containers unless you over-ride them. However a quick scoot through your CSS looking just at the backgorund-color style shows that you have applied it to all your main containers, whether they needed it or not. This gives the IE peekaboo bug, which basically takes a background color and mistakenly puts it in the foreground in front of the content that it is supposed to sit behind, many more opportunities to make an appearance.

I would recommend looking all instances where you have set the background color to white. As it's the color of your body background, it wouldn't surprise me if you didn't find that every last one of them (apart from on the body tag) is unnecssary and should be deleted.

kuroi:

Haven't actually seen the problem before it was fixed, but agree that the symptoms sound like the IE Peekaboo bug. This site is going to be particularly prone to this bug because of the way you have styled it.

CSS stands for cascading stylesheets with the idea that you set styles at the outer or high level of a site and they cascade down to the inner containers unless you over-ride them. However a quick scoot through your CSS looking just at the backgorund-color style shows that you have applied it to all your main containers, whether they needed it or not. This gives the IE peekaboo bug, which basically takes a background color and mistakenly puts it in the foreground in front of the content that it is supposed to sit behind, many more opportunities to make an appearance.

I would recommend looking all instances where you have set the background color to white. As it's the color of your body background, it wouldn't surprise me if you didn't find that every last one of them (apart from on the body tag) is unnecssary and should be deleted.

Yes, the whole CSS thing is still giving me problems, although I understand it completely. I've been a web dev (intranet tools) for a major MSO for the last 8 years and have never needed them to this level so it wasn't a problem... I guess it's the 'stuck in the old ways' problem... I still prefer simplicity over 'standards'

dev on the site is continuing :P

I have since modified much of the background colors and reintroduced the bugs on several of the pages. During my research (and do alot of that, heh) I found that adding a simple 'height: .1%' style to the centerbox eliminated the problem on every problem page. I think it had to do with floating divs not being forced into the layout... strange thing is never happened on IE on my laptop (same version as my desktop)... the only thing I could think of is that my laptop is widescreen rez and my desktop is not... I dunno.. Anyway, it appears to be fixed now.

Thanks for your input!

rknepp79:

I guess it's the 'stuck in the old ways' problem... I still prefer simplicity over 'standards'CSS is conceptually more complex, but structurally simpler and lighter than the "old ways". Give yourself some more credit, I suspect that you are much closer than you realise to that point where the conceptual stuff becomes clear and the "new way" just looks so straightforward and elegant that there's no turning back.