We Keep Coding

owl-carousel box-shadow adds white border

I'm using ouwl carousel for the home page carousel.
here you have the example
The problem is the white border created on the bottom and the right parts.
I've read that applying: display:block; line-height:0;
but nothing worked
here you have a fiddle (it works fine sometimes, no border (i don't know why)) with only the carousel, for testing if you want.
Move the window size of the result for better experience with the carousel images.
I'm aplying the shadow to the div converted to carousel:
#carousel{
position: relative;
width: 100%;
box-sizing:border-box;
background-size: 100%;
height: auto;
display: block;
text-align: center;
margin-top: 5px;
line-height: 0;
-webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,.4);
-moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,.4);
box-shadow: 4px 4px 2px 0px rgba(0,0,0,.4);
}

You can try to give the .owl-wrapper-outer the box-shadow (only works if your images are the same size).
If your images are smaller, then give the images a box-shadow and .owl-item a padding, if the box-shadow is cut off.

I want to add a border to my button on hover event without moving the button or anything [duplicate]

This question already has answers here:
Add a CSS border on hover without moving the element [duplicate]
(4 answers)
Closed 7 years ago.
right now I want to implement a border on hover on a button.
That button is in a div together with 3 other buttons. However, as soon as I hover over it, the border is being displayed, but at the same time the button expands the size of the added border as well, which is not what I have in my mind.
I made a fiddle to demonstrate the problem: Click me
I read up about this topic here, and I indeed found a solution, by adding margin-top: 3px;
to the hover classes, however, that "squeezes" the button, which is not what I want.
Instead, I want the button to not look compressed or anything, but rather simply with a 4px border overlaying the top 4 px of the button.
Any advice?
Thanks in advance

You could try using a box shadow instead, as this doesn't actually affect the positioning:
a {
transition: all 0.8s;
margin: 5px;
text-decoration: none;
display: inline-block;
background: lightgray;
height: 50px;
width: 150px;
line-height:50px;
text-align: center;
color:black;
}
a:hover {
box-shadow: 0 -3px red;
}
HOVER MENOTICEHOWIDON'TMOVE?

I created a quick example: http://jsfiddle.net/alexcoady/ogoy21dq/
And one with just top or bottom http://jsfiddle.net/alexcoady/ogoy21dq/2/
Use margin to replace border-width when it's not visible.
button {
margin: 3px;
border: 1px solid red;
}
button:hover {
margin: 0px;
border: 4px solid red;
}

You can:
use the box-shadow fiddle demo
.functionButton:hover{
box-shadow: 0 -4px 0 0 #a3def1;
}

Style your button to have vertical-align to top. Add the following style to the bottom of your CSS:
#functionButtonDiv button{
vertical-align: top;
}
Updated jsFiddle
Read up: vertical-align | MDN

Try to understand what is happening.
You want buttons not be squeezed, but a border on top to be added.
Initially your button height was 25px and border was 1px.
On hover your height remains same however the border increases by 3px, hence making your button to squeeze.
Solution:
Hover: height has to be increased to accomodate increased border( 4px-1px = 3px) (in order not to squeeze the button).
If you do this only you will observe that the button starts shifting down.
To avoid it add margin of 4-1 = 3px to your functionButton class to compensate the increased height.
Similarly add a margin of -3px in hover class as the height is already increased by 3px.
.functionButton{
width:60px;
height:25px;
border: 1px solid #A3DEF1;
border-left: none;
outline:none;
background: #F2F5FD;
margin-top:3px; //added to avoid shifting of buttons down on hover (Here it compensates the increased height while hovering)
}
.functionButton:hover{
border-top: 4px solid #A3DEF1;
height:28px; //increased height to accomodate the increased border
margin-top:-3px; //negative margin to avoid shifting of button down
}
.functionButton{
width:60px;
height:25px;
border: 1px solid #A3DEF1;
border-left: none;
outline:none;
background: #F2F5FD;
margin-top:3px;
}
.functionButton:hover{
width:60px;
height:28px;
border-top: 4px solid #A3DEF1;
margin-top:-3px;
}
<div class="functionButtonDiv" id="functionButtonDiv">
<button type="button" class="functionButton">Dummy2</button>
<button type="button" class="functionButton">Dummy3</button>
<button type="button" class="functionButton">Dummy4</button>
</div>

You probably don't need Javascript for this.
You can use box-sizing to make sure that borders are included in your dimensions and vertical alignment to maintain position.
button {
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
button {
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.functionButtonChat {
width: 60px;
height: 25px;
border: 1px solid #A3DEF1;
outline: none;
background: #F2F5FD;
}
.functionButtonChat:hover {
border-left: 4px solid #A3DEF1;
border-top: 4px solid #A3DEF1;
}
.functionButton {
width: 60px;
height: 25px;
border: 1px solid #A3DEF1;
border-left: none;
outline: none;
background: #F2F5FD;
}
.functionButton:hover {
border-top: 4px solid #A3DEF1;
}
<div class="functionButtonDiv" id="functionButtonDiv">
<button type="button" class="functionButtonChat">Dummy1</button>
<button type="button" class="functionButton">Dummy2</button>
<button type="button" class="functionButton">Dummy3</button>
<button type="button" class="functionButton">Dummy4</button>
</div>

use following css i have made some changes in ur css and its working as per ur requirement try the following
.functionButtonChat{
width:80px;
height:25px;
outline:none;
background: #F2F5FD;
}
.functionButtonChat:hover{
border: 4px solid #A3DEF1;
}
.functionButton{
width:80px;
height:25px;
outline:none;
background: #F2F5FD;
}
.functionButton:hover{
border: 4px solid #A3DEF1;
}

How to make to border-bottom line longer with CSS

I would like to extend the border-bottom line longer than ever as the image below:
If this is impossible and you have any suggestion to make a change into my code, that would be great.
HTML:
<table id="showRoom">
<tr class="box_shadow">
<td class="text_plant_address"> <span class="text_plant">Plant 1</span>
<br /> <span class="text_address">Street 2, Dong An Industrial Park</span>
</td>
</tr>
CSS:
body {
background-color: #F6F6F6;
}
#showRoom {
margin-left: 10px;
margin-top: 10px;
width: auto;
border-collapse: collapse;
}
table .box_shadow {
background-color: #FFF;
font-size: 18px;
line-height: 20px;
text-align: center;
font-weight: normal;
font-family: 'Scada', sans-serif;
display: block;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
table tr .text_plant_address {
background-color: #FFF;
width: 175px;
height: 175px;
font-size: 18px;
line-height: 20px;
text-align: center;
font-weight: normal;
font-family: 'Scada', sans-serif;
margin: 0;
padding: 0;
}
table tr td span {
height: 87.5px;
width: auto;
}
table tr td .text_plant {
border-bottom: 1px solid #D0D0D0;
}
table tr td .text_address {
font-size: 10px;
}
Here is my JSFIDDLE: http://jsfiddle.net/QTNr5/
2.Does anyone know the name of the font below?

Just add Padding
table tr td .text_plant {
border-bottom: 1px solid #D0D0D0;
padding: 0 20px; /* or how longer you want */
}
Fiddle
For the font -
1) If you have a just image file than just keep on trying random fonts the only this is solution i guess.
2) If its on some web page inspect it via firebug or any other code inspection tool.
3) If its psd or vector open it in its respective tool and try editing the font software will tell you the name like Photoshop etc.
4) Try this http://www.myfonts.com/WhatTheFont/ for getting font name from a JPG image.
I hope any of these will help you.

You can move the border bottom from the text_plant and make it a border top on text_address like so: http://jsfiddle.net/QTNr5/2/
table tr td .text_plant {
}
table tr td .text_address {
font-size: 10px;
border-top: 1px solid #D0D0D0;
padding-top: 4px;
}
Or if you want it shorter you can add padding let and right to your text_plant like this: http://jsfiddle.net/QTNr5/4/
table tr td .text_plant {
border-bottom: 1px solid #D0D0D0;
padding:0 20px;
}

if you want your solution in any how..
then i will recommend this..
Use 3 before plant 1 and 3 after that..
like this
<td class="text_plant_address"> <span class="text_plant"> Plant 1 </span>
i know its not best answer but hope it will help and you can increase according to u

You could change your spans to divs and remove the br. Divs will display as blocks by default, so they take up the full width of the td. I modified your fiddle to show the divs. If you don't want it to touch the edges of the box, add padding to your td.
http://jsfiddle.net/mrNXW/
<td>
<div class="plant">Plant 1</div>
<div class="address">Street 2, Dong An Industrial Park</div>
</td>

The font you're looking for I believe is this:
http://www.dafont.com/ballpark-weiner.font

<edit> question misunderstood, answer gives a bottom border that is red, white and red again :) red on the outer parts .... </edit>
You can use pseudo element to draw the red part :
http://codepen.io/anon/pen/axvgl/
td {
text-align:center;
}
.text_plant {
font-size:2em;
border-bottom:solid white;
box-shadow:
0 1px 0 gray,
inset 0 -1px 0 lightgray;
}
.text_plant:before,
.text_plant:after {
content:'';
display:inline-block;
width:1.25em;
box-shadow:inherit;
border-bottom:solid red;
margin-bottom:-3px;/* size of border*/
vertical-align:bottom;
}
Or use gradient http://codepen.io/anon/pen/ftmDn/
td {
text-align:center;
}
.text_plant {
display:inline-block;
font-size:2em;
padding:0 1em;
box-shadow:
0 1px 0 gray;
background:linear-gradient(to left, red 20%,white 20%,white 80%,red 80%) bottom no-repeat, linear-gradient(gray,gray) no-repeat bottom;
background-size:100% 3px, 100% 4px ;
}

Sure, try adding: padding: 10px 0 to the <span>.

after you have clicked or hovered can you change state?

trying to make an input box do the following: normal sate the input box text is x, hover state the input text is y and was you leave the box its z and can stay z through all states again.
-update
have a search box which the background image and text are faded out, once you hover it is is vivid, once you focus it, it is vivid with a 2px border, but once you leave it i loose verything:( so need a trick to get it to stay vivid the background picture (of which there are x and y, one for each state) and the text but loose the 2px border
---UPDATE ---
/* Search box */
.searchbox {
background: url(../images/search-grey.gif) no-repeat 6px -5px #f8f8f8;
width:240px;
margin-right:4px;
margin-left:11px;
color:#cccccc;
vertical-align: top;
padding: 4px 2px 4px 79px;
border-color: #4FA4F9;
}
.searchbox:hover {
background: url(../images/search-greyb.gif) no-repeat 6px -5px #f8f8f8;
color:#888888;
}
.searchbox:focus {
background: url(../images/search-greyb.gif) no-repeat 5px -6px #ffffff;
width:239px;
color:#888888;
padding: 3px 2px 3px 78px;
}
.searchbox.blur {
background: url(../images/search-greyb.gif) no-repeat 6px -5px #ffffff;
width:239px;
color:#000000;
padding: 4px 2px 4px 79px;
}
#-moz-document url-prefix() {
.searchbox {
background: url(../images/search-grey.gif) no-repeat 6px -4px #f8f8f8;
}
}
#-moz-document url-prefix() {
.searchbox:hover {
background: url(../images/search-greyb.gif) no-repeat 6px -4px #f8f8f8;
}
}
#-moz-document url-prefix() {
.searchbox:focus {
background: url(../images/search-greyb.gif) no-repeat 5px -5px #f8f8f8;
}
}
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
input, select, textarea {
margin: 1 0 0;
}
input, textarea, .date {
border: 1px solid #aaa;
border-radius: 3px;
color:#333;
}
input {
font-size: 13px;
padding: 0px;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 4px 4px 4px 4px;
}
select:hover {border: 1px solid #4FA4F9;}
input:hover {border: 1px solid #4FA4F9;}
textarea:hover {border: 1px solid #4FA4F9;}
select:focus {padding: 0px;}
input:focus {padding: 0px;}
textarea:focus {padding: 3px 3px 3px 3px;
}
--- html ---
<input id="searchdomain" name='domain' type="text" style="font-size:15px;" class="searchbox"/>
---js----
/* Search Box Leave */
$(".searchbox").blur(function(){
$(this).addClass("blur");
});

You could do this using jQuery by setting a class.
$(".searchable").blur(function() {
$(this).addClass("blur");
});
Then in your css you can set the color like this
.searchable.blur
{
color:#000;
}
​
Here is a jsfiddle example -> http://jsfiddle.net/y46Wk/2/
Just bear in mind that the element won't show its hover color again unless you remove the class.

This isn't really an answer to your question.... but I have a feeling you're doing some validation on a form, so why not look at a jQuery validation plugin like this
http://docs.jquery.com/Plugins/Validation
Here is a list of other form related jQuery stuff
http://speckyboy.com/2010/06/22/50-jquery-plugins-for-form-functionality-validation-security-and-customisation/
If none of them help, perhaps you could tell us which one comes close to give us a bit of a clue as to what you want ;-)

Are you trying to do this: http://jsfiddle.net/akhurshid/y46Wk/4/

What you are describing (maintaining a state) is technically possible with just CSS.
Here is an article explaining the process.
In summary you use a transition state, triggered by focus, to keep styles applied to the element. I'm not advocating it as the best method, but it is really quite interesting to see what you can do with CSS3 properties.
More of a curiosity than a straight answer but hopefully its helpful to you / others who hit this question :)

Anchor split into two pieces on IE7

Top: IE8
Bottom: IE7
How do you fix IE7 so it doesn't split my anchor into two pieces? I know display:block and float:left would solve this, but I'd rather have it be inline. This way, I can have text both to the left and right of any arbitrarily placed anchor button.
#launchChrome {
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,1);
background: #eee;
background: -moz-linear-gradient(center top, #fff, #cfd5e3);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #cfd5e3));
border: 1px solid;
border-color: #ccc #ccc #999 #ccc;
-moz-border-radius: 0.4em;
-webkit-border-radius: 0.4em;
text-shadow: 0 1px 0 rgba(255,255,255,0.7);
color: #666;
font-size: 1.4em;
padding: 0.2em 0.6em;
margin: 0 0 0 1em;
-moz-box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.1);
}
<a id="launchChrome" href="javascript:void(0)" onclick="launch()">
<img src="<?=base_url()?>images/spacer.gif" class="spriteChannel googleChromeSmall">
Launch Chrome
</a>

I used display:inline-block to fix it.

Why even use an image tag to begin with?
Use a non repeating background image and set a padding-left on the link so the text does cover the image.

First of all close your img tag <img />.
Second - try adding zoom:1 to #launchChrome - I'm not having the exact same render problem in IE7 but it fixed it's look in both IE6/7. That shoud trigger hasLayout.