<div> tag opacity issue, IE vs Firefox...

I have been designing our website, and I finally got it to look exactly how I wanted, only to open it in IE and find out that the beautiful layout is ruined when displayed through the more 'common' browser.  Please check out the page and let me know if you have any advice.

I used divs to make different sections and a sidebar on the site, I then tried to use the color: rgba(#,#,#,opacity) to specify the opacity of the div.  I also used the position:static and position:relative tags to arrange the site like I wanted it.  It looks great in firefox, but when I switch to IE, none of the divs are opaque, the position of the divs are messed up, etc.

How can I fix it and how can I prevent it from happening again?

http://test.stscho.org/

I just added it to DNS about 1 minute ago, it may take a little bit to show up.
dbestcomputersAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mark StegglesWeb DeveloperCommented:
0
Mark StegglesWeb DeveloperCommented:
Also, use a strict doctype
0
dbestcomputersAuthor Commented:
Well, I'll go in and look more in depth in the morning, but 90% of those errors seem to come out of 100% Dreamweaver inserted code for a slideshow (that is fully functional on that site and others) and the 100% Google outputted Calendar, the code on both of which I don't feel like I should be editing because they both apply to specific objects, and have nothing to do with the divs. However, for troubleshooting purposes, I may can take both out and make sure the validator thing is clean.  What is a "strict doctype"?
0
The Ultimate Tool Kit for Technolgy Solution Provi

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 for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

David S.Commented:
rgba is a CSS3-Color feature. IE supports very few CSS3 features.

P.S. Are you aware that your page contains XHTML errors?
http://validator.w3.org/


0
David S.Commented:
It seems I forgot to refresh the page to check for replies before replying, so my second point is redundant. Oh well.

Steggs means that you should change

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
0
dbestcomputersAuthor Commented:
Thank you both.  I cannot check the issue until the morning, but I will try these solutions.  It makes sense that rgba is a CSS3 implementation and therefore won't work in IE.  IE seems to be a little behind on CSS technology...
0
dbestcomputersAuthor Commented:
OK, so now I have basically removed all the stuff from my site to make it compliant.  Hear me out.  I had to remove my slideshow because the "validator" said there were so many issues with it.  Even though it works fine in IE and in Firefox, I don't know why I had to remove it or what it had to do with my issue.  I removed the marquee because the validator said none of it's parameters were correct, and then it said marquee is not even a valid tag.  I then had to remove the calendar because it said that iframe is not a valid tag, plus all kinds of other errors, even though google generated that code for me to paste directly into my site without editing.  Finally, I had to take out all <center> tags and all style=align=" statements.  That doesn't make any sense.  I guess a valid document has no alignment or centering?  Anyway, I also changed the doctype to strict, which only seemed to cause more errors.  

After doing all this I'm not any closer to having my original issue fixed, I just butchered up my page, which I will have to reinsert all my code into.  My problem is with a) The transparency of div tags on my site are not showing correctly.  b) when I use absolute positioning, the divs are all off track in IE.
0
Mark StegglesWeb DeveloperCommented:
Hello dbestcomputers,

"I removed the marquee because the validator said none of it's parameters were correct, and then it said marquee is not even a valid tag."

Its good that you removed the marquee tag as it is deprecated.. there are other ways to do it like http://www.talkincode.com/javascript-scrolling-box-marquee-replacement-52.html


"Finally, I had to take out all <center> tags and all style=align=" statements.  That doesn't make any sense.  I guess a valid document has no alignment or centering?"

Yes, the valid way to center block elements like div's is margin:0px auto;


"Anyway, I also changed the doctype to strict, which only seemed to cause more errors.  "

It may have revealed more errors but its worth it when you have a valid strict document... it makes the browsers render your page more in line with the standards set by the w3 working group. Some differences between browsers are simply due to a transitional doctype



-----

I've just checked your page http://test.stscho.org/ in IE6/Ie7/FF3 and it looks pretty much the same in thsoe browsers. Are you still having problems?

If you want semi-transparent backgrounds (opacity) for some of the divs... I advise using semi-transparent png images rather than css opacity. Unfortunately, semi-transparent png's are not supported in IE6... so you will have to tell ie6 to use a different background image or use a background color for IE6. You can do this by using conditional comments to supply different rules to different versions of internet explorer.. see http://www.quirksmode.org/css/condcom.html

Hope this helps
Thanks

0
David S.Commented:
HTML is not a presentational language; CSS is. The <center> elements and align attributes are deprecated because CSS should be used instead. It's called the separation of content and presentation and it is beneficial in the end.

Using an <iframe> for something useful like Google Calendar is about the only good reason to use a Transitional doctype. It's still good to otherwise conform to the Strict rules though.
0
dbestcomputersAuthor Commented:
Well, Kravimir and Steggs your information is good.  And yes, they should both look correct now.  I didn't get a response back as to how to make the divs look correct in any decent amount of time.  I ended up fixing it myself, the issue was that my style="background-color#ffffe0; visibility="visible" didn't have the # sign in front of the color, so IE wasn't coloring it, it was making it clear.  That's what the issue was the whole time.  Also, changing the z-indexes and the margin and positioning settings eventually got it to look correct in IE.  Thanks for trying to help, and thanks for the extra info on what I should be doing with my tags.
0
Mark StegglesWeb DeveloperCommented:
Hello,

We try our best. Im sorry we didnt spot the missing #. Another tool is the css validator http://jigsaw.w3.org/css-validator/... forgot to mention that... it would have picked up the error.

Glad that you got the problem fixed
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.