White Text on white background - IE vs FF

[rknepp79]

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.

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....


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?

[rknepp79]

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

I hate css....

[rknepp79]

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

[rknepp79]

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....

[rknepp79]

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

[rknepp79]

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


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-fr...explorer.shtml

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

[rknepp79]

Found this:

http://www.evolt.org/article/MSIE6_b...cers/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...

[rknepp79]

http://www.webcredible.co.uk/user-fr...s-tricks.shtml
Point #6

[rknepp79]

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...


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;
}

[rknepp79]

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