[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 378
  • Last Modified:

css shadow

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
doctorbill
Asked:
doctorbill
  • 7
  • 6
  • 3
  • +3
2 Solutions
 
Chris StanyonCommented:
Try background-color:

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

Open in new window

0
 
doctorbillAuthor Commented:
same problem
0
 
Chris StanyonCommented:
It's basic CSS so your problem must lie somewhere else. Post a link to a page and I'll take a look
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.

 
kumaresan2011Commented:
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
 
doctorbillAuthor Commented:
still the same issue
0
 
ScorchDCommented:
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
 
Chris StanyonCommented:
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
 
Kim WalkerWeb Programmer/TechnicianCommented:
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
 
doctorbillAuthor Commented:
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
 
Chris StanyonCommented:
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
 
doctorbillAuthor Commented:
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
 
COBOLdinosaurCommented:
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
 
Chris StanyonCommented:
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
 
ScorchDCommented:
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
 
Chris StanyonCommented:
@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
 
doctorbillAuthor Commented:
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
 
doctorbillAuthor Commented:
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
 
Chris StanyonCommented:
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
 
ScorchDCommented:
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

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.

  • 7
  • 6
  • 3
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now