Solved

Parent div and child div drop shadow inset issue

Posted on 2013-10-22
14
552 Views
Last Modified: 2013-10-24
Hello Experts,

I am working within the joomla CMS. I've downloaded the module Tabs GK5. I have created a custom css file for this module, without any issues.

The issue I am having is on the parent div gkTabsGK5 (that all the tabs are contained in) i've created a box-shadow:inset ---. And each tab (a listed item) is assigned a background color.

The issue is the parent box shadow is overridden by the background color of the tabs - in essence the child is overriding the parent. Z-index is really not an option (I don't think) only because the child inherits the z-index of its parent. I could apply a negative z-index to the child and though this gives me the desired effect, it now makes the tabs un-clickable.

Is there a solution for this - without having to use images?

Going to begin working on another section of this project until a solution is found.

Thanks

Code is below:

*** CSS ***
.gkTabsGK5 {
	width:435px;
	overflow:hidden;
	border-radius:10px;
	box-shadow:inset 0 0 10px #373737;
	color:#ffffff;
	margin:25px 0 0 10px;
	float:left;
}

.gkTabsWrap.vertical {
	
}
.gkTabsWrap.vertical ol,
.gkTabsWrap.horizontal > ol {

}
.gkTabsWrap.vertical ol li,
.gkTabsWrap.horizontal ol li {

}
.gkTabsWrap.vertical ol li.active,
.gkTabsWrap.horizontal ol li.active {

}

Open in new window


***HTML***
<div id="gk-tabs-114" class="gkTabsGK5">
<div class="gkTabsWrap vertical">
<li id="blue" class="gkTabs-1 active" data-animation="opacity">
<li id="orange" class="gkTabs-2" data-animation="opacity"> test 2 </li>
<li id="light-green" class="gkTabs-3" data-animation="default"> test 3 </li>
...

Open in new window

0
Comment
Question by:Morgan
  • 6
  • 5
  • 3
14 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39592376
Please provide a link to your page.  As you can see, when I test this out by putting it jsbin, I just see errors.   http://jsbin.com/eBoRAcA/1/edit?html,css,output

This is a good article on how to recreate a sample for us http://css-tricks.com/reduced-test-cases/
0
 
LVL 1

Author Comment

by:Morgan
ID: 39592483
I've made the site available for review: http://testingtesting1.info/joomla-test/

I've striped the code down already. The issue is indeed a css one, and I know it has to do with both the parent and child relationship.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39592529
Ok, this is what I see

/* ==================  Edit Tabs  ================= */
                   /* tabs homepage */
.gkTabsGK5 {
	width:435px;
	overflow:hidden;
	border-radius:10px;
	color:#ffffff;
	background-color:#ffffff;
	margin:25px 0 0 10px;
	float:left;
	position:relative;
}

Open in new window


No boxshadow.  In chrome console, when I added the line you originally have it worked.

box-shadow:inset 0 0 10px #373737;

Open in new window

0
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39592539
This is what I get after I added, box-shadow:inset 0 0 10px #373737; on my own.

screen
0
 
LVL 1

Author Comment

by:Morgan
ID: 39592585
Yep. I've done that. But look at the tabs, they are not behind the shadow.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39592623
Add the box shadow to the div below it

screen2
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39592638
Scratch that,  I added it to the class .gkTabsWrap.vertical ol li,
0
 
LVL 1

Author Comment

by:Morgan
ID: 39592667
yeah I tried that to, however it than applies the shadow effect around each tab plus the parent div. I've attached a screen shot of the effect I am wanting. i am wanting the shadow effect to be only on the parent item, with all content behind it. I don't think it can be done.

screen capture
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 500 total points
ID: 39592695
The stacking order is always going to put the child on top of parent and the inset cannot go anywhere  except under the child.  The inset shadow is intended to extend above the background but not the content; and the child is content. maybe a transparent background on the child does it.

There is a possibility that you might get it to work by making the relationship sibling and then use absolute positioning or a float and margin positioning, but it may be unstable across resolutions.  However any approach you take is going to be somewhat of a hack and have maintenance issues.  

When you try to do something that is specifically counter to the standards specification, you are begging for failure.

Cd&
0
 
LVL 1

Author Comment

by:Morgan
ID: 39592708
A possible work around is using gradients. I could apply a top gradient to the ol and than apply a left and right gradient to the first and last element using a pusdeo class. But I don't know if i can apply multiple gradients to one div element. I would need to apply multiple gradients to the white box area where the content appears (left, right, and bottom).

Do you know if you can apply gradients from multiple sides to just one element?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39592712
You might also consider an image border though support for it is thin and hacky. The other possibility is an image background to get the effect but that will have cross-resolution issues unless you go to a rigid "piece of glass" layout.

Cd&
0
 
LVL 1

Author Comment

by:Morgan
ID: 39592793
Hello COBO,

I find it funny - I was just thinking of sending a request to you. I didn't see you reply before I posted earlier.

To your first comment: I was I was guessing the parent and child relationship  was the issue.

To your second comment: what do you mean "piece of glass"?

I would like to stay away from images, 1) for reasons you stated above, and 2) scale ability.

Would the gradient idea work you think?

Thanks,

Morgan
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39592868
"piece of glass" refers to very rigid non-responsive design where the layout either does not adjust to changes in screen size/resolution; or has to use heavy scripting to adjust the dimensions and positioning; which will almost always fail for some cases.

Multiple gradients are possible as are gradients and inset shadows combined, though you might be able to work it out with multiple stops. As it happens I have an article on using gradients that might help you; or at least give you some additional ideas.

Cd&
0
 
LVL 1

Author Closing Comment

by:Morgan
ID: 39598951
Though the design committee has changed the direction they want to go, Both your answers where adequate in addressing my concerns. I believe the gradient would have worked as a "work" around.

thanks,
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

803 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