dbestcomputers
asked on
<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.
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.
Also, use a strict doctype
ASKER
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"?
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/
P.S. Are you aware that your page contains XHTML errors?
http://validator.w3.org/
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">
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">
ASKER
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...
ASKER
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.
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.
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
"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
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.
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.
ASKER
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#ff
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
First, fix the errors http://validator.w3.org/check?uri=http%3A%2F%2Ftest.stscho.org%2F&charset=(detect+automatically)&doctype=Inline&group=0