[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

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

Posted on 2008-11-06
11
Medium Priority
?
923 Views
Last Modified: 2013-12-07
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.
0
Comment
Question by:dbestcomputers
  • 4
  • 4
  • 3
11 Comments
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 22899170
0
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 22899173
Also, use a strict doctype
0
 

Author Comment

by:dbestcomputers
ID: 22899250
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
LVL 43

Expert Comment

by:David S.
ID: 22899550
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
 
LVL 43

Expert Comment

by:David S.
ID: 22899576
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
 

Author Comment

by:dbestcomputers
ID: 22899972
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
 

Author Comment

by:dbestcomputers
ID: 22905172
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
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 22907544
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
 
LVL 43

Expert Comment

by:David S.
ID: 22907588
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
 

Author Comment

by:dbestcomputers
ID: 22921847
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
 
LVL 30

Accepted Solution

by:
Mark Steggles earned 1500 total points
ID: 22925343
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

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Suggested Courses

591 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