Marin
Reputation: 73
Links does not work in FIrefox, but in chrome it works perfectly
people. my links do not work properly on firefox, but on chrome they are good. I've tried all the tips from here, but nothing helped. I can't find the issue. I tried to delete #position:relative#, also I've tried to change #z-index#. I don't understand because in chrome it works very well, but Firefox.
table
{
border-collapse: collapse;
border-spacing: 0;
}
a
{
text-decoration:none;
color:black;
transition-duration:1s;
}
body,div
{
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6
{
font-size: 100%;
font-weight: normal;
}
/*-------Resets above-----*/
/*-----Styles for Html website-----*/
#wrapper
{
width: 100%;
height:100%;
background:linear-gradient(#6699ff,#99ccff,#ccffff);
margin-left: auto;
margin-right:auto;
overflow:hidden;
}
#logo
{
font-size: 40px;
font-weight:bold;
font-family:Impact, Charcoal, sans-serif;
font-style:italic;
width:1200px;
height:70px;
margin-right:auto;
margin-left:auto;
text-align:left;
}
.button
{
position: relative;
margin-top: 380px;
margin-left:1100px;
width:150px;
height:75px;
z-index:1;
background-image:url('images/new_year_background');
border-radius:20px;
border:2px solid #33ff99;
font-size: 20px;
transition-duration: 1s;
cursor: pointer;
text-decoration:none;
}
.button:hover
{
background-color:#33ffff;
}
.button a:hover
{
cursor: pointer;
color:white;
}
/*--------navigation and buttons-----------*/
nav
{
position: relative;
margin-top:30px;
margin-right:75px;
z-index:1;
}
.menu1
{
margin-left:auto;
margin-right:auto;
width:1350px;
}
.button1
{
height:50px;
width:100px;
background-color:#33ff66;
cursor:pointer;
border:1px solid #00cc66;
color:white;
font-size:15px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
display:inline-block;
transition-duration:1s;
float:right;
border-radius:10px 0 0 10px;
}
.button3
{
height:50px;
width:100px;
background-color:#33ff66;
cursor:pointer;
border:1px solid #00cc66;
color:white;
font-size:15px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
display:inline-block;
transition-duration:1s;
float:right;
border-radius:0 10px 10px 0;
}
.button2
{
height:50px;
width:100px;
background-color:#33ff66;
cursor:pointer;
border:1px solid #00cc66;
color:white;
font-size:15px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
display:inline-block;
transition-duration:1s;
float:right;
}
.button1:hover
{
background-color:#99ff66;
}
.button1 a:hover
{
color:white;
}
.button2:hover
{
background-color:#99ff66;
}
.button2 a:hover
{
color:white;
}
.button3:hover
{
background-color:#99ff66;
}
.button3 a:hover
{
color:white;
}
/*------End of the navigation-----*/
#first
{
border-radius:20px;
position: relative;
width: 1300px;
height:500px;
background-image:url('images/symphony.png');
margin-left: auto;
margin-right:auto;
margin-top:10px;
border: 2px solid #3366ff;
}
#sec
{
color:red;
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/new_year_background.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
border: 2px solid #3366ff;
}
#tre
{
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/swirl_pattern.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
border: 2px solid #3366ff;
}
#quad
{
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/logo_x_pattern.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
border: 2px solid #3366ff;
}
#fiv
{
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/ignasi_pattern_s.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
border: 2px solid #3366ff;
}
#sex
{
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/confectionary.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
border: 2px solid #3366ff;
}
#sev
{
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/restaurant.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
border: 2px solid #3366ff;
}
footer h3
{
width:100%;
text-align:center;
}<!doctype html>
<html>
<head>
<title>My Guide to Success</title>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; scale=1" />
<link href="style.css" type="text/css" rel="stylesheet" >
</head>
<body>
<div id="wrapper">
<div class="menu1">
<nav>
<button class="button3"><a href="#">Fith</a></button>
<button class="button2"><a href="#">Fourth</a></button>
<button class="button2"><a href="#">Third</a></button>
<button class="button2"><a href="#">Second</a></button>
<button class="button1"><a href="#">First</a></button>
</nav>
</div>
<div id="logo"><h1><a href="#sev">My Guide To Success</a></h1></div>
<div id="first"><button class="button"><a href="#sec"><h2>Next Step</h2></a></button></div>
<div id="sec"><button class="button"><a href="#tre"><h2>Next Step</h2></a></button></div>
<div id="tre"><button class="button"><a href="#quad"><h2>Next Step</h2></a></button></div>
<div id="quad"><button class="button"><a href="#fiv"><h2>Next Step</h2></a></button></div>
<div id="fiv"><button class="button"><a href="#sex"><h2>Next Step</h2></a></button></div>
<div id="sex"><button class="button"><a href="#sev"><h2>Next Step</h2></a></button></div>
<div id="sev"><button class="button"><a href="#logo">To Top</a></button></div>
</div>
</body>
<footer>
<h3>Copyright © Marin KapranoFF - 2016</h3>
</footer>
</html>Upvotes: 0
Views: 54
Answers (1)
meverson
Reputation: 318
Anchors inside buttons behave differently in Firefox. I'd recommend removing the <button> wrapper and styling the anchor with CSS:
<div id="first">
<a href="#sec" class="your-button-styles"><h2>Next Step</h2></a>
</div>
You generally don't need to place a button inside an anchor, the anchor already handles a click event to navigate you to the href.
Upvotes: 2