I have the following HTML code snippet running on Chrome Canary build
<div id="debug" class="debug" >TEST</div>
Also, I have the following CSS code snippet
-webkit-box-reflect: below 0px
-webkit-gradient(linear, left top, left bottom,
from(transparent), to(rgba(255, 255, 255, 0.5)));
It works as expected. It shows the reflection of the word TEST.
But the reflection does not work when I have add the position:absolute as the following:
position: absolute;
-webkit-box-reflect: below 0px
-webkit-gradient(linear, left top, left bottom,
from(transparent), to(rgba(255, 255, 255, 0.5)));
What do I need to make it the -webkit-box-reflect work with position:absolute?
Thanks in advance for your help.
Make a div around the div/tag you're using for "test".And make that one absolute.
Related
So I'm designing the website for my dad's company and I'm trying to get rid of the whitespace above the header on the page. I tried making the margins 0 and paddings 0 but nothing is changing. Here is my code and a link to the website:
header {
font-size: 20px;
position: relative;
background-color: #DDDDDD;
height: 150px;
}
The problem is the the w3-sidebar-class you are using inside the page. It sets the top margin to a negative value. In order to analys these kind of problems, I suggest you start from a black html page and add new elements to it step by step. Then you can see which changes have which effect.
I am trying to position the control nav in flexslider 2 (the dots for each slide). Default is text-align:center. If you change to the left it positions to the left no problem. If you change to right then while it positions to the right it also shows text numbers of each slide over each dot.
How can I position this to the right WITHOUT the text numbers showing up? Furthermore, why are they showing up when aligned to the right?
You can see this happen out of the box in its default state by just changing the value to the below.
/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: 0px; text-align: right;}
I thought that changing the -9999px to a positive had worked for me, until I realized that it just pushed the text way off the screen. But you could still scroll to it. My fix, leave the text-indent at -9999px; and add
color: rgba(0, 0, 0, 0); .
The last 0 in this controls the alpha, and with it at 0, that makes the numbers completely invisible.
removing width allows positioning without the number issue
I had problems with this, removing the width doesn't work. Here is a solution that does work:
.flex-control-nav {
text-align: right;
}
.flex-control-paging li a {
text-indent: 9999px;
}
When aligning the control nav to the right, you need to change the text indent from negative -9999px to a positive 9999px.
Use this code to adjust the positioning without the numbers.
/* Control Nav */
.flex-control-nav {position: absolute; bottom: 25px; right: 20px;}
I'm building a Magento shop for a client, I uploaded some test images for the products but they seem to have a black background whenever I mouse over using chrome. Does anyone understand why? I don't see any problems with css so it has to be the images themselves.
URL: (I'm talking about those images below 'New products' and 'featured')
http://bit.ly/zuRH2O
I made those using photoshop and the png-24 save-for-web option (http://bit.ly/zGXTAo). Been doing that for years and this is actually the first time happening.
The problem is in your css. Look at the background image:
a.product-image {
margin-bottom: 10px;
width: 182px;
height: 239px;
border: 1px solid #2F3238;
background: url("/images/thumb_bg.png") 50% top no-repeat;
display: block;
border-image: initial;
If you right click on the images, and view in new tab you will see that they are transparent. Your background is dark, so the image picks that up.
On this page I"ve been working on forever, I have this column headed "Bid x Ask": http://www.sellmycalls.com/so-bg-pos.png
in each of whose cell backgrounds there is supposed to be a bar chart that conveys the ratio of the numbers in the cell to each other.
So in each cell I have a background-color: gray; and a background-image:all-white;. I can't properly position the (plenty big enough) image on the gray background. In fact, in its current incarnation, the image doesn't show up at all.
How can I properly set the background-position of the image? The top <td> in the column is styled this way:
<td class="main_td bxa bxa_val"
style="background-color: #ecf1ef;
background-image:url('http://www.sellmycalls.com/pics/cell/bxa-white.png');
background-repeat:repeat-x repeat-y;
background-origin: 0px 0px;
background-attachment:fixed;
background-position:53px 0px;
-moz-background-position:53px 0px;
-webkit-background-position:53px 0px;
-khtml-background-position:53px 0px;
-o-user-background-position:53px 0px;">
<div> 543 x 470</div></td>
Thanks so much for your help!
Your image is 49x1px which I think is showing, however, with Firebug your TD shows a style of background-repeat:repeat-x; X not Y as you show in your example code snippet above.
UPDATE:
Try
style="background-color:#ecf1ef;
background-image:url('http://www.sellmycalls.com/pics/cell/bxa-white.png');
background-position:50px 0px;
background-repeat:repeat-y;"
you cannot adjust the dimensions of the image so (1) always make the image at least as wide as the TD itself (i.e. wider than 49px) and always use the background-image as the right hand side bar and the background-color for the left side bar. I hope this is all clear
It seems your image's path is incorrect. However the div child of each cell has a background-color rule, so this color cover any background of <td>
Dear folks.
Imagine a sprite image called icons.png assigned to css class .icons with various 10x10px graphs. Now you want another class which scales up the sprite graphics exactly twice 200% (making them 20x20 pixels on the screen)
How do I achieve this enlargement purely in CSS?
Much appreciated!
.icons, .iconsbig{ /* WORKS FINE */
background-image:url(http://site.org/icons.png);
background-repeat:no-repeat;
vertical-align: middle;
display: block;
height:10px;
}
.iconsbig{ /* make this one twice as big as the original sprite */
background-repeat:no-repeat;
height:20px;
background-size: 20px auto;
image-rendering:-moz-crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
update:
problems with the above code:
It works in IE9, but not in FireFox, by most used browser doesnt know how to resize????
in IE9, the enlargement is smudgy and not neithrest neighbour pixel perfect at all??
It is supported in pretty much everything except for < IE9...
.iconsbig {
-moz-background-size: 20px;
background-size: 20px;
image-rendering:-moz-crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
W3C spec.
Update
Looks like Firefox wants its vendor prefix (-moz) on the property.
You can use the css3 background-size property:
.iconsbig {
background-image:url(http://site.org/icons.png);
background-size: 20px 20px;
}