Solved

css shadow

Posted on 2013-06-27
19
374 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
  • 3
  • +3
19 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39280803
Try background-color:

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

Open in new window

0
 

Author Comment

by:doctorbill
ID: 39280866
same problem
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39280872
It's basic CSS so your problem must lie somewhere else. Post a link to a page and I'll take a look
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 5

Expert Comment

by:kumaresan2011
ID: 39280873
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
ID: 39281033
still the same issue
0
 
LVL 4

Expert Comment

by:ScorchD
ID: 39281037
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 43

Expert Comment

by:Chris Stanyon
ID: 39281050
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 22

Expert Comment

by:Kim Walker
ID: 39281114
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
ID: 39281267
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39281300
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
ID: 39281559
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
ID: 39281720
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 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 100 total points
ID: 39281726
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
ID: 39281782
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 43

Expert Comment

by:Chris Stanyon
ID: 39281809
@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
ID: 39281852
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
ID: 39281878
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 43

Expert Comment

by:Chris Stanyon
ID: 39281889
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
ID: 39281907
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

724 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