Button not displaying properly in firefox - javascript

So I've got this button, and it looks just fine in Chrome, but load it in Firefox and it's TOTALLY different. I've tried adding prefixes and it doesn't seem to change anything.
var checkbox = document.getElementById("cb4");
checkbox.indeterminate = true;
body
{
font-family:arial;
}
.flipswitch
{
position: relative;
background: white;
width: 120px;
height: 40px;
-webkit-appearance: initial;
border-radius: 3px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline:none;
font-size: 14px;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
cursor:pointer;
border:1px solid #ddd;
}
.flipswitch:indeterminate:after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:not(:indeterminate):after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
transition: all 0.3s ease-in 0s;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:indeterminate:after
{
left:30%;
content:"???";
background:grey;
}
.flipswitch:not(:indeterminate):after
{
left:2%;
content: "OFF";
background:#f00;
}
.flipswitch:not(:indeterminate):checked:after
{
left:53%;
content: "ON";
background:#0f0;
}
<!--Marketing Emails -->
<div class="form-row">
<h4>Do you wish to receive Marketing Emails</h4>
<p>Emails reminding you to keep your account updated, and to continue your job search with redacted</p>
<div>
<input type="checkbox" id="cb4" class="flipswitch" name="marketing"/>
<span></span>
</div>
</div>
It is meant to display as it does in Chrome.
Any advice would be appreciated - if I find anything new I'll make an edit.
Cheers all.


You just need to add the -moz-appearance: initial; for Firefox.
var checkbox = document.getElementById("cb4");
checkbox.indeterminate = true;
body
{
font-family:arial;
}
.flipswitch
{
position: relative;
background: white;
width: 120px;
height: 40px;
-webkit-appearance: initial;
-moz-appearance: initial;
border-radius: 3px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline:none;
font-size: 14px;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
cursor:pointer;
border:1px solid #ddd;
}
.flipswitch:indeterminate:after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:not(:indeterminate):after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
transition: all 0.3s ease-in 0s;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:indeterminate:after
{
left:30%;
content:"???";
background:grey;
}
.flipswitch:not(:indeterminate):after
{
left:2%;
content: "OFF";
background:#f00;
}
.flipswitch:not(:indeterminate):checked:after
{
left:53%;
content: "ON";
background:#0f0;
}
<!--Marketing Emails -->
<div class="form-row">
<h4>Do you wish to receive Marketing Emails</h4>
<p>Emails reminding you to keep your account updated, and to continue your job search with redacted</p>
<div>
<input type="checkbox" id="cb4" class="flipswitch" name="marketing"/>
<span></span>
</div>
</div>

Related

How to display a windows alert near my link

hello For the moment my code displays an alert when I click on "envoyer une alerte"
But the alert is displayed far from the "envoyer une alerte" link
I would like the alert to be displayed near the link display an alert
I have to modify what in my code so that the alert is glued to my link
https://codepen.io/Wilou/pen/eNNEme
<alert>
<div id="overlay" ></div>
<div id="alertPanel" ></div>
</alert>
send an alert
<br>
send an alert
alert #overlay{
position:fixed;
z-index:999;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000;
opacity:0.7;
display: none;
}
alert #alertPanel{
position:absolute;
top:25%;
min-height: 170px;
width: 450px;
margin-left: 24%;
z-index:9999;
color:#000;
border:1px solid #303030;
background-color:#eaeaea;
display: none;
text-align: center;
font-size: 24px;
font-weight:100%;
margin-bottom: 20px;
}
alert div.texte{
width: 400px;
display:inline-block;
padding:20px 0px 10px 0px;
word-wrap: break-word;
}
alert span.close{
background: url('') no-repeat center center;
cursor:pointer;
height:32px;
width:32px;
position:absolute;
right:12px;
top:12px;
cursor:pointer;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
opacity:1.0;
}
alert #alertPanel h2{
font-weight:100%;
font-size:22px;
padding:25px 0px 15px 15px;
text-align:center;
text-shadow:1px 1px 1px #000;
margin:0px;
background-color: #323232;
border:2px solid #fff;
-moz-box-shadow:0px 0px 8px #000;
-webkit-box-shadow:0px 0px 8px #000;
box-shadow:0px 0px 8px #000;
color: #FFFFFF;
}
window.alert = function(titre, message) {
document.getElementById("alertPanel").innerHTML = "<span class=\"close\" onclick=\"closealert();\"></span><h2>" + titre + "</h2><div class=\"texte\">" + message + "</div>";
document.getElementById('alertPanel').style.display='block';
document.getElementById('overlay').style.display='block';
}
function closealert()
{
document.getElementById('alertPanel').style.display='none';
document.getElementById('overlay').style.display='none';
}

Pass the clicked element as argument in the onclick handler.
Then, use the element to determine its position using getBoundingClientRect and apply it to your alertPanel.
window.alert = function(link, titre, message) {
// Store this in a variable instead of querying the document multiple times
let alertPanel = document.getElementById("alertPanel")
alertPanel.innerHTML = "<span class=\"close\" onclick=\"closealert();\"></span><h2>" + titre + "</h2><div class=\"texte\">" + message + "</div>";
alertPanel.style.display = 'block';
// Get the position of the clicked link
let position = link.getBoundingClientRect()
// Apply the position to the alertPanel
alertPanel.style.top = position.top + 20 + "px";
alertPanel.style.left = position.left + "px";
document.getElementById('overlay').style.display = 'block';
}
function closealert() {
document.getElementById('alertPanel').style.display = 'none';
document.getElementById('overlay').style.display = 'none';
}
body{
font-family:'Open Sans',sans-serif;
background-color: #DEDEDE;
}
alert #overlay{
position:fixed;
z-index:999;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000;
opacity:0.7;
display: none;
}
alert #alertPanel{
position:absolute;
top:25%;
min-height: 170px;
width: 450px;
/*margin-left: 24%;*/
z-index:9999;
color:#000;
border:1px solid #303030;
background-color:#eaeaea;
display: none;
text-align: center;
font-size: 24px;
font-weight:100%;
/*margin-bottom: 20px;*/
}
alert div.texte{
width: 400px;
display:inline-block;
padding:20px 0px 10px 0px;
word-wrap: break-word;
}
alert span.close{
background: url('data:image/png;base64,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') no-repeat center center;
cursor:pointer;
height:32px;
width:32px;
position:absolute;
right:12px;
top:12px;
cursor:pointer;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
opacity:1.0;
}
alert #alertPanel h2{
font-weight:100%;
font-size:22px;
padding:25px 0px 15px 15px;
text-align:center;
text-shadow:1px 1px 1px #000;
margin:0px;
background-color: #323232;
border:2px solid #fff;
-moz-box-shadow:0px 0px 8px #000;
-webkit-box-shadow:0px 0px 8px #000;
box-shadow:0px 0px 8px #000;
color: #FFFFFF;
}
<alert>
<div id="overlay"></div>
<div id="alertPanel"></div>
</alert>
send an alert
<br>
send an alert

Set your alert element to position: relative, and align position of alertPanel accordingly.

You can modified the position in this class: alert #alertPanel
In the example below i change the top and margin-left property.
top: 10px;
margin-left: 300px;
window.alert = function(titre, message) {
document.getElementById("alertPanel").innerHTML = "<span class=\"close\" onclick=\"closealert();\"></span><h2>" + titre + "</h2><div class=\"texte\">" + message + "</div>";
document.getElementById('alertPanel').style.display='block';
document.getElementById('overlay').style.display='block';
}
function closealert()
{
document.getElementById('alertPanel').style.display='none';
document.getElementById('overlay').style.display='none';
}
body{
font-family:'Open Sans',sans-serif;
background-color: #DEDEDE;
}
alert #overlay{
position:fixed;
z-index:999;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000;
opacity:0.7;
display: none;
}
alert #alertPanel{
position:absolute;
top: 10px;
min-height: 170px;
width: 450px;
margin-left: 250px;;
z-index:9999;
color:#000;
border:1px solid #303030;
background-color:#eaeaea;
display: none;
text-align: center;
font-size: 24px;
font-weight:100%;
margin-bottom: 20px;
}
alert div.texte{
width: 400px;
display:inline-block;
padding:20px 0px 10px 0px;
word-wrap: break-word;
}
alert span.close{
background: url('data:image/png;base64,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') no-repeat center center;
cursor:pointer;
height:32px;
width:32px;
position:absolute;
right:12px;
top:12px;
cursor:pointer;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
opacity:1.0;
}
alert #alertPanel h2{
font-weight:100%;
font-size:22px;
padding:25px 0px 15px 15px;
text-align:center;
text-shadow:1px 1px 1px #000;
margin:0px;
background-color: #323232;
border:2px solid #fff;
-moz-box-shadow:0px 0px 8px #000;
-webkit-box-shadow:0px 0px 8px #000;
box-shadow:0px 0px 8px #000;
color: #FFFFFF;
}
<alert>
<div id="overlay" ></div>
<div id="alertPanel" ></div>
</alert>
Envoyer une alerte
<br>
En envoyer une autre

How do I make a div with :hover stay in hover state on click?

I'm not exactly sure how to ask this question but basically, I have a div with a button with some :hover state in CSS, however, I want that upon clicking the button, it will stay on the hovered state, is this possible?
My Code
#englishbutton {
width:200px;
height:50px;
font-family: 'Raleway', sans-serif;
margin:0px 20px 20px 20px;
border:none;
outline:none;
background-color:#F16D71;
color:#FFFFFF;
transition: .3s background-color;
text-align:center;
font-size:20px;
border-radius:15px;
}
#englishbutton:hover {
background-color:#F5999C;
color:#FFFFFF;
cursor:pointer;
}
<div id="actionsection">
<input name="englishbutton" type="button" id="englishbutton" value="ENGLISH">
</div>
I have tried searching for similar questions and one of them said to use :focus state but it does not work, any help would be much appreicated!

There are numerous way to do this:
You can use :focus:
#englishbutton {
width:200px;
height:50px;
font-family: 'Raleway', sans-serif;
margin:0px 20px 20px 20px;
border:none;
outline:none;
background-color:#F16D71;
color:#FFFFFF;
transition: .3s background-color;
text-align:center;
font-size:20px;
border-radius:15px;
}
#englishbutton:hover, #englishbutton:focus {
background-color:#F5999C;
color:#FFFFFF;
cursor:pointer;
}
<div id="actionsection">
<input name="englishbutton" type="button" id="englishbutton" value="ENGLISH">
</div>
Using jQuery you can add the background on click of the button using css() method:
$('#englishbutton').on('click', function(){
$(this).css('background', '#F5999C');
});
#englishbutton {
width:200px;
height:50px;
font-family: 'Raleway', sans-serif;
margin:0px 20px 20px 20px;
border:none;
outline:none;
background-color:#F16D71;
color:#FFFFFF;
transition: .3s background-color;
text-align:center;
font-size:20px;
border-radius:15px;
}
#englishbutton:hover {
background-color:#F5999C;
color:#FFFFFF;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="actionsection">
<input name="englishbutton" type="button" id="englishbutton" value="ENGLISH">
</div>
Or you can use addClass() method to add a styled active class like this:
$('#englishbutton').on('click', function() {
$(this).addClass('active');
});
#englishbutton {
width: 200px;
height: 50px;
font-family: 'Raleway', sans-serif;
margin: 0px 20px 20px 20px;
border: none;
outline: none;
background-color: #F16D71;
color: #FFFFFF;
transition: .3s background-color;
text-align: center;
font-size: 20px;
border-radius: 15px;
}
#englishbutton:hover, #englishbutton.active {
background-color: #F5999C;
color: #FFFFFF;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="actionsection">
<input name="englishbutton" type="button" id="englishbutton" value="ENGLISH">
</div>

div:active
only stay when the mouse is clicked,
use
div:focus
instead

If you want the appearance to stay after the user clicks elsewhere on the page (an <input> element, etc.) you can set a class when the button is clicked, and use that for styling:
var el = $('#englishbutton');
el.click(
function() {
el.addClass('clickedbutton');
}
);
#englishbutton {
width: 200px;
height: 50px;
font-family: 'Raleway', sans-serif;
margin: 0px 20px 20px 20px;
border: none;
outline: none;
background-color: #F16D71;
color: #FFFFFF;
transition: .3s background-color;
text-align: center;
font-size: 20px;
border-radius: 15px;
}
#englishbutton:hover,
#englishbutton.clickedbutton {
background-color: #F5999C;
color: #FFFFFF;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="actionsection">
<input name="englishbutton" type="button" id="englishbutton" value="ENGLISH">
</div>
<input value="Focus here after clicking" />

You can also do it with a javascript to change make the hover formatting onclick like
<style>
.englishbutton {
width: 200px;
height: 50px;
font-family: 'Raleway', sans-serif;
margin: 0px 20px 20px 20px;
outline: none;
background-color: #F16D71;
color: #FFFFFF;
transition: .3s background-color;
text-align: center;
font-size: 20px;
border-radius: 15px;
}
.englishbutton:hover {
background-color: #F5999C;
color: #FFFFFF;
cursor: pointer;
}
</style>
<div>
<input id="button" type="button" class="englishbutton" value="ENGLISH" onclick="var s= document.getElementById('button');
s.style.backgroundColor='#F5999C';x.style.color='#ffffff';
" />
</div>

vertical to horizontal navigation

I have a problem to convert this below navigation bar from vertical to horizontal.
http://codepen.io/anon/pen/bdpRjx
Who could help me to take a look on my code. Here is my CSS but the effect and size are chaotic.
*{
box-sizing: border-box;
}
body{
height:100%;
background-color: #444;
}
h1{
font-size:1em;
text-align:center;
color: #eee;
letter-spacing:1px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.nav-container{
width:100%;
margin-top:10px;
box-shadow: 0 2px 2px 2px black;
transition: all 0.3s linear;
}
.nav{
list-style-type:none;
margin:0;
padding:0;
}
li{
height:50px;
width: 300px;
position:relative;
background: linear-gradient(#292929, #242424);
display: inline;
}
ul{
float:left;
width: 100%;
}
a {
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
text-decoration:none;
display:inline;
height:100%;
width:300px;
line-height:50px;
color:#bbb;
text-transform: uppercase;
font-weight: bold;
border-left:5px solid transparent;
letter-spacing:1px;
transition: all 0.3s linear;
}
.active a{
color: #B93632;
border-left:5px solid #B93632;
background-color: #1B1B1B;
outline:0;
width: 200px;
}
li:not(.active):hover a{
color: #eee;
border-left: 5px solid #FCFCFC;
background-color: #1B1B1B;
}
span[class ^= "icon"]{
position:absolute;
left:20px;
font-size: 1.5em;
transition: all 0.3s linear;
}
Thank you very much for any suggestion.
Regards
Ryan

Apologies in advance if this is in no way what you meant, but I think all you want to do, basically, is set the list item display to inline-block. Something like this:
.nav-container li {
box-shadow: 0 2px 2px 2px black;
display: inline-block;
width: 300px;
}
You'd need to remove the box shadow and width from .nav-container and put it here instead.
You're obviously going to see a lot of issues on smaller screens if that's all you do, but maybe that gets you started?

Label Error in css

I have a form of textboxes with validation.
It is working fine if we click the save button first time it showing correctly. But once if we fill the text boxes and then remove the text from text boxes it is error message is getting displayed on text boxes. please see this fiddle:
http://jsfiddle.net/9fYxb/2/
CSS:
#field
{
margin-left: .5em;
float: right;
}
#field, label
{
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
br
{
clear: both;
}
input
{
border: 1px solid black;
margin-bottom: .5em;
width: 72px;
}
input.error
{
border: 1px solid red;
}
label.error
{
position:fixed;
Background-image:url("../images/unchecked.jpg");
background-repeat:no-repeat;
padding-left: 20px;
margin-left: .3em;
vertical-align:middle;
background-color: #FFEBE8;
border: solid 1px red;
width:210px;
height:15px;
}
label.valid
{
position:absolute;
Background-image:url("../images/checked.gif") ;
background-repeat:no-repeat;
padding-left: 20px;
margin-left: .3em;
vertical-align:top;
background-color:White;
border:none;
width:1px;
height: 16px;
}

Do you need float left for #field and label?
#field, label {
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
If you remove that and also remove position form label error and label valid:
http://jsfiddle.net/kimiliini/8SM7f/
Also, you would probably want to fix the mobile number check. Your current:
/[789]\d{9}$/
Would validate
// This as OK
7111111111
// But this would also validate this as OK:
123155551333321212121521251215421212487884655487111111111
Try using:
/^[789]\d{9}$/
The ^ denotes start of string.
Background-image is also bad. The CSS property does not have capital B.

Change your CSS for label.error from:
label.error
{
position:absolute;
Background-image:url("../images/unchecked.jpg");
background-repeat:no-repeat;
padding-left: 20px;
margin-left: .3em;
vertical-align:middle;
background-color: #FFEBE8;
border: solid 1px red;
width:210px;
height:15px;
}
to:
label.error
{
clear:both;
float:right;
Background-image:url("../images/unchecked.jpg");
background-repeat:no-repeat;
padding-left: 20px;
margin-left: .3em;
vertical-align:middle;
background-color: #FFEBE8;
border: solid 1px red;
width:210px;
height:15px;
}

transition between HTML Pages using jQuery?

I am using this code for transition between my HTML pages and it works just fine:
http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
But there is tiny issue that I cannot resolve and that is the blank white background shown between fade in and fade out transitions.
basically when the page is faded out and the code is trying to the load the next page, there is a slight delay (almost 1 seconds) and in that 1 second gap a blank white screen is shown. I know that I have to use some CSS and i added this to my HTML css code:
html{
font-size: 100%;
background-color:#000;
}
but when i do that, a black line is shown on the loaded page for some strange reason!
is there anyway to eliminate the 1 second delay or eliminate the black line on the page as i really don't know what is causing the issue?
Here is my Entire CSS code:
<style type="text/css" media="screen">
html{
font-size: 100%;
background-color:#000;
}
#maximage {
/* position:fixed !important;*/
}
#container{
overflow:hidden;
}
#footer{
color:#FFF;
text-align:left;
}
/*Set my logo in bottom left*/
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
#txt1 {
top:55%;
height:auto;
left:5%;
position:absolute;
width:55%;
z-index:1000;
color:#FFF;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
}
#txt2 {
top:59%;
height:auto;
left:5%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
}
#txt3 {
top:63%;
height:auto;
left:5%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
}
#txt4{
top:22%;
height:auto;
left:3%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
margin-top:4%;
float:left;
}
#txt5{
height:auto;
width:100%;
z-index:1000;
color:#fff;
font-size:4%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
text-align:center;
}
#logo img {
width:69%;
}
body {
background-color:#000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font: 16px/1.8 sans-serif;
font-family:Verdana, Geneva, sans-serif;
}
#preloader{
position:absolute;
top: 45%;
left: 75%;
width:278px;
height: 105px;
margin-top: -45px;
margin-left: -210px;
z-index:1000;
}
#wait{
position:absolute;
top: 37%;
left: 45%;
width:300px;
height: 113px;
margin-top: -45px;
margin-left: -120px;
z-index:1000;
}
h1 {
text-align: left;
color:#fff;
font: 16px/1 "Verdana, Geneva, sans-serif";
display: inline-block;
width: 100%;
font-family:Verdana, Geneva, sans-serif;
}
#wrap {
position: relative;
width: 39%;
margin: 0 auto;
height:50%;
overflow: hidden;
}
#navigation{
margin-left:2%;
margin-top:2%;
}
#home{
width:10%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
}
#products{
width:10%;
margin-bottom:0.5%;
text-align:center;
}
a:link { text-decoration:none;} /* unvisited link */
a:visited { text-decoration:none;} /* visited link */
a:hover {
text-decoration:none;
} /* mouse over link */
a:active { text-decoration:none;} /* selected link */
#div101:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
padding: 20px;
border-radius: 15px;
/* HOVER ON */
-webkit-transition: border-radius 2s;
transition:all 2s ease-in-out;
perspective: 800px;
}
#div102:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
/* Landscape */
#media screen and (orientation:landscape) {
#logo{
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
#preloader{
position:absolute;
top: 45%;
left: 55%;
width:278px;
height: 105px;
margin-top: -45px;
margin-left: -210px;
z-index:1000;
}
}
#media screen and (max-width: 600px) , screen and (max-height: 700px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
#media screen and (max-width: 4000px) , screen and (max-height: 2000px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
#media only screen and (min-width : 321px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
#media only screen and (max-width : 321px) {
#footer {
font-size:10px;
text-align: left;
margin-left:10%;
margin-bottom:5%;
font-family:Verdana, Geneva, sans-serif;
width:42%;
}
#home{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#products{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
font-weight:bold;
color:#fff;
border:#666;
border:2px solid;
}
#vodka{
background-color:#C0C0C0;
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#contact{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#div101:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
padding: 5px;
border-radius: 5px;
/* HOVER ON */
-webkit-transition: border-radius 1s;
transition:all 1s ease-in-out;
perspective: 800px;
}
}
#media only screen and (min-width : 321px) {
#footer {
font-size:13px;
text-align:left;
margin-left:5%;
margin-bottom:10%;
font-family:Verdana, Geneva, sans-serif;
width:30%;
}
#home{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#products{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#vodka{
background-color:#C0C0C0;
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#contact{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
.rotate{
cursor:pointer;
}
.rotate:hover
{
background-color:#da2128;
}
}
#keyframes filleffect
{
from {width:0;}
to {width: 400px;}
}
#-webkit-keyframes filleffect /* Safari and Chrome */
{
from {width:0;}
to {width: 400px;}
}
</style>

I suspect the reason you are getting a black line is because your html tag contains no content in between page transitions, so what you are seeing is in fact the dark background of a very narrow page. Try adding height: 100%; min-height: 100% to your html tag to force the page to be full height.

Categories

Resources