Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Opacity style in CSS file not doing the same as inline style 1

Status
Not open for further replies.
trollacious

trollacious

Programmer
Sep 29, 2004
4,046
US
Working with opacity doing a transition, the following works in IE and Firefox:
Code: 
style="opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0;"

If I put the same into a CSS file and run the transition JS script, neither Firefox nor IE (version 6) changes opacity. When I remove alpha(opacity=0); from the inline style and put it in the CSS file, IE stops changing opacity. When I remove -moz-opacity: 0; from the inline style and add it to the CSS file, Firefox doesn't change opacity.

Any ideas what I'm missing here?

Lee
 
Sort by date Sort by votes
Something is overriding your style when it is in the CSS file? Specificity, with inline style being the most specific is the only difference between inline styles and styles defined in a stylesheet that I know of. Plus, I've used opacity in a stylesheet before and it worked in all browsers.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
This sounds like a CSS hierarchy issue.

1. External - within an external style sheet.
2. Internal Within the HTML document <head>.
3. Inline - within an element

That's how CSS is read. Each number higher get more priority.

If your inline style says 1 thing and your external sheet says the same things and you change the external sheet that doesnt change the fact that the inline still says the same thing and that overrides the style sheet.

Your best bet would be to just have 2 different styles for the element and use JS to switch styles. that should work.

Darryn Cooke
| The New Orange County Graphic designer and Marketing and Advertising Consultant
| Marketing and Advertising blog
 
Upvote 0 Downvote
Vragabond, nothing (that I can tell) is overriding the style in the style sheet. Inline, the opacity works fine. When I cut and paste each opacity value (?) from inline to the CSS file one at a time (remove it from inline and paste it into the CSS file), with just opacity: 0 in the CSS file the fade using the JS works fine. If I cut and paste filter: alpha(opacity=0); to the CSS file along with opacity: 0, then the JS fade stops working in IE, but still works in Firefox (latest version). If I additionally cut and paste -moz-opacity: 0; to the CSS file, then the JS fade stops working in Firefox.

I don't have opacity set for any other elements on the page, just for this one <img>.

I have no problem leaving it inline, just wondered what caused the browsers to work fine when the style set up for older browers is inline and not work when in the CSS file.

Lee
 
Upvote 0 Downvote
Then it could be the way JS performs the fade that messing up the display. If you have a link we could check, that might help us. Furthermore, if you would like to get to the bottom of this, I would still suggest you try testing it in a clean page that has no other stylesheet rules.



[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Here are two links. Click on the photo (after all 5 have loaded) to get each fade to process. The JS file is the same for both, only difference is that I cut and pasted the opacity styles from the one that works into the style sheet file.
Doesn't work:

Works:
Thanks.

Lee
 
Upvote 0 Downvote
Indeed it is javascript. You're checking the object's style property, which refers only to the inline style attribute. When you define opacity inline, your script works, because it finds the correct value in the inline style. When you define opacity in the external sheet, your script finds no value and fails.

Check this article under the heading "Reading applied element styles" to learn how to read styles of an element (all the styles, external sheet and inline styles).

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Thanks for the info, and for the time you put into getting the answer for me.

Lee
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
645
PeDa
PeDa
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
696
spamjim
spamjim
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
658
pmonett
pmonett
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
171
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top