z-index problem with css and wordpress themes

  • Resolved Davide_sd

    (@davide_sd)


    10 years, 9 months ago

    Hi everyone,
    i was trying to adapt this code: the 100% post-it note to use it into a wordpress page.
    The problem is i’m not able to see the dropshadow in the bottom-right corner. I guess it’s something related to z-index property.
    If i use the same code into a static html page (not a wordpress page), everything is working fine. I’ve tryed to use Twenty-Eleven theme, and Boot-Store theme, and with both themes i’m not able to show the dropshadow. Strange thing happens when i’ll add a rotation to the .postit css rule: the dropshadow is correctly rendered on firefox, but not in chrome or IE… I guess there is something in the style.css of these themes, but i can’t find what.
    Any help or suggestions, please? Thank you in advance!

    This is the html code i’m using as example:

    <ul>
	<li class="postit">
		<div class="a"> date here</div>
		<div class="b">title here</div>
		<hr class="c" />
		<div class="d">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
	</li>
</ul>

    and this is the css i’ve used:

    .postit {
	padding:20px;
	text-align:center;
	width: 300px;
	margin: 25px;
	min-height:175px;
	position:relative;
	border:1px solid #E8E8E8;
	border-bottom-right-radius: 60px 5px;
	display:inline-table;
	background: rgb(255,255,136); /* Old browsers */
	background: -moz-linear-gradient(135deg, rgba(255,255,136,1) 77%, rgba(255,255,214,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, right bottom, left top, color-stop(77%,rgba(255,255,136,1)), color-stop(100%,rgba(255,255,214,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(135deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(135deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(135deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* IE10+ */
	background: linear-gradient(135deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=0 ); /* IE6-9 fallback on horizontal gradient */
}

.postit:after {
   content: "";
	position:absolute;
	z-index:-1;
	right:-0px; bottom:20px;
	width:200px;
	height: 25px;
	background: rgba(0, 0, 0, 0.2);
	box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40);
	-moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
	-webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
	-o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
	-ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
	transform: matrix(-1, -0.1, 0, 1, 0, 0);
}

.a {
	text-align:center;
	margin:0px 0px 5px;
	font-size:16px;
}
.b {
	text-align:center;
	margin:0px 0px 5px;
	font-weight:bold;
	font-size:18px;
}
.c {
	color:#595959;
	background-color:#595959;
	border:none;
	height:1px;
	margin:0px 0px 5px;
}
.d{
	font-size:15px;
	text-align:justify;
}
Viewing 10 replies - 1 through 10 (of 10 total)

  • Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

    why are you using an <ul> all the examples on the site you listed used a <div>

    maybe you would have better luck putting the class on each of your <div> in your <ul> statement

    Thread Starter Davide_sd

    (@davide_sd)

    because i need an ul element! I’ve tryed on a static html page: it is possible to use the postit class with both ul and div. I’m pretty sure there is some property in the style of the themes preventing to correctly use the z-index property of the postit class…unfortunately i’m not able to find it…

    I copied your code into a custom theme that I’m working on in my local WordPress install. It works correctly for me in both Chrome 35.0.1916.114 and Safari 7.0.3 for Mac. Can you post a link to a website showing the problem?

    I copied it also it worked for the <div> element but not for the <div> that followed the <li>. It turn the <li> into a postit with 3 <div> in it. If you want all the <div> under the <li> to be postit you will have to change the css to this .postit > div{ and .postit > div:after{

    if you want the postit to have the three <div> in it you should move the class to the <ul> or it will not look right.

    if the postit looks really narrow it because it in the <li> element and not in the <ul>

    Thread Starter Davide_sd

    (@davide_sd)

    stephencottontail, here you go a test page.

    you can’t move above the parent element even using z-index. If the parent class aka <ul> is smaller than the shadow the shadow will not be seen.

    If you want to move outside the <ul> element you need to set the
    <ul> element to a position:relative and the
    <li> to position:absolute. This will allow the </li>
    to float above the
    <ul> element.

    you could also try adding padding to the ul or adding a margin on the li elements

    Thread Starter Davide_sd

    (@davide_sd)

    i have detected the problem, but i didn’t find a solution yet.
    the problem seems to be the background-color of the #page. If i’ll disable that property, the shadows is visible. What can i try?

    Thread Starter Davide_sd

    (@davide_sd)

    i’ve solved the problem.
    just add the following properties to #page:

    position:relative;
z-index:0 !important;

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘z-index problem with css and wordpress themes’ is closed to new replies.