I have a drop down menu that's working just fine in Chrome and Safari, but when testing it in Firefox and IE, the dropdown box is longer down and therefore unreachable.
<!--produkter dropdown -->
<div id="dropmenu1" class="dropmenudiv">
RAW Frames
PROJECT 321
CAMSPORTS
FOSS
</div>
<!--medie dropdown -->
<div id="dropmenu2" class="dropmenudiv" style="width: 113px;">
TEST RIDE
HOW TO
RIDERS VIEW
</div>
.dropmenudiv{
position: absolute;
margin-top: 36px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-left: 1px solid #333;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
font-size: 12px;
font-weight: bold;
line-height: 26px;
z-index: 100;
background: -moz-linear-gradient(top, #424141, #262626); /* Mozilla */
background: -webkit-gradient(linear, left top, left bottom, from(#424141), to(#262626)); /* Chrome-Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#424141', endColorstr='#262626'); /* IE */
width: 137px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 5px;
padding: 2px 0;
text-decoration: none;
color: black;
padding-left: 5px;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{
background: -moz-linear-gradient(top, #545454, #2c2c2c); /* Mozilla */
background: -webkit-gradient(linear, left top, left bottom, from(#545454), to(#2c2c2c)); /* Chrome-Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#545454', endColorstr='#2c2c2c'); /* IE */
}
I have read a lot around the net and can see that a lot of other people have similar problems with Firefox not showing the div the same place as in Chrome and other browsers.
The attribute position:absolute causes this issue. Try this code instead what you have used.
http://jsfiddle.net/AAgfF/2/
Related
I want to create a range input that has a track bar shaped like a triangle, much like many volume inputs appear. Here is an example.
I have read this useful guide to styling the input, but it does not have information on changing the shape of the track bar.
I do not want to use a custom range slider with JS that alters the real input, I want to use the actual range input itself. It should also be mostly cross browser.
How can I accomplish this?
You cannot reliably change the shape of the track bar itself in a cross browser manner, but you can hide the track bar and position an element or image behind it. Here is an example of this being done.
HTML
<input type="range" class="font-size-selector pd-select" id="font_size_selector" min="12" value="20" max="100" step="1">
<span class="triangle-range-background-slider"></span>
CSS
/* Trangle */
.triangle-range-background-slider {
position: relative;
display: block;
margin-top: -27px;
height: 20px;
background: url('https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg');
background-size: 100% auto;
z-index: 1;
}
/* Input to work with triangle */
input[type=range] {
position: relative;
z-index: 3;
}
You could also use a CSS shape instead by removing the background image and placing this logic in there in it's place.
.triange-range-background-slider {
position: relative;
display: block;
margin-top: -27px;
border-top: 10px solid transparent;
border-right: 100px solid #3071a9;
border-bottom: 10px solid transparent;
z-index: 1;
}
Rest of the CSS is the Hide and Thumb from the CSS-Tricks link you provided.
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
Hide Input CSS
/* Hide */
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;
}
Thumb Input CSS
/* 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;
}
I try to make into my button a css icon and not with image, and here is my css button :
Button :
<div>
<b>
<asp:Button ID="bt_VaildID" runat="server" Text="Valider" OnClick="bt_VaildID_Click" ValidationGroup="auGoup" CausesValidation="true" CssClass="bt_Valider" />
</b>
</div>
CSS:
.bt_Valider {
display: inline-block;
border: 2px solid #903E71;
color: #000000;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
font-family: Verdana;
width: auto;
height: auto;
font-size: 16px;
padding: 6px 25px;
background-image: linear-gradient(to top, #903E71, #903E71);
background-image: -webkit-linear-gradient(to top, #903E71, #903E71); /* for safari */
background-color: #903E71;
float:right;
}
.bt_Valider:hover, .bt_Valider:after {
border: 2px solid #903E71;
color: #903E71;
background-image: linear-gradient(to top, #FFF, #FFF);
background-image: -webkit-linear-gradient(to top, #FFF, #FFF); /* for safari */
cursor:pointer;
content: "\279C"; /* I found that with this i can make some icon */
}
This code gives me this result : Output image
But I want to get it like this : Desired
not sure if this is your desired result.
be aware that with content: "\279C"; you are using an unicode character, se more here http://tutorialzine.com/2014/12/you-dont-need-icons-here-are-100-unicode-symbols-that-you-can-use/
.bt_Valider {
display: inline-block;
border: 2px solid #903E71;
color: #000000;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
font-family: Verdana;
width: auto;
height: auto;
font-size: 16px;
padding: 6px 25px;
background-image: linear-gradient(to top, #903E71, #903E71);
background-image: -webkit-linear-gradient(to top, #903E71, #903E71); /* for safari */
background-color: #903E71;
/* float:right; */
}
.bt_Valider:hover, .bt_Valider:after {
/* border: 2px solid #903E71; */
color: #000000;
cursor:pointer; background:transparent;
content: "\279C"; /* I found that with this i can make some icon */
}
<div>
<b>
<Button ID="bt_VaildID" runat="server" Text="Valider" OnClick="bt_VaildID_Click" ValidationGroup="auGoup" CausesValidation="true" Class="bt_Valider" >Valider</Button>
</b>
</div>
I apologize if this kind of question has been asked and answered. I tried doing a search online before asking, but have yet to find an answer that solves my situation.
I am in the process of developing a website where there's a list (using <li>) on the right of a video and if a user clicks on another item in the list, a new video will play in place of the previous video, if that makes sense.
I prefer to keep my code as clean as possible. pure HTML5 and CSSS is preferred if that's at all possible. Some jQuery is okay if there's no other way to accomplish this.
Hopefully this screenshot will help make sense of what I am trying to accomplish. Iit's not a problem to load a video - the problem is how to make other videos appear in its place when you click on its list item.
edit: adding html and css codes:
<div class="slider_wrapper">
<iframe class="slider_video" width="650" height="366" src="https://www.youtube.com/embed/w8jAm13M9Ec?autoplay=1" frameborder="0"></iframe>
<!-- start slider menu -->
<div class="slider_menu_container">
<div class="slider_menu">
<ul>
<li>Welcome to WSD</li>
<li>WSD: The B.E.S.T.</li>
<li>WSD: A Bilingual Approach</li>
<li>What's Up, WSD?</li>
<li>Headline</li>
<li>Headline</li>
<li>Headline</li>
<li>Headline</li>
</ul>
</div>
</div>
</div>
.slider_wrapper {
position: relative;
top: 0;
left: 0;
width: 934px;
background-color: #d3d3d3;
border: 1px solid #fff;
margin: 0 auto;
}
.slider_video {
margin: 10px 0 10px 10px;
padding: 0;
border: 10px solid #000;
}
.slider_menu_container {
margin: 0 auto;
margin-left: 10px;
margin-right: 10px;
width: 230px;
float: right;
}
.slider_menu {
position: relative;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 5px;
}
.slider_menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.slider_menu li, .slider_menu li.first {
padding: 8px;
height: 24px;
border: 1px solid #fff;
margin-bottom: 7px;
overflow: hidden;
background-color: #207F3E;
box-shadow: 0 0 1px #303030;
}
.slider_menu li:hover, .slider_menu li.first:hover {
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 100%);/* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00299a0b', endColorstr='#9dbaa6',GradientType=1 ); /* IE6-9 */
box-shadow: 0 0 1px #303030;
}
.slider_menu a {
text-decoration: none;
font-family: 'avenir-medium', Fallback, sans-serif;
font-weight: normal;
font-size: .9em;
color: #fff;
line-height: 24px;
vertical-align: middle;
}
.slider_menu a:hover {
color: #303030;
}
This can't be done with CSS alone, no, you will need some JavaScript.
<li onclick="return play('w8jAm13M9Ec')">Welcome to WSD</li>
function play(clip) {
var video = document.getElementsByTagName('iframe')[0];
video.src = 'https://www.youtube.com/embed/'+clip+'?autoplay=1';
return false;
}
See this fiddle.
(Using a jsfiddle instead of a snippet, because the snippet sandbox treats YouTube videos as insecure.)
I'm trying to find a workaround (without using JS) for the firefox bug which doesn't allow to style Firefox dropdown arrow in select elements. Some people say it could be done by putting a select element in a container and setting the container's width to be smaller than the select's. Somehow it just doesn't work for me, even when I set the select element's width to 100000px (the arrow is still there on the max. right position).
http://jsfiddle.net/qQ829/ here is the jsFiddle
CSS:
#nav {
background: url("http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg") no-repeat scroll right center #DDDDDD;
border: 1px solid #CCCCCC;
height: 34px;
overflow: hidden;
max-width: 800px;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border: 1px solid #1C2149;
background: #a7cfdf; /* Old browsers */
background: -moz-linear-gradient(top, #a7cfdf 0%, #1a80b6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#1a80b6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a7cfdf 0%,#1a80b6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a7cfdf 0%,#1a80b6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a7cfdf 0%,#1a80b6 100%); /* IE10+ */
background: linear-gradient(to bottom, #a7cfdf 0%,#1a80b6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#1a80b6',GradientType=0 ); /* IE6-9 */
}
#nav select {
background: transparent;
width: 830px!important;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
color: white;
font-family: "Open Sans",Arial,Helvetica,sans-serif !important;
}
// EDIT
Additional HTML code:
<nav class="nav-holder" id="nav">
<select>
<option selected="selected" value="">Go to...</option>
</select>
</nav>
add overflow to you css.
#nav select {
background: transparent;
/*width: 830px!important;*/
width:110%;
overflow:hidden;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
color: white;
font-family: "Open Sans",Arial,Helvetica,sans-serif !important;
}
and set the width to 110% as well otherwise you have that long bar
Try with -moz-appearance: window; . It removes all the style of the select (borders and arrow).
You can see it in action here.
Edit: Only for Mac, not for WinXP.
Forget the container, this is how to hide the select arrow on Firefox:
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Live example: http://jsfiddle.net/joaocunha/RUEbp/1/
Whole explanation (worth checking): https://gist.github.com/joaocunha/6273016
I am currently adding a navigation bar to a web page. But I am running into some css styling issues. The navigation menu bar is pushing the content below, leaving a huge gap in between and making it uneven. I took the precaution in leaving out anything that will mess with the bottom like margin bottom-padding but I am still getting the same result. How can I get the menu bar to not affect the content below? EXAMPLE
With the Navigation bar added:
Without navigation bar the contents below are even:
I have added the specific css rules that are causing the issue to devgrow.css:
<style>
#navigation {
position:relative;
top:-45px;
left:450px;
}
#au_title {
color: #FC821D;
font-size: 120%;
font-weight: bold;
left: 515px;
letter-spacing: 2px;
position: relative;
text-transform: uppercase;
top: -105px;
}
#searchInput {
left: 700px;
position: relative;
top: -180px;
}
#contentNav { color: #cfdae3; }
/* Dark Button CSS */
.buttonNav {
outline: 0;
padding: 5px 12px;
display: block;
color: #EBEBEB;
font-weight: bold;
text-shadow: 1px 1px #1f272b;
border: 1px solid #1c252b;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #232B30; /* old browsers */
background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
}
.buttonNav:hover {
color: #fff;
background: #4C5A64; /* old browsers */
background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 ); /* ie */
}
.buttonNav:active {
background-position: 0 top;
position: relative;
top: 1px;
color: #fff;
padding: 6px 12px 4px;
background: #20282D; /* old browsers */
background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */
-moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}
/* Other stuff: */
.button-list { list-style: none; width: 100%; float: left; display: block; }
.button-list li { float: left; margin: 0 5px 0 0; }
.button-list li.search { padding-left: 18px; margin-left: 10px; position: relative; }
/* Search CSS: */
.search-input {
padding: 0 5px 0 22px;
border: 2px solid #DADADA;
height: 30px;
font-size: 12px;
line-height: 30px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
background: #FFF; /* old browsers */
}
.search-input:focus {outline: none;}
.search-submit {
width: 13px;
height: 13px;
border: none;
background: url(images/mag-glass.png) no-repeat;
display: block;
position: absolute;
left: 26px;
top: 10px;
text-indent: -9999em;
}
</style>
First i have say that the coding is really bad. For fixed that issue remove float from you button-list. Write like this :
.button-list {
list-style: none outside none;
overflow: hidden;
}
Hey now define overflow hidden in your css #contentArea id
as like this
#contentArea {
overflow: hidden;
}
Add style clear both in css of first content area
<div id="contentArea" style="clear:both">