?
Solved

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

Posted on 2011-05-04
13
Medium Priority
?
276 Views
Last Modified: 2012-08-13
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.
0
Comment
Question by:bradderick
  • 7
  • 6
13 Comments
 

Author Comment

by:bradderick
ID: 35695442
oh an please be sure to check out in both firefox and IE 8 to see exactly what I am referring to.

0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35695577
I am working on it. It is definitely a strange issue.

Also, just so you know, your form is JACKED in Chrome.
0
 

Author Comment

by:bradderick
ID: 35695602
thanks Jonah,

any tips to solve for chrome would be appreciated as well.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 13

Expert Comment

by:jonahzona
ID: 35695604
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
 

Author Comment

by:bradderick
ID: 35695634
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35695751
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35695783
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35699185
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35700716
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
 

Author Comment

by:bradderick
ID: 35702847
Hi Jonah, looks good. Please send it over / upload the solution. Thank you very much for this.
0
 
LVL 13

Accepted Solution

by:
jonahzona earned 2000 total points
ID: 35709414
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
 

Author Comment

by:bradderick
ID: 35718579
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
 

Author Closing Comment

by:bradderick
ID: 35726168
thanks Jonah
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question