i have made a button with some effects. When i tested in browser it's working fine in only in mozilla. i am unable to find why is not working in -webkit- browser can anybody tell me why this code is not working check this fiddle http://jsfiddle.net/sarfarazdesigner/Qtw3x/
here is html code
<button name="feat-btn" id="feat-btn" class="push-button" type="submit">
<span>Submit</span>
</button>
here is css
.push-button {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 18px;
padding: 0;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.push-button span:after {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #357536 transparent -moz-use-text-color;
border-image: none;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-style: solid solid none;
border-width: 5px 5px 0;
content: "";
display: block;
margin: 0 -1.7em;
overflow: hidden;
text-indent: -9999px;
}
.push-button span:before {
border-radius: 8px 8px 8px 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
content: ".";
display: block;
height: 55px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.push-button span {
background-color: #4FB051;
border-bottom: 1px solid #6FBE70;
display: inline-block;
height: 49px;
line-height: 50px;
margin-bottom: 5px;
min-width: 110px;
padding: 0 1.7em;
position: relative;
}
.push-button:hover span{background-color:#52a853;}
first check it in mozilla then you understand how it will look or you can see the image below
this is looking in mozilla
and this is looking in webkit browser
Something weird is going on with your border-color in the .push-button span:after selector
border-color: #357536 transparent -moz-use-text-color;
Just change it to #357537
jsFiddle
border-color: #357536;
Works in both Chrome and Firefox for me with that change.
delete
transparent -moz-use-text-color
from the line
border-color: #357536 transparent -moz-use-text-color;
I dont see any changes, but works fine.
Result is:
border-color: #357536;
Related
href won't work in Chrome but it works on Microsoft Internet Explorer or Edge.
Looks like the line (a href="....html")Something(/a) is not working on edge or safari.
It is like dropdown menu.
There is a lot of code. You can check this problem here: http://www.kuhnibelarusi.lv . You will see 4 blue lines. Click on one of them and there will be the dropdown menu.
.dropdown {
position: relative;
border-radius: 0px;
}
.dropdown-menu {
top: 100%;
left: 0;
z-index: 1000;
float: inherit;
padding: 5px 0;
margin: 4px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 0px solid #ccc;
border: 0px solid rgba(0, 0, 0, .15);
border-radius: 0px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid \9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
<li class="dropdown" style="list-style-type: none; padding: 5px; background-color: #3a4d5d; margin: 2px">Pakalpojumi <span class="caret"></span>
<ul class="dropdown-menu">
<li>Interjera dizains</li>
<li>Virtuves projektēšana</li>
</ul>
</li>
You are relying on default browser styles. As you have noticed, they are not reliable.
You also seem to be assuming href contains instructions how to style the elements - this is incorrect. href only defines the target url of the link.
If you want it to look in a specific way (turn blue, as you said), you have to use own css rules:
a,
a:link {
color: black;
}
a:hover {
color: blue;
}
a:visited {
color: red;
]
Strictly spoken, you only need the second part to make the link turn blue on hover, but if you don't define how it has to look before, you can again get different results in different browsers.
You need to tell Chrome and other browsers that you want a hover state for your 'a' tags, use CSS to do this...
.dropdown-menu li a {
color: red;
}
.dropdown-menu li a:hover {
color: blue;
}
you can also style :active and :visited
Try it out =]
I have a CSS styling problem: there is a difference between Firefox and Chrome browsers in the CSS styling on an HTML element.
The range element is displayed on a different height in Firefox than in Chrome. I have added two screenshots.
Firefox:
Chrome:
The range element in Chrome is pressed against the upper edge of the "content" div. And in Firefox there is a small space between the range element and the upper edge of the "content" div - as shown by the red mark.
How can I set the range element to the same height in both Firefox and Chrome? In other words: I want the range element to be vertically in the center of the "content" div.
HTML:
<div id="container">
...
<div id="content">
<input type="range" id="bar" min="0" max="100" step="1" value="0"/>
</div>
</div>
CSS:
*{
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
margin-top: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
}
#container {
width: 640px;
height: 372px;
background: #000;
margin: auto;
}
#content {
width: 625px;
height: 25px;
background-color: #333;
margin: auto;
text-align: center;
border-radius: 4px;
}
input[type=range] {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 5px;
background: #ddd;
border: none;
border-radius: 0px;
}
input[type=range]::-moz-range-track {
height: 5px;
background: #ddd;
border: none;
border-radius: 0px;
}
to style <input type="range"> properly on all browsers you need to do a lot
1. you need to hide a lot of default browser styles
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
2. then you need to style the track
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
3. then you need to style the thumb
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
sorry copy and paste this - i edited it, now it should work
I have a jsfiddle with a dropdown list using ul and li (jsfiddle). When trying to convert this to a select options drop down list I am not getting the same options([jsfiddle])2.
I'm guessing it has to do with the way I renamed some one the CSS (I just replaced li with option) but I'm not sure what is wrong with it. My current HTML and CSS are below and two jsfiddles are in the text up top.
HTML
<div class="dd wrapper-dropdown-3" tabindex="1">
<select id="Process" class="dropdown" name="Process" data-val-required="Required" dataval="true">
<option value="">--- Select One ---</option>
<option value="Extrusion">Extrusion</option>
<option value="Injection">Injection</option>
<option value="Secondary">Secondary</option>
<option value="Vinyl Dip Molding">Vinyl Dip Molding</option>
</select>
</div>
CSS
.wrapper-dropdown-3 {
/* Size and position */
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px;
/* Styles */
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
outline: none;
/* Font settings */
font-weight: bold;
color: #0000FF;
}
.wrapper-dropdown-3:after {
content:"";
width: 0;
height: 0;
position: absolute;
right: 15px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}
.wrapper-dropdown-3 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: 0;
right: 0;
/* Styles */
background: white;
border-radius: inherit;
border: 1px solid rgba(0, 0, 0, 0.17);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
font-weight: normal;
list-style: none;
/* Hiding */
opacity: 0;
pointer-events: none;
/*Gets rid of the padding where the bullets would be*/
padding-left:0;
}
.wrapper-dropdown-3 .dropdown option a {
display: block;
padding: 10px;
text-decoration: none;
color: #0000FF;
border-bottom: 1px solid #e6e8ea;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown option i {
float: right;
color: inherit;
}
.wrapper-dropdown-3 .dropdown option:first-of-type a {
border-radius: 7px 7px 0 0;
}
.wrapper-dropdown-3 .dropdown option:last-of-type a {
border-radius: 0 0 7px 7px;
border: none;
}
/* Hover state */
.wrapper-dropdown-3 .dropdown option:hover a {
background: #f3f8f8;
}
.wrapper-dropdown-3 .dropdown:after {
content:"";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 15px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
}
.wrapper-dropdown-3 .dropdown:before {
content:"";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 13px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1) transparent;
}
.wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
}
You need to do a couple of things to fix your problem. All of these are inside your .wrapper-dropdown-3 .dropdown styling. First, remove pointer-events: none as #ramesh mentioned. Then change your top: 100%; to top: 0;. Add width: 100%;. Change opacity: 0; to opacity: 1; so that you can see it. Remove your border, selects already have a border. And lastly, add the following to remove the default dropdown arrow from Firefox:
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
Here is an updated JSFiddle.
pointer-events: none; was causing the issue. Replace the following class with the css provided:
.wrapper-dropdown-3 .dropdown {
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
background: white;
border-radius: inherit;
border: 1px solid rgba(0, 0, 0, 0.17);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
font-weight: normal;
list-style: none;
opacity: 0;
padding-left: 0;
}
Not sure why you had a pointer-event there, because it kind of doesn't allow you to interact with the element.
I have some code that produces a Drop Down List using ul and li Here is the first jsfiddle. This is how I would like my drop downs to look. However when I try and convert them to a select and options drop down list I am receving the following format, current jsfiddle. All I did was replace the li in the first fiddle with option. Any ideas how to fix this or why it's doing this? It seems like it is ignoring everything I replaced
Current HTML
<select class="wrapper-dropdown-3 dropdown" name="Process" data-val-required="Required" dataval="true">
<option value="">--- Select One ---</option>
<option value="Extrusion">Extrusion</option>
<option value="Injection">Injection</option>
<option value="Secondary">Secondary</option>
<option value="Vinyl Dip Molding">Vinyl Dip Molding</option>
</select>
Current CSS
.wrapper-dropdown-3 {
/* Size and position */
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px;
/* Styles */
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
outline: none;
/* Font settings */
font-weight: bold;
color: #0000FF;
}
.wrapper-dropdown-3:after {
content:"";
width: 0;
height: 0;
position: absolute;
right: 15px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}
.wrapper-dropdown-3 .dropdown {
/* Size & position */
position: absolute;
width: 100%;
height:100%;
top: 0;
left: 0;
right: 0;
/* Styles */
background: white;
border-radius: inherit;
border: 0px solid rgba(0, 0, 0, 0.17);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
font-weight: normal;
list-style: none;
/* Hiding */
opacity: 1;
/*Gets rid of the padding where the bullets would be*/
padding-left:0;
-moz-appearance: none;
-webkit-appearance:none;
text-indent: 0.01px;
text-overflow:'';
}
.wrapper-dropdown-3 .dropdown option a {
display: block;
padding: 10px;
text-decoration: none;
color: #0000FF;
border-bottom: 1px solid #e6e8ea;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown option i {
float: right;
color: inherit;
}
.wrapper-dropdown-3 .dropdown option:first-of-type a {
border-radius: 7px 7px 0 0;
}
.wrapper-dropdown-3 .dropdown option:last-of-type a {
border-radius: 0 0 7px 7px;
border: none;
}
/* Hover state */
.wrapper-dropdown-3 .dropdown option:hover a {
background: #f3f8f8;
}
.wrapper-dropdown-3 .dropdown:after {
content:"";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 15px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
}
.wrapper-dropdown-3 .dropdown:before {
content:"";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 13px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1) transparent;
}
.wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
}
You have specified a class name = "wrapper-dropdown-3 drop down" however there is no part of your CSS that styles this class. Also, you should pay attention to your HTML DOM structure when styling in CSS. For example in the code:
<ul class="ul">
<li class="li"></li>
</ul>
You would have a CSS like:
.ul{/*CSS code*/}
and
.ul .li{/*CSS code*/}
and not
.li{/*CSS code*/}
since the li tag is within the ui tag
I'm trying to make this tooltip arrow point to the right towards the link.
CSS
.tooltipside
{
position: relative;
cursor: help;
display: inline-block;
outline: none;
}
.tooltipside span
{
visibility: hidden;
position: absolute;
bottom: -22px;
z-index: 999;
width: 52px;
margin-left: -63px;
padding: 2px;
border: 1px solid #80a7ba;
background-color: white;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltipside:hover
{
border: 0; /* IE6 fix */
}
.tooltipside:hover span
{
visibility: visible;
}
.tooltipside span:before,
.tooltipside span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #80a7ba;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltipside span:before
{
border-top-color: #ccc;
bottom: -8px;
}
The html is
<a href='#' class='tooltipside'><span>
<img src='http://cdn2.iconfinder.com/data/icons/32pxmania/misc_57.png'
border='0' width='52' height='52'></span>LINK</a> TEST TEST TEST</b>
It currently points down in the center of the tooltip I need it to point right towards the link. How would I do this?
Thanks
Is this what you are after? http://jsfiddle.net/kX5kH/
I used the positioning to move the arrow, then swapped around the transparent broders to make the arrow point the right way.
NOTE: I added a parent <div> and positioned it absolutely, because it was otherwise hugging the edge and you couldn't see the tool tip.
Also there's no starting <b> tag.
One last note, I noticed you had a IE6 fix, which is intriguing because none of this will work in IE6. Box shadows, before/after selectors, and transparent borders will not appear correctly. But honestly I wouldn't be concerned about IE6 =P
Hope this helps.