I'm using the following code for pure css speech bubble but however i still can not add border to the whole bubble include the arrow at down side
HTML
<div class="bubble">Welcome</div>
CSS Code
.bubble {
height: 30px;
width: 574px;
background-color: #9FC175;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),3px 3px 0 hsla(0,0%,0%,.1);
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
position: absolute;
}
.bubble:after, .bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #9FC175;
bottom: -25px;
content: '';
position: absolute;
right: 25px;
}
.bubble:before {
border-right: 25px solid hsla(0,0%,0%,.1);
bottom: -28px;
right: 22px;
}
Results
if i added border code border:2px solid #493A34; at class .bubble
Results
Problem
How to add the border to the arrow as well ? ~ any idea
EDIT: Here is the fiddle link with box-shadow applied.
You can make a slightly larger brown arrow with the :after psudo-element, and position it behind the smaller green arrow (made with :before), and down 2px to create a border effect.
here's the fiddle: http://jsfiddle.net/rhGCb/
And the css:
.bubble {
border:2px solid #493A34;
height: 30px;
width: 574px;
background-color: #9FC175;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),3px 3px 0 hsla(0,0%,0%,.1);
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
position: absolute;
}
.bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #493A34;
bottom: -27px;
content: '';
position: absolute;
right: 23px;
}
.bubble:after {
border-bottom: 25px solid transparent;
border-right: 25px solid #9FC175;
bottom: -23px;
content: '';
position: absolute;
right: 25px;
}
A bit of a trick, but you can add a box-shadow that behaves as a border (meaning, blur is set to 0):
.speech-bubble{
/* ... */
/* 2px = border-width #333 = border-color */
-webkit-box-shadow:0 0 0 2px #333;
box-shadow:0 0 0 2px #333;
}
Related
I have the following code and am looking to give my Countdown timer a title. Inside the bar, right above the boxes that give the time remaining. Would like it to be easy to edit font, size and spacing across. Having trouble doing so.
It also seems like when publishing this code, the padding for the variables: days, hours, mins, and secs get pushed down. Not centered under the boxes and the edge of the bottom of the countdown timer.
var target_date = new Date("Aug 30, 2018 20:30:00").getTime(); // set the countdown date
var days, hours, minutes, seconds; // variables for time units
var countdown = document.getElementById("tiles"); // get tag element
getCountdown();
setInterval(function() {
getCountdown();
}, 1000);
function getCountdown() {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = pad(parseInt(seconds_left / 86400));
seconds_left = seconds_left % 86400;
hours = pad(parseInt(seconds_left / 3600));
seconds_left = seconds_left % 3600;
minutes = pad(parseInt(seconds_left / 60));
seconds = pad(parseInt(seconds_left % 60));
// format countdown string + set tag value
countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";
}
function pad(n) {
return (n < 10 ? '0' : '') + n;
}
body {
font: normal 13px/20px Arial, Helvetica, sans-serif;
word-wrap: break-word;
color: #eee;
}
#countdown {
/*bar*/
width: 232.5px;
/*changed*/
height: 56px;
/*changed*/
text-align: center;
background: #222;
background-image: -webkit-linear-gradient(top, #264033, #feb330, #feb330, #264033);
background-image: -moz-linear-gradient(top, #222, #333, #333, #222);
background-image: -ms-linear-gradient(top, #222, #333, #333, #222);
background-image: -o-linear-gradient(top, #222, #333, #333, #222);
border: 1px solid #111;
border-radius: 5px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
margin: auto;
padding: 12px 0;
/*changed*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#countdown:before {
/*handles*/
content: "";
width: 4px;
/*changed*/
height: 32.5px;
/*changed*/
background: #444;
background-image: -webkit-linear-gradient(top, #264033, #264033, #264033, #264033);
/*changed*/
background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
background-image: -o-linear-gradient(top, #555, #444, #444, #555);
border: 1px solid #111;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
display: block;
position: absolute;
top: 24px;
/*changed*/
left: -5px;
/*changed*/
}
#countdown:after {
/*handles*/
content: "";
width: 4px;
/*changed*/
height: 32.5px;
/*changed*/
background: #444;
background-image: -webkit-linear-gradient(top, #264033, #264033, #264033, #264033);
/*changed*/
background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
background-image: -o-linear-gradient(top, #555, #444, #444, #555);
border: 1px solid #111;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
display: block;
position: absolute;
top: 24px;
/*changed*/
right: -5px;
}
#countdown #tiles {
position: relative;
z-index: 1;
}
#countdown #tiles>span {
/*box*/
width: 46px;
/*changed*/
max-width: 46px;
/*changed*/
font: bold 24px 'Droid Sans', Arial, sans-serif;
/*changed*/
text-align: center;
color: #000000;
/*color of numbers*/
/*changed*/
background-color: #ddd;
background-image: -webkit-linear-gradient(top, #111, #eee);
/*color of box*/
/*changed*/
background-image: -moz-linear-gradient(top, #bbb, #eee);
background-image: -ms-linear-gradient(top, #bbb, #eee);
background-image: -o-linear-gradient(top, #bbb, #eee);
border-top: 1px solid #fff;
/*top border of box*/
/*changed*/
border-left: 1px solid #fff;
/*left border of box*/
/*changed*/
border-right: 1px solid #fff;
/*right border of box*/
/*changed*/
border-bottom: 1px solid #fff;
/*bottom border of box*/
/*changed*/
border-radius: 3px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
margin: 0 3.5px;
/*changed*/
padding: 9px 0;
/*changed*/
display: inline-block;
position: relative;
}
#countdown #tiles>span:before {
/*mini-handles*/
content: "";
width: 100%;
height: 13px;
background: #000000;
/*changed*/
display: block;
padding: 0 3px;
position: absolute;
top: 41%;
left: -3px;
z-index: -1;
}
/* #countdown #tiles>span:after {
content: "";
width: 100%;
height: 1px;
background: #eee;
border-top: 1px solid #333;
display: block;
position: absolute;
top: 48%;
left: 0;
} /*line through middle*/
#countdown .labels {
/*words*/
width: 100%;
height: 12.5px;
/*changed*/
text-align: center;
position: absolute;
bottom: 8px;
}
#countdown .labels li {
/*words*/
width: 51px;
/*changed*/
font: bold 10px 'Droid Sans', Arial, sans-serif;
color: #ffffff;
/*changed*/
text-shadow: 1px 1px 0px #000;
text-align: center;
text-transform: uppercase;
display: inline-block;
}
<div id="countdown">
<div id='tiles'></div>
<div class="labels">
<li>Days</li>
<li>Hours</li>
<li>Mins</li>
<li>Secs</li>
</div>
</div>
I was able to just add a new div above the #tiles div and tweak the CSS to get a title to display where you wanted. Needed to change the padding of #countdown to get it to display properly.
<div id="countdown">
<div id='title'>Title</div>
<div id='tiles'></div>
<div class="labels">
<li>Days</li>
<li>Hours</li>
<li>Mins</li>
<li>Secs</li>
</div>
</div>
#countdown {
/*bar*/
width: 232.5px;
/*changed*/
height: 56px;
/*changed*/
text-align: center;
background: #222;
background-image: -webkit-linear-gradient(top, #264033, #feb330, #feb330, #264033);
background-image: -moz-linear-gradient(top, #222, #333, #333, #222);
background-image: -ms-linear-gradient(top, #222, #333, #333, #222);
background-image: -o-linear-gradient(top, #222, #333, #333, #222);
border: 1px solid #111;
border-radius: 5px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
margin: auto;
padding: 0px 0px 32px 0;
/*changed*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Here is a fiddle.
I have a div with a 1px border and I'm trying to create a 3px border in another color to that div. I'm using this code:
box {
border: 1px solid #ddd;
border-top: 3px solid #3F9BD0;
}
but at the corners the border is not good, see image:
How can I make this border look good, like this:
fiddle: https://jsfiddle.net/15tory3z/
Instead of border-top, try using the :after pseudo-element to recreate the effect you want.
.box {
width: 200px;
height: 100px;
border: 1px solid #ddd;
position: relative;
}
.box:after {
position: absolute;
content: "";
width: 100%;
height: 5px;
top: -5px;
background: dodgerblue;
padding: 1px;
left: -1px;
}
<div class="box"></div>
Choice 2:
Use linear-gradient().
.box {
width: 200px;
height: 100px;
border: 1px solid #ddd;
background: -webkit-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -moz-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -o-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -ms-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: linear-gradient(top, dodgerblue 5%, #fff 5%);
}
<div class="box"></div>
You could draw these with inset shadows and padding :
div {
padding:12px 5px 5px;
width: 40%;
height: 200px;
box-shadow: inset 0 10px #3F9BD0, inset 4px 0 gray, inset -4px 0 gray, inset 0 -4px gray
}
<div></div>
or just an outset top shadow
div {
width: 40%;
height: 200px;
border:2px solid gray;
border-top:none;
box-shadow: 0 -10px #3F9BD0;
margin-top:12px;
}
<div></div>
else, background gradient could be used and even animated 2 examples : http://codepen.io/gc-nomade/pen/IGliC or http://codepen.io/gc-nomade/pen/pKwby
This also puts a line on top:
.box1 {
border: 10px solid #ddd;
border-top: 0;
box-shadow: 0 -30px 0 #3F9BD0;
float: left;
width: 300px;
height: 300px;
}
<div class="box1"></div>
Use css :after pseudo-class, docs
.box_big {
border: 10px solid #ddd;
position:relative;
z-index: 1;
}
.box_big:after{
height: 10px;
position: absolute;
top:-10px; left:-10px; right:-10px;
content: " ";
z-index: 2;
background: red;
}
.box {
border: 1px solid #ddd;
position:relative;
z-index: 1;
}
.box:after{
height: 3px;
position: absolute;
top:-3px; left:-1px; right:-1px;
content: " ";
z-index: 2;
background: red;
}
<div class="box_big">
big box
</div>
<hr />
<div class="box">
your box
</div>
Welcome to the css borders. The only way to properly do that is using :after or :before pseudoelements.
Fiddle
.box {
border: 1px solid #ddd;
position: relative;
}
.box:after {
position: absolute;
display: block;
content:'';
/* Positioning */
top: 0;
width: 100%;
height: 3px;
left: 0;
right: 0;
/* Color */
background-color: #3F9BD0;
}
Try this:
.box {
outline: 2px solid #ddd;
margin-top: -2px;
border-top: 10px solid #3F9BD0;
min-width:100px;
min-height:100px;
float:left;
}
<div class="box"></div>
The question is a bit old but I thought I'd make a suggestion that worked for me in a similar situation.
I just set border-width: 0; and that took away the mitered ends and made them nice and square for a button that I had a bottom-border applied.
I am trying to come up with a tab control and included in here is the link to jsfiddle and what I am trying to accomplish. The issue I have in here is to eliminate the curve at the end of the unordered list after Alpha. I tried it in a lot of different ways. It looks like the next tab has been cut off.
http://jsfiddle.net/v7u3xsxk/
CSS & The Tab.
<ul class="tabrow">
<li id="a" class="current">Adam</li>
<li id="b">Andrew</li>
<li id="c">Alpha</li>
</ul>
.tabrow {
list-style: none;
margin: 50px 0 0px;
padding: 0;
line-height: 35px;
height: 37px;
overflow: hidden;
font-family: Arial,Helvetica, sans-serif;
/*position: relative;*/
width:auto;
}
.tabrow li {
border: 1px solid #AAA;
background: #D1D1D1;
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
display: inline-block;
position: relative;
z-index: 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 30px;
height: 37px;
line-height: 37px;
}
.tabrow a {
color: #555;
text-decoration: none;
}
.tabrow li.current {
background: #FFF;
color: #333;
z-index: 2;
border-top-color: #FFF;
}
.tabrow:before {
position: absolute;
content: " ";
width: 100%;
top: 0;
left: 0;
border-top: 1px solid #AAA;
z-index: 1;
}
.tabrow li:before,
.tabrow li:after {
border: 1px solid #AAA;
position: absolute;
top: -1px;
width: 6px;
height: 6px;
content: " ";
}
.tabrow li:before {
left: -7px;
border-top-right-radius: 6px;
border-width: 1px 1px 0px 0px;
box-shadow: 2px 0px 0 #ECECEC;
}
.tabrow li:after {
right: -7px;
border-top-left-radius: 6px;
border-width: 1px 0px 0px 1px;
box-shadow: -2px 0px 0 #ECECEC;
}
.tabrow li.current:before {
box-shadow: 2px 0px 0 #FFF;
}
.tabrow li.current:after {
box-shadow: -2px 0px 0 #FFF;
}
Not sure why you've used the before and after elements. Seems to work if these are removed. http://jsfiddle.net/v7u3xsxk/5/
.tabrow {
list-style: none;
margin: 50px 0 0px;
padding: 0;
line-height: 35px;
height: 37px;
overflow: hidden;
font-family: Arial,Helvetica, sans-serif;
/*position: relative;*/
width:auto;
}
.tabrow li {
border: 1px solid #AAA;
background: #D1D1D1;
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
display: inline-block;
border-radius: 5px 5px 0 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 30px;
height: 37px;
line-height: 37px;
}
.tabrow a {
color: #555;
text-decoration: none;
}
.tabrow li.current {
background: #FFF;
color: #333;
z-index: 2;
border-top-color: #FFF;
}
.tabrow li.current {
box-shadow: 2px 0px 0 #FFF;
}
.tabrow li.current {
box-shadow: -2px 0px 0 #FFF;
}
If you remove position: relative; from your .tabrow li class it will solve the problem.
Updated code:
.tabrow li {
border: 1px solid #AAA;
background: #D1D1D1;
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
display: inline-block;
//removed line here
z-index: 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 30px;
height: 37px;
line-height: 37px;
}
Update: This method affects the styling on the rest of the menu.
I'm trying to change Chris's corner ribbon snippet at http://jsfiddle.net/chriscoyier/H6rQ6/1/. I want the ribbon to be at left instead of right
This is what i have done so far http://jsbin.com/imUQula/1/ the upper part & lower part of ribbon are not changing . I want the upper part flat horizontal & bottom flat vertical
css
.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
left: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
Assuming I understood your question correctly, do the below changes to your CSS to get it working the way you want:
.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
overflow: hidden; /* added to hide the part of the green ribbon which goes out of the wrapper */
}
JSBin Demo
EDIT: Actually, the earlier changes that I had mentioned to the .ribbon-wrapper-green is not required. You could simply do the below instead.
.ribbon-green {
left: -28px; /* changed from left -5px for the purpose of positioning */
}
like this?
http://jsfiddle.net/sudheer105/Fnpn7/
.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
left: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: relative;
padding: 7px 0;
right: 30px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
right: 0;
}
.ribbon-green:after {
left: 0;
}
I'm following the example posted here for making custom css tooltips.
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 99;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
I am wondering if there is a way to not have the tooltip push out it's parent elements outline in FireFox, it seems to work fine in Chrome
div {
display: inline-block;
padding: 20px;
border: 2px solid #000;
outline: 2px solid #F00;
}
see example here
I don't see how you can possibly fix this. I wonder if this is a Firefox bug?
The only thing that comes to mind is to use box-shadow instead of outline:
http://jsfiddle.net/thirtydot/HgeVh/9/
This has the downside that you're losing the outline in IE8, if that matters.