I have css called action1 and i trying to remove outline property from it just for firefox browser. Here is the class
a.action1,a.action1:link,a.action1:visited {
display: block;
height: 27px;
width: 200px;
color: #FFFFFF;
background-color: #666633;
font-family: Century Gothic, sans-serif;
font-size: 13px;
text-align: center;
vertical-align:middle;
padding: 1px 2px;
border: 1px solid #FFFFFF;
outline: 1px solid #666633;
text-decoration: none;
margin: 1px;
cursor: pointer;
-moz-box-shadow: 0px 0px 6px 0px #888;
-webkit-box-shadow: 0px 0px 6px 0px #888;
box-shadow: 0px 0px 6px 0px #888;
}
and here is the code i am using in my jsp to remove the outline property
<style>
#-moz-document url-prefix() {
a.action1 {
outline: 0px;
}
}
</style>
This is not working for.
<a class="action1" onclick="dosomething()" href="gosomewhere">somename</a>
Although moz-document is working perfectly fine for input type button.
Use Firebug to check whether the css is applied, whether it has lower priority level than others.
Try
<style>
#-moz-document url-prefix() {
a.action1 {
outline: 0 none !important;
}
}
</style>
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 need to make sure that the 'Next' button below the video is centered vertically and horizontally within the block with the yellow background.
In addition, the 'click' effect on the button does not seem to work as intended. There is something causing a conflict here and I cannot figure out what.
When I only run the "next-video-button" and "next-video-button:active" CSS rules, everything works perfectly.
You may find my CSS and HTML below.
.course-video {
background: #f9c70f;
border: none;
margin: 0;
box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset;
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset;
border-radius: 0;
-moz-border-radius: 0;
}
.next-video-button {
transition: all 0.1s;
-webkit-transition: all 0.1s;
padding: 7px 200px;
border-radius: 10px;
font-family: 'Montserrat';
font-size: 1em;
color: #ffffff;
text-decoration: none;
background-color: #888888;
border-bottom: 5px solid #5a5a5a;
text-shadow: 1px -2px #888888;
text-align: center;
}
.next-video-button:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
.video-title {
font-family: montserrat;
font-size: 1.5em;
color: #000000;
padding: 0.5em;
box-sizing: border-box;
width: 854px;
text-shadow: 0px 2px 4px rgba(0,0,0,0.3);
}
.video-descr {
width: 854px;
box-sizing: border-box;
height: 50px;
margin-top: -5px;
}
<div class="course-video video-title">Hello</div>
<iframe src="https://player.vimeo.com/video/154094373" width="854" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="course-video video-descr">NEXT</div>
To center the button give it a width and add margin: 0 auto and display: block; to .next-video-button.
The button won't work though because of a href="#". Replace the # with the video URL.
I've created a div and input and given both exactly the same borders, padding, margins, fonts and font-sizes. But they're still not the same height. Why?
Edit: Using Firefox
Example: http://jsfiddle.net/a8n6qxaz/
HTML:
<div class="close">X</div>
<input type="submit" value="TEST" />
CSS:
input[type="submit"]
{
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
padding: 0.125em;
padding-left: .25em;
padding-right: .25em;
font-family: Arial, Helvetica;
font-size: 1.25em;
line-height: 1em;
color: #ffffff;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: red;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
}
.close
{
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
padding: 0.125em;
padding-left: .25em;
padding-right: .25em;
font-family: Arial, Helvetica;
font-size: 1.25em;
line-height: 1em;
color: red;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: #3e3f39;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
}
The problem is that you didn't specify any height, so use e.g.
height: 1em;
However, by default the height of the input is considered using the border-box model, and the height of the div using the content-box model. Use the box-sizing property to specify the same model for both elements:
box-sizing: content-box;
input[type="submit"], .close {
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
padding: 0.125em;
padding-left: .25em;
padding-right: .25em;
font-family: Arial, Helvetica;
font-size: 1.25em;
line-height: 1em;
color: #ffffff;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: red;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
height: 1em;
box-sizing: content-box;
}
<div class="close">TEST</div>
<input type="submit" value="TEST" />
For some reason, in Firefox, padding is applied differently in an input than a div even if they're both display: block and you remove the appearance of the input. line-height also messes up in an input.
Removing the top/bottom padding from both and line-height from the input, allows making them the same height:
http://jsfiddle.net/a8n6qxaz/4/
input[type="submit"]
{
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
height: 1.5em;
padding: 0em;
font-family: Arial, Helvetica;
font-size: 1.25em;
color: #ffffff;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: red;
vertical-align: middle;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
}
.close
{
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
height: 1.5em;
padding: 0em;
font-family: Arial, Helvetica;
font-size: 1.25em;
line-height: 1.5em;
color: #ffffff;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: red;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
}
Because you don't specify the height, and firefox applies different default height for div and for input than chrome
If you want to force the input to behave like the div, you must change the box-model of the input:
box-sizing: content-box;
Add that CSS property to the input, and then in firefox both div and input will consider the padding in the same manner.
I'm having trouble aligning a regular <button> beside an input in Firefox. I get the following output in Firefox:
The input class is university and the button class is next and the CSS code is the following:
.university {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-transform: uppercase;
padding: 20px;
width: 400px;
display: block;
border: none;
color: #000;
border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
outline-style: none;
outline-width: 0px;
outline-color: #000;
}
#next {
background-color: #C44D58;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-transform: uppercase;
width: 150px;
padding: 20px;
margin: 0;
color: #FFF;
border: none;
border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
-webkit-border-radius: 0px 3px 3px 0px;
outline-style: none;
outline-width: 0px;
outline-color: #000;
}
And the HTML is:
<div class="universityContainer">
<input type="text" class="university typeahead" placeholder="University Name">
<button id="next">NEXT</button>
</div>
The CSS for .universityContainer is:
.universityContainer {
display: table-cell;
vertical-align: middle;
}
Note: It should be noted that it renders correctly in every browser except for Firefox.
Remove display: block from the .university. Fiddle: http://jsfiddle.net/gf9Tr/
You can remove display: block; or you can use display: inline-block; in class university instead.
You need to change display:block on the input element to display: inline-block.
Here is a jsbin to show them lining up correctly.
I am trying to add a background image to a button (or link with the same class) which already has a background color.
Here is the jsfiddle: http://jsfiddle.net/BNvke/
The button looks great by itself, but I am trying to make it so that if I add a certain class, the padding will be adjusted and a background image will be displayed, however the image does not show. Here is the CSS/HTML:
.button {
padding: 10px;
margin-right: 8px;
margin-bottom: 10px;
font-family: Arial, Tahoma, Verdana, FreeSans, sans-serif;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
display: inline-block;
white-space: nowrap;
line-height: 1em;
position: relative;
outline: none;
overflow: visible;
cursor: pointer;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 1px 1px 2px 0 #CCCCCC;
-moz-box-shadow: 1px 1px 2px 0 #CCCCCC;
-webkit-box-shadow: 1px 1px 2px 0 #CCCCCC;
}
.button_blue {
border: 1px solid #305875;
color: #FBFBFB;
background-color: #3D6E97;
}
.button_blue:hover {
color: #FBFBFB;
opacity: 0.9;
filter: alpha(opacity=90);
}
.button_about {
background-image: url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
padding-left: 35px;
padding-right: 15px;
}
<p><a class="button button_blue">Without Background</a></p>
<p><a class="button button_blue button_about">With Background</a></p>
How can I get that background image to show?
see http://jsfiddle.net/BNvke/1/
just change
background-image url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
with
background: url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
and move up the last rule so the rule about background-color defined for .button_blue can be applied on cascade
.button {
background: url(http://i47.tinypic.com/2ni0ahd.png);
background-repeat: 3px 5px no-repeat;
}