CSS problem text not displaying in IE8, but works fine in firefox 3.6

Hi There,

I have recently integrated an online form on a website and it works perfectly in Firefox 3.6.

However on IE 8 I can't view two of the text headings on the green background

the problem divs are <div class="information-heading">Personal Information</div>. I have even tried putting images in there and they don't display either.

You can see the form here.

http://www.insurancecompared.com.au/test_form.cfm

I haven't pasted in the css file as it is a bit too big.

Can someone please help me figure out why it isn't loading?

Assume that I have a beginner knowledge level.
bradderickAsked:
Who is Participating?
 
jonahzonaCommented:
Aliright, here is what I did.

First, I deleted the height attribute of 1% on the .c div. Give it NO height.

Second, I removed the background image from .c

Third, I removed the background image from .b

Lastly, the column header I gave a new background image (see attached) and a padding-bottom: 25px;

The only difference here between FF and IE was a little difference in area beneath the form, which could probably be fixed.

Let me know how this works out for you.

 ee1.png

Here are the screenshots with changes for both IE and FF.

 Ie Screenshot FF Screenshot
0
 
bradderickAuthor Commented:
oh an please be sure to check out in both firefox and IE 8 to see exactly what I am referring to.

0
 
jonahzonaCommented:
I am working on it. It is definitely a strange issue.

Also, just so you know, your form is JACKED in Chrome.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
bradderickAuthor Commented:
thanks Jonah,

any tips to solve for chrome would be appreciated as well.
0
 
jonahzonaCommented:
No problem. This has to be one of the strangest things I have seen yet as far as IE incompatibility goes. Still working on it....
0
 
bradderickAuthor Commented:
could a possibility be that there is a name confllict on some of the styles as what happened was that I had this form done independently of the website (different coder) and it works perfectly independently, however when it is added to the site, it had all sorts of problems.

The IE 8 text not displaying was the final issue that I am having trouble with

and now chrome compatibility lol :)

Thanks Jonah
0
 
jonahzonaCommented:
Found the problem.

It is the way that the .b and .c classes are positioned. These two divs are nested a couple levels above the text that won't appear. If you delete these two divs, there appears the text.

Trying now to see if I can adjust the CSS to leave them in place and display your text.
0
 
jonahzonaCommented:
The way that thing is pieced together is really weird. The digger I deep into the code, the worse I feel for the guy that had to put that together. Its a flipping jigsaw puzzle.

I wasn't able to get it going, in part because the IE developer tools are a pain to use. I will give her another go tomorrow if you still haven't gotten it yet.

But, it is DEFINITELY the .b and .c divs just above the area in question that are causing the issue.

Good. Night.
0
 
jonahzonaCommented:
Narrowed it down to the .c class.

If you disable the CSS for this one class, the words appear. Working on how to make it work while keeping the styling in place.
0
 
jonahzonaCommented:
Here is the closest I have gotten so far.

The only thing giving me issues is the gender selector.

Let me know if you want me to send you what I have done.

 Screenshot
0
 
bradderickAuthor Commented:
Hi Jonah, looks good. Please send it over / upload the solution. Thank you very much for this.
0
 
bradderickAuthor Commented:
Hi Jonah,

Thank you so much.

I apologise as I have been out the last few days and will review this in detail tomorrow.

Best Regards,

Brad
0
 
bradderickAuthor Commented:
thanks Jonah
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.