Solved

css shadow

Posted on 2013-06-27
19
364 Views
Last Modified: 2013-06-27
I am using the following style:

 .galleria-lightbox-shadow{background: #ffffff}

This works finr in Firefox, google chrome, Safari web browsers but not in Internet explorer version 7,8,9
Can someone please give me the correct syntax for this css rule to work in this browser
0
Comment
Question by:doctorbill
  • 7
  • 6
  • 3
  • +3
19 Comments
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Try background-color:

 .galleria-lightbox-shadow { background-color: #ffffff; }

Open in new window

0
 

Author Comment

by:doctorbill
Comment Utility
same problem
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
It's basic CSS so your problem must lie somewhere else. Post a link to a page and I'll take a look
0
 
LVL 5

Expert Comment

by:kumaresan2011
Comment Utility
dear Doctorbil

background is correct code only.
please add semicolon at the end
.galleria-lightbox-shadow{background: #ffffff;} and try it

or this this one .galleria-lightbox-shadow{background-color: #ffffff;}

by
kumaresan. V
0
 

Author Comment

by:doctorbill
Comment Utility
still the same issue
0
 
LVL 4

Expert Comment

by:ScorchD
Comment Utility
Have you tried
.galleria-lightbox-shadow{background: #ffffff!important;} 

Open in new window

It is possible that you have code working within one browser and not another which is overwriting the rule, theres not alot to go on but that is my suggestion.

Regards,
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
A semi-colon at the end will make absolutely no difference to your styling. Without seeing your page / code, can't really offer any more advice. I'd just be blindly guessing what's going on.

Here's an example of what you've posted, working. I'll re-iterate - something else must be going on!

http://jsfiddle.net/ChrisStanyon/ZmWZj/
0
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
ChrisStanyon is correct. Your CSS code is syntactically correct. It must be interacting with another element. Please post a link to your page so we can troubleshoot.
0
 

Author Comment

by:doctorbill
Comment Utility
I can attach the page but the problem is that this script is tied up with a Galleria image gallery so the interactions with other java scripts may well be complicating things.
The attached page is acting as an include and the script in question is near the top

What I don't understand is that the script works in chrome and firefox but not in internet explorer (any versions) so it must be being accessed by the Gallery and being used by the Gallery
incGalleria.php
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
The whole point of asking to see your page is so that we can see it 'in context'. The reason it's not working is because of something else in your page, which we can only see if you post a link to your page!!

Posting a snippet won't help. Removing things that might be complicating the issue defeats the purpose - those are exactly the bits we need to see!!!

The code you've posted doesn't even contain an element that has a class of galleria-lightbox-shadow, so again, we're working blind.

If you can't / won't post a link to the page so we can see it 'not working' there's not a lot we can do.

Last time of asking - can we get a link to your page or not?
0
 

Author Comment

by:doctorbill
Comment Utility
Sorry to frustrate you - didn't mean to be difficult.
I have just uploaded the page to the website I am creating at the moment:

http://www.lucybcampbell.com
If you click on the "Artists" link, then a thumbnail, you will be taken to the gallery
Click on the larger image and a large image opens up on the page.
 The image opens with NO black border in Firefox and Chrome but HAS a black border in Internet explorer
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
It looks like it is quirksmode because of the weak doctype.

The HTML validator can't validate it because of a non-utf-8 character here:

<!-- Adding gallery images. We use resized thumbnails here for better performance, but it¿s not necessary -->
Which is line 96, right before the gallery gets rendered.

Get rid of the non-standard character so we can validate it and we may see a solution.

Cd&
0
 
LVL 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 100 total points
Comment Utility
No worries - for future reference, it makes it a lot easier to help you if you show us your problem in context :)

OK. For some reason (that I can't figure out) it seems like IE is loading extra style info into your document - I'm guessing this is down to one of the galleria scripts, but IEs a pain to use for debugging websites.

What I would suggest is something that has already been mentioned by ScorchD - force the specificity of your own style by adding the !important keyword:

.galleria-lightbox-shadow { background-color: #ffffff !important; }

This should override all other mentions of this rule and force a white background.
0
 
LVL 4

Accepted Solution

by:
ScorchD earned 400 total points
Comment Utility
I did say that ages ago, I assumed that was at least tried as there could be online styles being applied which that would rule out.

Regards,
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
@ScorchD - yeah I know - at that point I think we were all guessing so it made sense to at least see the problem 'in situ'.

I always think of the !important keyword as a last-chance-hack than a genuine fix, but in this case it does seem like the easiest way forward ;)
0
 

Author Comment

by:doctorbill
Comment Utility
You have no idea how good this makes me feel:

.galleria-lightbox-shadow { background-color: #ffffff !important; }

It works at last !!!!!

Thanks to all
0
 

Author Closing Comment

by:doctorbill
Comment Utility
Apologies to ScorchD - I just did not see the comment because of all the other comments posted at the same time

ChrisStanyon - I hope you are ok with the points allocation as you also suggested the same solution
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Just pleased you got it working...

but don't go littering your CSS with the !important keyword when things aren't working the way you want :)
0
 
LVL 4

Expert Comment

by:ScorchD
Comment Utility
I don't mind if you split them, at the end of the day we were both thinking along the same lines and often when dealing with plugins you find yourself having to force these things as altering the plugin styles leads to update issues.

I agree with Chris 100% only use !important if it is the only way round it, although it does help isolate the issue.

Kind regards,
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now