Develop Reference

How to hide border flickity in Chrome

anyone please help, how to hide border flickity slider in chrome. The border just show in Browser Chrome only. may be like this :
or u can visit my blog : aqiqoh-syafaat.blogspot.co.id
thanks

To remove the outline from just flickity elements you can add the following css
.flickity-enabled:focus {
outline: none;
}
As others have said removing this globally is bad for accessibility. If you use the dots or nav features for flickity you would ideally add focus to these elements.

Can you please tell exactly where how you can see that border.
Generally this border appears as outline on focus(if), you can set
*:focus{
outline:none;
}
This will remove that blue border from everywhere.
or simply outline:none; on element or its pseudo class
(Use !important if needed.)

Expand hover area while keeping background color

I have a div that I want to expand the "hover area" of. (If your mouse is just outside of the element, the css :hover selector should still be in effect.)
I tried creating a transparent border: (border:10px solid transparent;) Unfortunately, my div has a background color, and the background "leaked" into the border area. (See fiddle for demonstration of the issue.)
I also tried using outline instead of border, but the outline doesn't seem to "count" as a part of the element when it comes to hovering. (It looks right, but won't detect the extra hover area.)
Is there any way to do this with plain CSS (preferably not many extra elements)? If not, is there a simple method using vanilla JS (no jQuery)?
$("#toggle").click(function(){
$("#attempt").toggleClass("border");
});
#attempt {
width:100px;
height:200px;
background:#aaa;
margin:50px;
}
#attempt.border {
margin:20px; /* Change margin to keep box in same place after border adds size */
border:30px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="attempt"></div>
<button id="toggle">Toggle Border</button>
<p>Border (in the ideal case) would not change the element's background. However, adding the 30px border (even when transparent), will cause the background to change size.</p>

All you need to prevent the background to leak is the box-sizing property. It's a very important one. Just add it to #attempt:
#attempt {
box-sizing: border-box;
}
Check out the updated fiddle here. You can learn more about box-sizing here.

Transparency in CSS - fighting with inheritance

I have an ul with a background-color of rgba(15,15,15,0.8). I want a li element of the list to be more transparent, e.g. I want it to have background-color set to rgba(15,15,15,0.5). The problem is that being the inner li element transparent, I see the background color of its ul parentso what I get is actually an even darker background
Is there a way in CSS (but for that matter it would be fine through JS/jQuery too) to "cancel" the background property of the parent?
Edit
Note that also colouring the "rest" of the list (the part of the list not made by lis) would be fine, even if I don't think it's easy nor a good solution.

You could do it by not setting a background on the ul and setting RGBa borders on the li.
demo
Relevant CSS:
border: solid .5em rgba(15,15,15,.8);
background: rgba(15,15,15,.5);
(you can adjust the width values of the borders to suit your needs)

if you're just trying to lighten the colour (as opposed to letting underlying images or text show through), you might consider using background-color: rgba(256,256,256,0.3) which would put a light haze of white over your child element.
view here: http://jsfiddle.net/9VBnr/
You might also check out this oldie but goodie from Eric Meyer: http://meyerweb.com/eric/css/edge/complexspiral/demo.html

Sorry, but that would be like expecting a clearer view by putting a shaded piece of glass on top of another piece of shaded glass. It would just not work. :)
What you need to do is to reverse the way you think. Make the topmost layer have the right look and then move to the one beneath it.
Style the li elements with a none transparent background. Use a sprite to get the look you want if you need something else but pure color. Then move on to the ul element and give that the look you want - even using opacity.

Is there a way to have a div tag without having a line break, or is there an alternative?

In my website, in asp.net 4 / vb, I have a situation where I need to include a class, "noprint", in my footer, as defined in print.css. But I already have a span class, so I wrapped div tags around it. And my tr's and td's all have classes in them already.
Basically, I have this in my footer:
Knowledge Base | Contact USS | Copyright © USS Vision Inc. 2012 | 888-888-8888
And the only thing I want printed out is the phone number.
I use
<div class="noprint">whatever I want omitted when printing</div>
And that works fine. But when viewing the webpage, I don't want the 888-888-8888 to appear below everything else, so I can't use div tags, I suppose. The noprint works great, but is there any way I can use the noprint in my footer without putting the phone number below the rest of the footer due to the div tags? Thanks for any help anybody can offer!
Update: My print.css stylesheet looks like this:
#media screen
{
/* whatever styles you have for display */
}
#media print
{
.noprint { display: none; }
}
So I don't know how to make the div tags display: inline, but I will search around and try to figure it out!

gd1 is absolutely right about span/div and display inline/block, but on a side note I'd add that what you're trying to achieve is often done with a list (as it really is a list of links in your footer)
<ul class="footer">
<li class="no-print">KnowledgeBase</li>
...
<li>888-888-888</li>
<ul>
with a css like
.footer li {
list-style-type: none;
display: inline;
padding: 0 10px;
border-right: 1px solid black;
}
.footer li:last-child {
border-right: none;
}​
hope that helps

Use <span>.
However you can make a div "inline" using the style display: inline, but in this case you just need a <span>.

use css
<div style="display:inline" class="noprint">whatever I want omitted when printing </div>
If not use the inline counterpart span, as a answer already said. But remember inline display donot have block properties like height, top-margin, bottom-margin.

If you still want to use an extra div, I recommend using display:inline, but if you just want the whole footer to have both classes you can do that as well.
You can add multiple classes like this:
<span class='footer lower noprint'></span>
In CSS this would look like:
.footer.lower.noprint{ display:none; }
Alternatively, the 'noprint' class will also work without specifying all three classes.
Here's an example: http://jsfiddle.net/yKRyp/

well set the specific width and height of the div using CSS and apply float
<div style='float:left; border:1px solid blue; width:100px; height:100px'>
div 1
</div>
<div style='float:left; border:1px solid red; width:100px; height:100px'>
div 2
</div><div style='float:left; border:1px solid orange; width:100px; height:100px'>
div 3
</div>
a live example here
http://jsfiddle.net/AGWGs/

div is a block-type element, it is usually used as to group and contain block-type elements.
Using CSS, you can change the display type of any element, however.
In a quick example:
display:inline Makes an element to show inline, they can be put side by side. span element is an inline element. This cannot use block-type-only css rules such as: margin, padding, width, height ...
display:block Makes an element to be displayed as a block. Unless inherited values or given CSS rules, they will take a line long, blocked. They can take block-type CSS rules. And they can be stacked side-by-side using float. However, unless the line is cleared(clear: left, clear:right or clear:both), following elements after the floated element will overflow the previous container.
display:inline-block Makes an element have block features, with inline displaying. This is pretty similiar to using float and making block-type elements shown in-line. However this rule is IE8+ support only, so I would encourage you to use floating to keep the maximum compatibility.
P.S: There are hacks that can be used to have display:inline-block feature used on IE5.5+.

What causes this mouse behavior?

What causes this to happen? (the mouse is not being moved or clicked)

I suspect that the :hover CSS style results in the object having a different size (possibly margin), which causes the :hover CSS style to cease to be applied. This returns the object to its original dimensions, and the :hover CSS style is applied by the browser once more.
The browser can only keep up with this at a certain rate and you see visible flickering.

It's an edge condition.

It is because you are adding a border on hover.
But because you hover near the top, when the border is added, your cursor goes outside of the element.
Would be best to add
border: 1px solid #FFFFFF;
border-bottom: 0px;
to begin with, in your CSS

At a guess, the rollover event is adding a border which changes the effective size of the element, so that the mouse is no longer over it, or something like that...