Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
Hello so im trying to do dropdown menu by clicking on button but its elements are way to big , what im I doing wrong? I realy im like going insane, can you please help me in this art that is coding ?
It doesnt have any problem just that its ugly
edit: i have updated and posted full css code to see if u guys can help me
html {
background: #e6e9e9;
background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);
-webkit-font-smoothing: antialiased;
}
body {
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
color: #545454;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 7.5;
margin: 0 auto;
padding: 2em 2em 4em;
}
.button {
background-color: #4a7bb5;
border: none;
color: white;
padding: 5px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: cute;
font-size: 32px;
}
.button:hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
background-color: #4a7bb5;
border: none;
color: white;
padding: 5px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: cute;
font-size: 32px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
p {
font-size: 20px;
font-weight: 500;
color: #52d6ff;
}
h1, h2, h3, h4, h5, h6 {
color: #237543;
font-weight: 600;
line-height: 0;
font-size: 50px;
}
hr { display: block; height: 1px;
border: 1; border-top: 1px solid #ccc;
margin: 1em 0; padding: 0; }
h2 {
margin-top: 1.3em;
}
a {
color: #0083e8;
}
b, strong {
font-weight: 600;
}
samp {
display: none;
}
img {
background: transparent;
}
#keyframes colorize {
0% {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
100% {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
}
#font-face {
font-family:cute;
src: url(cute.ttf);
}
#font-face {
font-family:opensans;
src: url(opensans.ttf);
}
<HR size=2 style="color: aqua"></HR>
<button class="button" onclick="mainpage();">Main Page</button>
<div class="dropdown">
<button class="button">Art</button>
<div class="dropdown-content">
Acrilic
Carvão
Paint
</div>
</div>
Your <body> has a line-height: 7.5 style which is getting inherited by your dropdown's anchor tags.
Either remove this style, or otherwise reset it at some point between your <body> and .dropdown-content a elements. For example:
.dropdown {
...
line-height: normal;
}
html {
background: #e6e9e9;
background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);
-webkit-font-smoothing: antialiased;
}
body {
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
color: #545454;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 7.5;
margin: 0 auto;
padding: 2em 2em 4em;
}
.button {
background-color: #4a7bb5;
border: none;
color: white;
padding: 5px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: cute;
font-size: 32px;
}
.button:hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
background-color: #4a7bb5;
border: none;
color: white;
padding: 5px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: cute;
font-size: 32px;
}
.dropdown {
position: relative;
display: inline-block;
line-height: normal;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
p {
font-size: 20px;
font-weight: 500;
color: #52d6ff;
}
h1, h2, h3, h4, h5, h6 {
color: #237543;
font-weight: 600;
line-height: 0;
font-size: 50px;
}
hr { display: block; height: 1px;
border: 1; border-top: 1px solid #ccc;
margin: 1em 0; padding: 0; }
h2 {
margin-top: 1.3em;
}
a {
color: #0083e8;
}
b, strong {
font-weight: 600;
}
samp {
display: none;
}
img {
background: transparent;
}
#keyframes colorize {
0% {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
100% {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
}
#font-face {
font-family:cute;
src: url(cute.ttf);
}
#font-face {
font-family:opensans;
src: url(opensans.ttf);
}
<HR size=2 style="color: aqua"></HR>
<button class="button" onclick="mainpage();">Main Page</button>
<div class="dropdown">
<button class="button">Art</button>
<div class="dropdown-content">
Acrilic
Carvão
Paint
</div>
</div>
Related
I'm trying to build a small support website for a community. Now I have tried to recreate my dropdown, several times but I can't see where it goes wrong.
When I code it everything works normal, problem is when I put it together with navbar, something is pushing the text to the right, and generate a small box on the left so the menu wouldn't be right below.
.subbtn {
font-family: Arial;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
padding: 14px;
}
.submenu {
position: relative;
display: inline-block;
}
.submenu-content {
display: none;
position: absolute;
min-width: 86px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
}
.submenu-content a {
color: #0d0d0d;
padding: 14px;
text-decoration: none;
display: block;
}
.submenu:hover .submenu-content {
display: block;
}
.submenu:hover .subbtn {
color: white;
background: #403c36;
opacity: 0.8;
}
.navbar_1 {
font-family: Arial;
font-size: 14px;
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar_item {
display: block;
text-transform: uppercase;
font-weight: bold;
}
.navbar_1 a {
display: inline-block;
text-align: center;
text-decoration: none;
padding: 14px;
color: #0d0d0d;
}
.navbar_1 a:hover {
color: white;
background: #403c36;
opacity: 0.8;
}
<ul class="navbar_1">
<li class="navbar_item">
nyheder
<div class="submenu">
<div class="subbtn">information</div>
<ul class="submenu-content">
regler
vedtægter
Hvem er vi
bestyrelsen
</ul>
</div>
bliv medlem
medlemsfordele
kontakt
</li>
</ul>
If I'm understanding correctly, the solution is very simple.
As isherwood mentioned, a list comes with a default padding on the left.
My advice is, to give your <ul> element a fixed padding by adding this to your CSS:
ul {
padding: 4px; // or 0; if you prefer controlling the padding through the list items
}
That should do the trick!
If that's not wat you meant, please be more specific in your topic (by using screenshots for example)
.subbtn {
font-family: Arial;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
padding: 14px;
}
.submenu {
position: relative;
display: inline-block;
}
.submenu-content {
display: none;
position: absolute;
min-width: 86px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
padding: 4px; /* <----------------------------------------- HERE */
}
.submenu-content a {
color: #0d0d0d;
padding: 14px;
text-decoration: none;
display: block;
}
.submenu:hover .submenu-content {
display: block;
}
.submenu:hover .subbtn {
color: white;
background: #403c36;
opacity: 0.8;
}
.navbar_1 {
font-family: Arial;
font-size: 14px;
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar_item {
display: block;
text-transform: uppercase;
font-weight: bold;
}
.navbar_1 a {
display: inline-block;
text-align: center;
text-decoration: none;
padding: 14px;
color: #0d0d0d;
}
.navbar_1 a:hover {
color: white;
background: #403c36;
opacity: 0.8;
}
<ul class="navbar_1">
<li class="navbar_item">
nyheder
<div class="submenu">
<div class="subbtn">information</div>
<ul class="submenu-content">
regler
vedtægter
Hvem er vi
bestyrelsen
</ul>
</div>
bliv medlem
medlemsfordele
kontakt
</li>
</ul>
There is such an authorization code, when the page is reduced in the preview, everything is fine and beautiful, but if you go from a mobile device, we see a very large resolution, and everything is very small
<style>
#import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852; /* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, #8DC26F);
background: -moz-linear-gradient(right, #76b852, #8DC26F);
background: -o-linear-gradient(right, #76b852, #8DC26F);
background: linear-gradient(to left, #7e8794, #8DC26F);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fail{
font-size: 15px;
color: red;
margin: 10px;
}
.form input#reg {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
margin-top: 10px;
}
.form input#reg:hover,.form input#reg:active,.form input#reg:focus {
background: #43A047;
}
</style>
<html><head>
<title>Авторизация </title>
<link rel="stylesheet" href="css/form.css" type="text/css">
</head>
<body><div class="login-page">
<div class="form">
<form class="login-form" method="POST">
<input type="text" name="login" placeholder="Логин">
<input type="password" name="password" placeholder="Пароль">
<div class="fail"></div>
<button name="submit" type="submit">Войти</button>
<input id="reg" type="button" onclick="location.href='https://google.com';" value="Регистрация (Telegram)">
</form>
</div>
</div>
</body></html>
I can’t publish any details, but I have already described them all, please help, who knows the solution to the problem, I will be grateful
the div doesn't appear when I hover on a button, but I've used the specified code in w3schools.com. What's wrong?
Here's my code:
html {
scroll-behavior: smooth;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
font-family: 'Raleway', sans-serif;
overflow: hidden;
background-color: rgba(84, 148, 251, 0.8);
color: white;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: right;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transition: 0.3s;
font-weight: 600;
}
.navbar a:hover {
color: rgb(239, 102, 84);
}
#calltoaction {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 17px;
margin-top: -5px;
cursor: pointer;
background-color: rgb(239, 102, 84);
color: black;
border: rgb(239, 102, 84) solid 2px;
transition: 0.3s;
text-transform: uppercase;
}
#calltoaction:hover {
background-color: black;
color: rgb(239, 102, 84);
border: black solid 2px
}
.welcome {
background-color: #333;
width: 100%;
padding: 0px;
color: white;
height: 150px;
}
#aloha {
font-family: 'Raleway', sans-serif;
margin-top: 55px;
}
.myparallax {
width: 100%;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url('https://images.squarespace-cdn.com/content/v1/5a26f15fb1ffb6e7c318f710/1516126345399-VIK735PVAIS4BCH4COUE/ke17ZwdGBToddI8pDm48kFmfxoboNKufWj-55Bgmc-J7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iXS6XmVv7bUJ418E8Yoc1hjuviiiZmrL38w1ymUdqq4JaGeFUxjM-HeS7Oc-SSFcg/MalindaKathleenReese.jpg?format=1500w');
height: 100px;
}
.why-you-join {
background-color: #333;
color: white;
font-family: 'Raleway', sans-serif;
margin-top: -50px;
}
#what-dyaget {
background-color: #666;
color: white;
font-family: 'Raleway', sans-serif;
margin-top: -21px;
height: 600px;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}
.price .header {
background-color: #000;
color: white;
font-size: 25px;
text-transform: uppercase;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
color: black;
}
.button {
border: rgb(239, 102, 84) solid 2px;
background-color: rgb(239, 102, 84);
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
transition: 0.3s;
}
.button:hover {
background-color: transparent;
color: rgb(239, 102, 84);
}
.row {
height: 520px;
}
.myparallax-2 {
width: 100%;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url('https://vignette.wikia.nocookie.net/malinda/images/f/f3/TranslatorFails.jpg/revision/latest/scale-to-width-down/350?cb=20190920184709');
height: 100px;
margin-top: 20px !important;
}
#faq {
background-color: #333;
color: white;
font-family: 'Raleway', sans-serif;
margin-top: -50px;
}
.question-column {
float: left;
width: 33.33%;
padding: 10px;
}
.question-row:after {
content: "";
display: table;
clear: both;
}
#q {
text-transform: uppercase;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
}
#a {
text-align: justify;
}
#trialrequest,
#trialrequest-2 {
border: none
}
#trialrequest:hover {
border: none;
box-shadow: 5px 7px #5494fb;
background-color: #666;
color: white;
}
#trialrequest-3 {
display: none;
}
#media only screen and (max-width: 992px) {
#trialrequest-3 {
display: none;
}
#what-dyaget {
height: 2100px;
}
.row {
height: 1440px;
}
.columns {
width: 100%;
}
.question-column {
width: 100%;
}
.myparallax-2 {
margin-top: 80px !important;
}
}
#media only screen and (max-width: 375px) {
.myparallax-2 {
margin-top: 80px !important;
}
#trialrequest-3 {
display: none;
}
}
#media only screen and (max-width: 374px) {
#trialrequest-2 {
border-radius: 0;
display: none;
}
#trialrequest-3 {
display: block;
border-radius: 25px;
font-weight: 700;
}
#trialrequest-3:hover {
background-color: rgba(249, 112, 110);
color: white;
border: solid 2px rgba(249, 112, 110)
}
}
#moreinfo {
color: white;
transition: 0.3s;
}
#moreinfo:hover {
color: rgba(255, 255, 255, 0.8) !important
}
q {
font-size: 20px;
}
#trialrequest-2 {
border-radius: 25px;
}
#trialrequest-2:hover {
background-color: rgba(249, 112, 110);
color: white;
}
.dropdown {
display: none;
z-index: 5;
width: 130px;
position: fixed;
top: 50px;
right: 19.5px;
background: black;
color: white;
padding: 0;
}
.dropdown ul {
list-style-type: none;
margin-left: -40px;
}
.dropdown ul a {
font-family: 'Raleway', sans-serif;
}
.dropdown ul li {
padding-top: 5px !important;
padding-bottom: 5px !important;
padding-left: 10px;
cursor: pointer;
}
.dropdown ul li:hover {
background-color: rgb(25, 25, 25)
}
.myDIV:hover .hide {
display: initial;
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>MALINDA community</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar">
<a><button id="calltoaction">Join / Log In</button></a>
FAQ
Pricing
</div>
<div class="dropdown">
<ul>
<li><a>Login</a></li>
<li><a>Join</a></li>
</ul>
</div>
</body>
</html>
As I've said before, this dropdown is made as said in the w3schools.com site.
If you adjust your HTML to place the hidden dropdown directly after the nav item you want it to interact with, then you can add the CSS rule:
/* show the dropdown when hovering on the nav item */
.navbar a:hover + .dropdown,
/* show the dropdown when hovering on the hidden items */
.dropdown:hover {
display: initial;
}
to display the hidden dropdown when you hover over the nav item.
Note that this currently doesn't have keyboard/accessibility support, this is just a slightly modified version of the code you're currently working with that does work correctly with a mouse.
html {
scroll-behavior: smooth;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
font-family: 'Raleway', sans-serif;
background-color: rgba(84, 148, 251, 0.8);
color: white;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: right;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transition: 0.3s;
font-weight: 600;
}
.navbar a:hover {
color: rgb(239, 102, 84);
}
#calltoaction {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 17px;
margin-top: -5px;
cursor: pointer;
background-color: rgb(239, 102, 84);
color: black;
border: rgb(239, 102, 84) solid 2px;
transition: 0.3s;
text-transform: uppercase;
}
#calltoaction:hover {
background-color: black;
color: rgb(239, 102, 84);
border: black solid 2px
}
.welcome {
background-color: #333;
width: 100%;
padding: 0px;
color: white;
height: 150px;
}
#aloha {
font-family: 'Raleway', sans-serif;
margin-top: 55px;
}
.myparallax {
width: 100%;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url('https://images.squarespace-cdn.com/content/v1/5a26f15fb1ffb6e7c318f710/1516126345399-VIK735PVAIS4BCH4COUE/ke17ZwdGBToddI8pDm48kFmfxoboNKufWj-55Bgmc-J7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iXS6XmVv7bUJ418E8Yoc1hjuviiiZmrL38w1ymUdqq4JaGeFUxjM-HeS7Oc-SSFcg/MalindaKathleenReese.jpg?format=1500w');
height: 100px;
}
.why-you-join {
background-color: #333;
color: white;
font-family: 'Raleway', sans-serif;
margin-top: -50px;
}
#what-dyaget {
background-color: #666;
color: white;
font-family: 'Raleway', sans-serif;
margin-top: -21px;
height: 600px;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}
.price .header {
background-color: #000;
color: white;
font-size: 25px;
text-transform: uppercase;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
color: black;
}
.button {
border: rgb(239, 102, 84) solid 2px;
background-color: rgb(239, 102, 84);
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
transition: 0.3s;
}
.button:hover {
background-color: transparent;
color: rgb(239, 102, 84);
}
.row {
height: 520px;
}
.myparallax-2 {
width: 100%;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url('https://vignette.wikia.nocookie.net/malinda/images/f/f3/TranslatorFails.jpg/revision/latest/scale-to-width-down/350?cb=20190920184709');
height: 100px;
margin-top: 20px !important;
}
#faq {
background-color: #333;
color: white;
font-family: 'Raleway', sans-serif;
margin-top: -50px;
}
.question-column {
float: left;
width: 33.33%;
padding: 10px;
}
.question-row:after {
content: "";
display: table;
clear: both;
}
#q {
text-transform: uppercase;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
}
#a {
text-align: justify;
}
#trialrequest,
#trialrequest-2 {
border: none
}
#trialrequest:hover {
border: none;
box-shadow: 5px 7px #5494fb;
background-color: #666;
color: white;
}
#trialrequest-3 {
display: none;
}
#media only screen and (max-width: 992px) {
#trialrequest-3 {
display: none;
}
#what-dyaget {
height: 2100px;
}
.row {
height: 1440px;
}
.columns {
width: 100%;
}
.question-column {
width: 100%;
}
.myparallax-2 {
margin-top: 80px !important;
}
}
#media only screen and (max-width: 375px) {
.myparallax-2 {
margin-top: 80px !important;
}
#trialrequest-3 {
display: none;
}
}
#media only screen and (max-width: 374px) {
#trialrequest-2 {
border-radius: 0;
display: none;
}
#trialrequest-3 {
display: block;
border-radius: 25px;
font-weight: 700;
}
#trialrequest-3:hover {
background-color: rgba(249, 112, 110);
color: white;
border: solid 2px rgba(249, 112, 110)
}
}
#moreinfo {
color: white;
transition: 0.3s;
}
#moreinfo:hover {
color: rgba(255, 255, 255, 0.8) !important
}
q {
font-size: 20px;
}
#trialrequest-2 {
border-radius: 25px;
}
#trialrequest-2:hover {
background-color: rgba(249, 112, 110);
color: white;
}
.dropdown {
display: none;
z-index: 5;
width: 130px;
position: fixed;
top: 50px;
right: 19.5px;
background: black;
color: white;
padding: 0;
}
.dropdown ul {
list-style-type: none;
margin-left: -40px;
}
.dropdown ul a {
font-family: 'Raleway', sans-serif;
}
.dropdown ul li {
padding-top: 5px !important;
padding-bottom: 5px !important;
padding-left: 10px;
cursor: pointer;
}
.dropdown ul li:hover {
background-color: rgb(25, 25, 25)
}
.myDIV:hover .hide {
display: initial;
color: red;
}
.navbar a:hover+.dropdown,
.dropdown:hover {
display: initial;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>MALINDA community</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar">
<a><button id="calltoaction">Join / Log In</button></a>
<div class="dropdown">
<ul>
<li><a>Login</a></li>
<li><a>Join</a></li>
</ul>
</div>
FAQ
Pricing
</div>
</body>
</html>
I'm having troubles with my new website in Wordpress. I have selected a theme and I have overwritten some styles. I have used also Visual Composer. In Google Chrome it's perfect or with some small pixel perfect, but when I see it on Firefox all is a mess! xO I was searching and checking each detail but I couldn't find nothing, so..I think that more heads can thinking more efficiently.
The site is Crescor Travel
Here a screenshot with error:
I think that the error can be in margins. Somebody know if there's problem with margin?
The CSS code is...
/**
* LAYOUT CONTENT
*/
section.content { padding: 0; }
/**
* TYPOGRAPHIC
*/
*, body { font-family: "proxima-nova", sans-serif !important; }
h1,
h2,
h3 {
line-height: 36px;
color: #202226 !important;
}
h1 {
font-size: 3rem !important;
}
h2 {
font-size: 2.25rem !important;
}
h3 {
font-size: 2rem !important;
}
p {
font-size: 1rem;
}
strong { color: #202226; }
article {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
i {
font-style: normal !important;
}
/**
* HEADER SECTION
*/
.title_section {
text-align: center;
font-weight: normal;
}
.caption_section {
font-size: 1.125rem;
color: #747980;
line-height: 30px;
text-align: center !important;
margin: 0 400px;
margin-top: 30px;
margin-bottom: 71px !important;
letter-spacing: 0;
}
.fullscreen-container,
.fullwidthbanner-container {
height: 100% !important;
}
body div.title_container {
margin-top: 66%!important;
margin-left: -22.5%!important;
}
.subheader-title-holder {
padding: 0 30% 0 9.5% !important;
}
.main-title {
text-align: left!important;
font-weight: 300!important;
font-size: 3rem!important;
margin-left: -18px!important;
}
.main-title span { font-weight: bold !important; }
h1.title_page {
color: #fff!important;
margin-bottom: 22px !important;
line-height: 54px!important;
font-weight: 300;
letter-spacing: 2px!important;
}
h1.title_page strong {
font-size: 3rem !important;
color: #fff!important;
font-weight: 600!important;
letter-spacing: 1px!important;
}
p.caption_page {
font-size: 1.25rem !important;
line-height: 36px !important;
font-weight: normal!important;
letter-spacing: -0.6px!important;
margin: 30px 0 60px !important;
}
div#slide-4-layer-2 {
margin-top: 110px !important;
margin-left: -70%!important;
width: 170px;
color: #E74C3C!important;
font-size: 12px!important;
font-weight: bold!important;
background-color: #fff!important;
line-height: 30px!important;
text-align: center!important;
}
.bruno-subheader-wraper {
overflow: visible!important;
}
/**
* NAV SECTION
*/
#bruno-head {
z-index: 999;
}
.dpr-fullwidth {
padding-left: 8.4%!important;
padding-right: 8.4%!important;
}
.imageLogo .logo-default {
padding: 40px 0 0 0;
height: 15px !important;
width: 138px !important;
}
body .bruno-sticky-navigation-wrapper li:last-child a {
border: 1px solid #e8e8e8 !important;
padding: 6px 0 !important;
}
body .bruno-sticky-navigation-wrapper li:last-child a:hover { background-color: #ea314a!important; }
body .bruno-sticky-navigation-wrapper li:last-child a .menu-title:hover { color: #fff!important; }
body div#bruno-navigation-wrapper .bruno-sticky-navigation-wrapper .sf-menu li.root a:hover {
color: #fff !important;
border: none!important;
}
body .bruno-sticky-navigation-wrapper .sf-menu li.root a .menu-title:hover { color: #000; }
body #bruno-navigation-wrapper.bruno-sticky-navigation-wrapper .sf-menu li.root.current-menu-item a { color: #EA314A!important; }
body .bruno-sticky-navigation-wrapper li:last-child a .menu-title { color: #E74C3C !important; }
.imageLogo .logo-sticky { padding-top: 26px; }
.sf-menu li a {
padding: 36px 0 36px 0;
font-size: 0.75rem !important;
color: #fff !important;
font-weight: 600 !important;
text-transform: uppercase;
}
body #bruno-navigation-wrapper .sf-menu li.root a:hover,
.current-menu-item a {
font-weight: bold!important;
color: #fff!important;
}
body #bruno-navigation-wrapper .bruno-sticky-navigation-wrapper .sf-menu li.root a:hover,
.current-menu-item a {
color: #000!important;
}
.sf-menu li { margin-left: 18px; }
.top-navigation ul li:last-child a {
margin-top: 24px;
border: 1px solid #FFFFFF;
height: 45px;
width: 110px;
border-radius: 60px;
padding: 8px!important;
text-align: center;
background-color: transparent;
font-weight: bold!important;
}
body .submenu li.childmenu { background-color: #fff; }
body .submenu li.childmenu a:hover { background: #fff!important; }
body .submenu li.childmenu a .menu-title { color: #333333!important; }
.top-navigation .submenu li.childmenu:last-child a {
margin: 0!important;
border: none!important;
padding: 13px 16px!important;
font-weight: normal!important;
height: initial!important;
width: initial!important;
border-radius: 0!important;
text-align: left!important;
padding-top: 13px!important;
}
.bruno-sticky-navigation-wrapper ul li:last-child a {
margin-top: 12px !important;
}
body #bruno-navigation-wrapper .top-navigation ul li:last-child a:hover {
background-color: #fff;
color: #EA314A!important;
padding-top: 8px;
}
.icon-menu {
color: #fff!important;
}
#bruno-navigation-wrapper .sf-menu li.current-menu-item a {
color: #fff !important;
border-color: #fff !important;
}
/**
* CONTENT
*/
#bruno-mainbody { padding: 0; }
.bruno-page {
padding-top: 0;
margin-top: -90px;
}
#talk_to_us h3 {
font-weight: normal!important;
color: #202226!important;
}
#talk_to_us a { margin-top: 50px; }
body .about_us .vc_single_image-wrapper:before {
background-color: #E74C3C!important;
top: 48%;
}
body div#second_row_about div.wpb_column div.vc_single_image-wrapper:before {
top: 58%!important;
}
/**
* BANNER SECTION
*/
.banner_section {
background-color: #fff !important;
z-index: 3;
width: 78.5%;
margin: -10% auto 0 auto!important;
box-shadow: 0 12px 90px rgba(0, 1, 1, 0.2);
border-radius: 6px;
padding: 32px;
}
.banner_section .wpb_column {
margin-top: -58px!important;
}
.banner_section span { color: #202226!important; }
#first_column_banner p span {
font-size: 18px;
color: #202226 !important;
line-height: 26px;
letter-spacing: -0.5px;
font-weight: normal;
}
#first_column_banner p:last-child { font-size: 14px; }
#first_column_banner { padding: 50px 35px 0 35px; }
#second_column_banner { padding: 60px 35px 0 0; }
#third_column_banner { padding: 62px 40px 0 0; }
#first_column_banner,
#second_column_banner,
#third_column_banner {
background-color: #fff !important;
}
#second_column_banner span,
#third_column_banner span {
font-size: 16px;
font-weight: 700;
letter-spacing: 0;
}
.banner_section h2 {
color: #202226!important;
font-weight: normal;
margin-bottom: 0.75rem;
}
.banner_section p {
line-height: 25px;
color: #747980;
letter-spacing: -0.5px !important;
}
.banner_section .btn_white { border: 1px solid #e8e8e8; }
.Default-minus {
width: 24px;
height: 2px;
color: #E74C3C;
margin-right: 20px;
}
.section_service .vc_column-inner {
padding: 100px 17%!important;
}
.section_service h2 { font-style: normal!important; }
.section_service i {
font-size: 60px;
color: #EB374A;
font-style: normal!important;
}
.section_service hr {
width: 11%;
float: left;
}
/**
* SOLUTIONS SECTION
*/
#solution {
margin-top: 147px;
margin-bottom: -50px;
}
.vc_box_shadow { box-shadow: 0 12px 90px rgba(0, 1, 1, 0.1)!important; }
.solution_left .block_solution {
margin: 100px;
}
.block_solution hr {
width: 50px;
float: left;
color: #E7E8EB!important;
border: 1px solid #E7E8EB;
}
.take_off .vc_single_image-wrapper:before { content: none!important; }
.solution_right .block_solution {
margin: 124px 180px 124px 110px;
}
h2.title_block_solution {
line-height: 42px;
text-align: left;
font-size: 2rem!important;
font-weight: normal;
}
p.caption_block_solution {
display: block;
clear: both;
font-size: 1rem;
line-height: 30px;
margin-top: 30px;
}
.solution_right,
.solution_left { margin-top: 130px !important; }
.solution_left .vc_single_image-wrapper:before {
content: " ";
width: 312px;
height: 312px;
background-color: #f6fafb;
}
.solution_left .vc_single_image-wrapper:before,
.solution_right .vc_single_image-wrapper:before {
content: " ";
width: 312px;
height: 312px;
background-color: #f6fafb;
z-index: -1;
position: absolute;
left: -10%;
}
.solution_left .vc_single_image-wrapper:before {
top: 49%;
}
.solution_right .vc_single_image-wrapper:before {
top: 35%;
}
/**
* PARTNERS SECTION
*/
div#partners { margin-top: 70px; }
#partners_logos {
padding: 0 40px;
margin-top: 12px;
}
#partners_logos .vc_inner img { width: 130px; }
#partners .wpb_content_element { margin-bottom: 90px; }
#partners_mobile .vc_inner { text-align: center; }
/**
* CALL TO ACTION
*/
.call_to_action {
width: 120%!important;
margin-left: -10%!important;
margin-top: 70px;
padding: 100px 115px 60px;
background-color: #292929;
background: linear-gradient(135deg, #EA314A 0%, #E84C3C 100%);
z-index: 10!important;
}
body p.call_to_action_white strong a {
color: #fff!important;
font-weight: 600!important;
}
.call_to_action_white {
color: #FFFFFF;
font-size: 1.75rem;
font-weight: 300;
line-height: 36px;
text-align: center;
}
/**
* WIDGETS SECTION
*/
.vc_wp_custommenu .menu li {
padding: 0!important;
background: none!important;
border-left: none!important;
}
.vc_wp_custommenu .menu li a {
font-weight: 600!important;
line-height: 32px!important;
color: #747980!important;
}
.box-title span {
text-transform: none!important;
font-weight: 500;
font-size: 16px;
letter-spacing: 0;
}
.stripe:before {
content: "----";
letter-spacing: -3px;
font-size: 24px;
margin-right: 20px;
color: #E74C3C;
}
.box-title span:before {
content: "----";
letter-spacing: -3px;
font-size: 24px;
margin-right: 20px;
color: #E74C3C;
}
#bruno-footer .box.widget_nav_menu ul li a {
color: #747980;
font-size: 14px;
font-weight: 600;
text-transform: none;
padding: 5px 0 0 0;
}
#bruno-footer-wrap {
padding: 90px 0 100px 0;
}
#bruno-footer .box-title { margin-bottom: 10px!important; }
.footer-middle .box-title {
padding-top: 16px;
}
.footer-middle .menu-footer-menu-container { margin-top: -6px; }
.textwidget {
color: #747980;
}
#bruno-footer .box p {
font-size: 0.875rem;
margin-bottom: 15px;
}
/**
* FOOTER
*/
.bruno-copyrights-text {
color: #89898B;
font-weight: 600;
text-align: right;
margin-top: -6px !important;
}
#bruno-footer-wrap {
background-color: transparent!important;
margin-top: 50px;
}
.widget_nav_menu { margin-top: -16px; }
#nav_menu-2 { padding-left: 150px; }
#bruno-footer-wrap hr {
width: 83.2%;
border: 1px solid #e7e8eb;
}
#menu-footer-menu .current-menu-item a {
font-weight: normal !important;
color: #747980 !important;
}
#built_by_text {
font-size: 13px;
line-height: 27px;
font-weight: 400;
color: #89898b;
}
#built_by_text a {
color: #e74c3c!important;
font-weight: 600;
}
/**
* BUTTONS
*/
a.btn_white {
background-color: #fff;
border: none;
padding: 19px 50px !important;
border-radius: 60px;
color: #E74C3C!important;
font-size: 12px!important;
font-weight: bold!important;
text-transform: uppercase;
}
body a.btn_white:hover {
background-color: #EA314A;
color: #fff !important;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
border: none;
}
a.btn_white:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); }
a.btn_red {
width: 170px;
background-color: #E74C3C!important;
background: linear-gradient(135deg, #EA314A 0%, #E84C3C 100%);
color: #fff!important;
text-align: center;
line-height: 50px;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
border: none;
margin-top: 20px;
}
a.btn_red:hover {
border-color: transparent !important;
background-image: linear-gradient(-45deg, #ea314a 0%, #e84c3c 100%);
}
a.btn_red:active {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
background-color: #e74c3c;
background-image: linear-gradient(-45deg, #ea314a 0%, #e84c3c 100%);
}
/**
* ELEMENTALS
*/
.none_padding_right { padding-right: 0 !important; }
.transparent { background-color: transparent !important; }
.vc_column-inner { padding: 0 !important; }
body .vc_custom_1500523474242 { background-color: #fff !important; }
[class^="icon-"], [class*=" icon-"] { font-family: 'dpricomoon'!important; }
[class^="ts-"], [class*=" ts-"] { font-family: 'Crescor'!important; }
.list_block_solution { list-style: none; }
.list_block_solution i { margin-right:20px; color: #E64C3B; }
.gform_footer { text-align: center; }
.gfield_label {
display: none!important;
}
body .gform_footer .gform_button {
width: 170px!important;
background-color: #E74C3C!important;
background: linear-gradient(135deg, #EA314A 0%, #E84C3C 100%);
color: #fff!important;
text-align: center;
line-height: 40px;
text-transform: uppercase;
font-weight: bold;
border-radius: 40px;
font-size: 12px!important;
margin-top: 20px!important;
}
textarea, input[type=text], input[type=password], input[type=email], input[type=www], input[type=tel], input[type=date], input[type=number], select {
background: #F6FAFB;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
font-family: "proxima-nova", sans-serif !important;
color: #202226;
padding: 22px 18px !important;
margin-top: 30px;
}
input[type=text]:active,
input[type=text]:focus,
textarea:focus {
background-color: #fff!important;
border: 1px solid #e7e8eb;
height: 42px;
}
#send_message hr {
width: 50px;
color: #E7E8EB!important;
}
.gfield_description,
.validation_message { display: none; }
.gfield_error {
background-color: #fff!important;
border: none!important;
}
.gform_wrapper li.gfield_error input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.gform_wrapper li.gfield_error textarea {
border: 1px solid #e74c3c !important;
background-color: #fff!important;
}
#mCSB_1 { background-color: #fff!important; }
#bruno-mobile-menu ul li a { color: #333!important; }
.icon-prev,
.icon-next { display: none !important; }
#bruno-mobile-menu { background-color: #fff!important; }
#bruno-mobile-menu #close-mobile-menu {
left: 20px;
top: 4px;
color: #333333!important;
}
div.parallax { background-attachment: unset; }
.validation_error {
border: none!important;
color: #e74c3c!important;
}
.list_block_solution li { margin-bottom: 20px; }
It seems like a problem with the margins in firefox. A different behavior I think...
Can you help me to diagnostic what hell is happing?
Thank you guys!
Jean it looks fine to me. Maybe it's an outdated version of Firefox?
I'm busy building a site on my local server, and I'm using Firefox to test it. Now, it's reached a Milestone, and so I have to check that it works in every browser. Unfortunately, Webkit-based browsers seem to be having a problem rendering my fonts in certain places, even where their styles match. Here's an image to demonstrate:
See how the button loads Arial instead of the paragraph's font (Source Sans Pro)? Even worse, what happened to the padding? It's supposed to look like this (at least, Firefox shows it like this):
Now, that paragraph and that button inherit the font styles from the parent container, and do not specify styles of their own. Firefox shows it correctly, but any Webkit-based browser does not. The console does not show a thing, and I have verified that all the font files are loading. (I provide two formats: SVG and WOFF; the latter is always loaded in the browsers I test with - I may as well remove the SVG anyway.)
This is the CSS #font-face declaration:
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffRegular') format('woff'),
url('#{sourceSansProFontPath}/svgRegular#source_sans_proregular') format('svg');
font-weight: 400;
font-style: normal;
}
And this is the HTML block:
<div class="grid4 uniformFund">
<img class="blockImage" src="//www1-resources.aaa-kee.co.za.dev/png/funds/uniform-fund/logo.png" width="228" height="40" alt="The Uniform Fund - Logo">
<p>In South Africa, a uniform is required for attendance at most schools - without one a child may not be able to attend school.<br><br>As it is, thousands of children across the country do not have the privilege of having one at their disposal.</p>
<a class="readMoreButton" href="/fund/uniform-fund">Read more →</a>
</div>
Any ideas why this happens?
UPDATE
Also, I don't think it has anything to do with element types. In the below example, you'll see that Firefox loads the two buttons properly, but Chrome does not (it only loads the first one correctly).
UPDATE - LESS FILES
Here are my LESS files:
1. main.less
html {
background-color: #fff;
color: #paragraphColor;
cursor: default;
.paragraphFont;
height: 100%;
text-rendering: optimizeLegibility;
}
body {
border-top: 5px solid #2a2a2a;
}
a {
color: #baseColor;
text-decoration: none;
&[href]:hover {
text-decoration: underline;
}
}
a.commonButton, button.commonButton {
background-color: #baseColor;
border-radius: 4px;
border: 0;
color: #fff;
display: inline-block;
margin-bottom: 1px;
outline: 0;
padding: 11px 16px;
.transition(.1s background-color ease-out);
.boxShadow(0 1px 2px, fade(#000, 10%));
&:hover {
background-color: #lighterColor;
text-decoration: none;
}
&:hover:active {
background-color: #baseColor !important;
.boxShadow(inset 0 1px 2px, darken(#baseColor, 10%));
margin-top: 1px;
margin-bottom: 0;
}
}
.mouseDefault {
cursor: default;
}
header[role=siteNavigation] {
> div.backFade {
.gradientTopBottom(fade(desaturate(#baseColor, 30%), 17%), rgba(255,255,255,0));
display: none;
height: 800px;
position: absolute;
width: 100%;
z-index: 97;
}
.headerBlock {
margin: 27px auto;
blockquote.mainQuote {
color: #ff9e42;
font-size: 18px;
font-style: italic;
font-weight: 600;
line-height: 130%;
margin-top: 11px;
cite {
color: #d6d6d6;
}
}
.socialButtons {
padding: 20px 0 0 40px;
a {
background: #fff url("#{resPath}/png/social/buttonMap") no-repeat 0 0;
display: inline-block;
float: left;
margin: 0 2px;
height: 35px;
width: 35px;
text-indent: -9999px;
&.facebook {
background-position: 0 0;
&:hover {
background-position: 0 -35px;
}
}
&.googlePlus {
background-position: -35px 0;
&:hover {
background-position: -35px -35px;
}
}
&.twitter {
background-position: -70px 0;
&:hover {
background-position: -70px -35px;
}
}
&.rssFeeds {
background-position: -105px 0;
&:hover {
background-position: -105px -35px;
}
}
}
}
.siteLogo {
background: #fff url('#{resPath}/png/logo') no-repeat 0 0;
float: right;
height: 65px;
text-indent: -9999px;
width: 185px;
}
}
nav.siteMainMenu {
margin-bottom: 2px;
.line {
background-color: #f1f1f1;
height: 5px;
margin-top: 34px;
position: absolute;
width: 100%;
z-index: -1;
}
.menuPlaceHolder {
> ul > li {
background: #fff;
display: inline-block;
float: left;
overflow: hidden;
padding-right: 2px;
&:first-child {
padding-left: 2px
}
> div {
background-color: #fff;
border-radius: 0 5px 4px 4px;
border-top: 5px solid #baseColor;
display: none;
margin-top: -5px;
padding: 8px 0;
position: absolute;
z-index: 100;
.boxShadow(0 12px 15px; rgba(0,0,0,0.15));
ul {
display: inline-block;
float: left;
margin-left: -1px;
min-width: 200px;
&:first-child {
margin-left: 0;
}
li {
&.break {
border-bottom: 1px solid #eee;
height: 0px;
margin: 8px 0;
}
&.groupTitle {
border-bottom: 1px solid #eee;
color: #ccc;
font-size: 12px;
font-weight: 800;
margin-bottom: 8px;
padding: 14px 18px 8px;
text-transform: uppercase;
}
> a {
color: #808080;
display: block;
font-size: 12px;
font-weight: 600;
padding: 9px 19px;
text-transform: uppercase;
&[href]:hover, &.current {
background-color: #efefef;
.gradientTopBottom(#efefef, #f4f4f4);
.boxShadow(inset 0 1px 2px, #e4e4e4);
color: #baseColor;
text-decoration: none;
}
> span {
background-color: #ccc;
border-radius: 4px;
color: #777;
font-size: 11px;
font-weight: 600;
margin-left: 8px;
padding: 1px 5px 0;
&.new {
background-color: #ff9e42;
color: #fff;
font-weight: 900;
}
}
}
&.largeItem {
> a[href] {
color: #444;
font-size: 14px;
line-height: 1.3em;
max-width: 240px;
text-transform: none;
span.descriptor {
background: none;
display: block;
font-size: 12px;
font-weight: 400;
margin: 8px 0 0 0;
padding: 0;
}
&:hover {
color: #baseColor;
}
}
}
}
&.borderLeft {
border-left: 1px solid #eee;
}
&.borderRight {
border-right: 1px solid #eee;
}
}
}
> a {
border-bottom: 5px solid #e6e6e6;
color: #909090;
display: block;
font-size: 16px;
padding: 9px 18px;
position: relative;
text-transform: lowercase;
transition: .2s color ease-out;
}
&:hover > a[href],
> a[href]:hover,
> a.current {
.gradientTopBottom(#fff, lighten(#baseColor, 50%));
border-bottom: 5px solid #2e75b6;
color: #baseColor;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}
}
> ul > li.donate {
> a {
color: #b2923f;
font-weight: 400;
}
&:hover > a[href],
> a[href]:hover,
> a.current {
.gradientTopBottom(#fff, lighten(#7a5f07, 65%));
border-bottom: 5px solid #7a5f07;
color: #7a5f07;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}
> div {
border-top-color: #7a5f07;
}
}
> form#siteSearch {
border-bottom: 0;
display: inline-block;
float: right;
margin-top: 3px;
> input[type=text] {
border: 0;
display: inline-block;
float: left;
.inputFont;
line-height: 1em;
outline: 0;
padding: 5px 6px;
width: 140px;
margin: 0;
.transition(.4s width ease-out);
&:focus {
width: 193px;
}
}
> input[type=submit] {
background: #fff url("#{resPath}/png/search/submit") no-repeat 50% 50%;
border: 0;
cursor: pointer;
display: inline-block;
float: right;
margin: 0;
min-height: 27px;
min-width: 30px;
outline: 0;
padding: 6px;
&:hover {
background-color: #f1f1f1;
}
&:hover:active {
background-color: #e6e6e6;
background-position: 50% 60%;
.boxShadow(inset 0 1px 2px, #ccc);
}
}
}
}
}
}
main[role="documentContent"] {
#homeIntro {
padding: 30px 0;
background: #baseColor url("#{resPath}/png/elements/blue-pattern");
.boxShadow(inset 0 0 50px, #darkerColor);
.content p {
color: #fff;
font-size: 16px;
line-height: 1.4em;
}
.callToActionButtons {
> a.button {
background-color: #0061be;
color: #fff;
display: block;
font-size: 16px;
font-weight: 400;
margin-left: 10px;
padding: 14px 20px;
.transition(.2s background-color ease-out, .2s color ease-out);
&:first-child {
border-radius: 4px 4px 0 0;
}
&:last-child {
border-radius: 0 0 4px 4px;
}
&:hover {
background-color: #0056b2;
text-decoration: none;
}
&:hover:active {
.boxShadow(inset 0 1px 2px, fade(#000, 20%));
padding: 15px 20px 13px;
}
&.white {
background: #fff;
color: #0061be;
&:hover {
background: #b6e5ff;
}
}
}
}
}
#breadCrumbs {
background: #f7f7f7;
.gradientTopBottom(#f7f7f7, #fff);
color: #aaa;
padding: 20px 0 10px;
a[itemprop="url"] {
color: #lighterColor;
text-transform: uppercase;
font-size: 12px;
}
}
#pageContent {
margin: 40px auto;
.headerBlock {
margin-bottom: 30px;
.blockTitle {
background: #fff url("#{resPath}/png/elements/block-header-line") repeat-x 50% 50%;
h1 {
background-color: #fff;
display: inline-block;
font-size: 27px;
font-weight: 100;
padding: 0 20px 0 0;
}
}
}
.contentBlock {
line-height: 150%;
p {
margin-bottom: 14px;
&.introText {
font-size: 15px;
font-weight: 700;
}
}
ul.contentList, ol.contentList {
margin-left: 17px;
li {
padding: 0 0 10px 10px;
&:last-child {
padding-bottom: 0;
}
}
}
ul.contentList {
list-style-image: url("#{resPath}/png/elements/content-bullet");
}
h1, h2 {
color: #baseColor;
font-size: 17px;
margin: 27px 0 10px 0;
}
h1.pageTitle {
color: #baseColor;
font-size: 26px;
font-weight: 400;
padding: 0 0 30px;
margin: 0;
}
h2 {
font-size: 15px;
font-weight: 400;
}
img {
.userSelect(none);
&.blockImage {
display: block;
margin-bottom: 30px;
&.bordered {
border: 1px solid #ccc;
padding: 4px;
.boxShadow(0 1px 8px, #eee);
}
}
}
a {
&.readMoreButton {
border-radius: 2px;
border: 3px solid #ccc;
color: #484848;
display: inline-block;
margin: 10px 0 1px;
padding: 4px 16px;
text-transform: uppercase;
.transition(.2s background-color ease-out, .2s color ease-out);
.boxShadow(0 1px 2px, fade(#000, 10%));
&:hover {
background-color: #aaa;
border-color: #aaa;
color: #fff;
text-decoration: none;
}
&:hover:active {
.destroyBoxShadow();
margin: 11px 0 0;
}
}
}
.foodFund {
a.readMoreButton {
border-color: #foodFundColor;
&:hover {
background-color: #foodFundColor;
}
}
}
.activeEducationFund {
a.readMoreButton {
border-color: #activeEducationFundColor;
&:hover {
background-color: #activeEducationFundColor;
}
}
}
.uniformFund {
a.readMoreButton {
border-color: #uniformFundColor;
&:hover {
background-color: #uniformFundColor;
}
}
}
}
aside .asideBlock {
margin-bottom: 20px;
h1 {
background-color: #baseColor;
color: #fff;
font-size: 15px;
font-weight: 400;
padding: 7px 14px;
text-transform: uppercase;
}
a.donate {
border-radius: 4px;
border: 3px solid #baseColor;
color: #baseColor;
display: block;
font-size: 18px;
font-weight: 700;
padding: 10px 5px;
text-align: center;
.transition(.3s background-color ease-out, .3s color ease-out, .3s text-shadow ease-out);
&:hover {
background-color: lighten(#baseColor,10%);
color: #fff;
text-decoration: none;
text-shadow: 0 1px 2px darken(#baseColor, 2%);
}
&:hover:active {
.boxShadow(inset 0 1px 3px, darken(#baseColor, 2%));
padding: 11px 5px 9px;
text-shadow: 0 1px 1px darken(#baseColor, 2%);
}
}
ul {
list-style: none;
li a {
border-bottom: 1px solid #e6e6e6;
color: #444;
display: block;
padding: 5px 14px;
&:hover,
&.current {
background-color: #f1f1f1;
color: #baseColor;
text-decoration: none;
}
> span {
background-color: #ccc;
border-radius: 4px;
color: #777;
font-size: 11px;
font-weight: 600;
margin-left: 8px;
padding: 1px 5px 0;
text-transform: uppercase;
&.new {
background-color: #ff9e42;
color: #fff;
font-weight: 900;
}
}
}
}
}
}
#donatePartner {
font-size: 30px;
text-align: center;
padding: 40px 0;
border-top: 5px solid #eee;
&.e5c7b864a6ef {
border-top-color: #fdd00e;
a {
background: #fff url("#{resPath}/png/donate-partner/e5c7b864a6ef") no-repeat top center;
display: block;
height: 67px;
text-indent: -9999px;
}
}
}
#baseNavigation {
background: #2a2a2a url("#{resPath}/png/elements/dark-fabric");
margin-bottom: 1px;
padding: 40px 0;
div {
h1.blockTitle {
background: fade(#fff, 10%);
color: #fff;
font-weight: 400;
text-transform: uppercase;
padding: 8px 11px 7px;
margin-bottom: 2px;
}
a {
font-size: 13px;
color: #ccc;
span {
display: block;
&.image {
background: #2a2a2a url('#{resPath}/png/base-navigation/arrow') center center no-repeat;
display: block;
img {
.userSelect(none);
.transition(.3s opacity ease-out);
}
}
&.text {
display: block;
padding-top: 10px;
}
}
&:hover {
color: #fff;
text-decoration: none;
img {
opacity: 0.6;
}
}
}
}
}
}
footer[role="mainFooter"] {
#latestJournalEntry {
padding: 30px 0;
background: #baseColor url("#{resPath}/png/elements/blue-pattern");
&:hover .header h1 {
background-color: #fff;
}
.boxShadow(inset 0 0 50px, #darkerColor);
.header h1 {
border-radius: 4px;
background-color: fade(#fff, 70%);
padding: 16px 14px 13px;
color: #baseColor;
font-size: 15px;
font-weight: 200;
margin-right: 10px;
text-transform: uppercase;
.transition(.3s background-color ease-out);
span {
font-size: 38px;
font-weight: 800;
&.padder {
font-size: 16px;
font-weight: 200;
display: inline;
margin-left: 9px;
}
}
}
.content {
color: #fff;
h1 {
font-size: 24px;
font-weight: 200;
a {
color: #fff;
}
}
p {
color: lighten(#baseColor, 30%);
font-size: 14px;
font-weight: 400;
margin-top: 9px;
line-height: 1.4em;
&.credits {
border-top: 1px solid fade(#fff,15%);
color: lighten(#baseColor, 40%);
font-size: 11px;
padding-top: 5px;
font-weight: 400;
text-transform: uppercase;
a {
color: #fff;
}
}
}
}
}
#fatFooter {
background: #eee url("#{resPath}/png/elements/light-swirl");
padding: 30px 0;
margin: 1px 0;
h1.groupTitle {
color: #baseColor;
font-size: 16px;
font-weight: 400;
margin-bottom: 20px;
}
ul.links {
li {
font-size: 12px;
overflow: hidden;
a {
color: #4f4f4f;
display: block;
padding-bottom: 5px;
&:hover {
color: #baseColor;
}
}
}
}
.nextEvent {
a {
display: block;
line-height: 1.3em;
overflow: hidden;
span {
display: block;
&.date {
background-color: #baseColor;
border-radius: 4px 4px 0 0;
color: #fff;
font-weight: 200;
font-size: 22px;
padding: 10px;
.transition(.3s background-color ease-out; .3s color ease-out);
strong {
font-weight: 800;
}
}
&.eventName {
background-color: #fff;
border: 1px solid #baseColor;
border-radius: 0 0 4px 4px;
color: #444;
font-size: 14px;
font-weight: 400;
line-height: 1.7em;
padding: 5px 10px;
.transition(.3s color ease-out; .3s border-color ease-out);
span.eventType {
background-color: lighten(#baseColor, 50%);
border-radius: 0 10px 10px 0;
line-height: 1.7em;
margin-left: -10px;
margin-right: 5px;
margin-top: -10px;
color: #baseColor;
display: inline-block;
font-size: 10px;
padding: 0 6px 0 10px;
text-transform: uppercase;
}
}
}
&:hover{
text-decoration: none;
.transition(.3s box-shadow ease-out);
span.date {
background-color: #lighterColor;
}
span.eventName {
color: #baseColor;
border: 1px solid #lighterColor;
}
}
}
}
}
#baseFooter {
background: #2a2a2a url("#{resPath}/png/elements/dark-fabric");
font-size: 12px;
padding: 30px 0;
p.copyright {
color: #b9b9b9;
margin: 7px 0;
a {
color: #eee;
}
}
p.certification a {
color: #999;
}
a.foundryStamp {
background: #2a2a2a url("#{resPath}/png/foundry/footerStamp") no-repeat 0 0;
border-radius: 4px;
display: inline-block;
float: right;
height: 42px;
text-indent: -9999px;
width: 222px;
.transition(.8s background-position ease-out);
.boxShadow(inset 0 1px 4px, rgba(0,0,0,0.3));
&:hover {
background-position: 0 -42px;
}
}
}
}
2. gather.less (this file contains the font assignment definitions)
#resPath: "//www1-resources.aaa-kee.co.za.dev";
#sliderSkinPath: "#{resPath}/png/slider/skins";
#sliderSlidesPath: "#{resPath}/png/slider/slides";
#baseColor: #1f74c2;
#lighterColor: #448ddf;
#darkerColor: #005ba7;
#paragraphColor: #6e6e6e;
#foodFundColor: #98d733;
#activeEducationFundColor: #ff00af;
#uniformFundColor: #24adcd;
.font (#size, #lineHeight) {
font: ~"#{size}/#{lineHeight}" "SourceSansPro", Helvetica, Arial, Sans-Serif;
}
.paragraphFont () {
.font(14px, 150%);
}
.inputFont () {
.font(14px, 100%);
}
.boxShadow (#style, #c) {
-moz-box-shadow: #style #c;
-ms-box-shadow: #style #c;
-webkit-box-shadow: #style #c;
box-shadow: #style #c;
}
.boxShadowDouble (#style, #c, #style2, #c2) {
-moz-box-shadow: #style #c, #style2 #c2;
-ms-box-shadow: #style #c, #style2 #c2;
-webkit-box-shadow: #style #c, #style2 #c2;
box-shadow: #style #c, #style2 #c2;
}
.destroyBoxShadow () {
-moz-box-shadow: none;
-ms-box-shadow: none;
-ms-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.transition (#value1,#value2:X,...)
{
#value: ~`"#{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-moz-transition: #value;
-ms-transition: #value;
-o-transition: #value;
-webkit-transition: #value;
transition: #value;
}
.animation (#name; #speed: .5s) {
-moz-animation-duration: #speed;
-moz-animation-name: #name;
-ms-animation-name: #name;
-ms-animation-duration: #speed;
-o-animation-duration: #speed;
-o-animation-name: #name;
-webkit-animation-duration: #speed;
-webkit-animation-name: #name;
animation-duration: #speed;
animation-name: #name;
}
.gradientTopBottom (#top; #bottom) {
background-color: #bottom;
background: -moz-linear-gradient(top, #top 0%, #bottom 100%);
background: -ms-linear-gradient(top, #top 0%, #bottom 100%);
background: -o-linear-gradient(top, #top 0%, #bottom 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #top), color-stop(100%, #bottom));
background: -webkit-linear-gradient(top, #top 0%, #bottom 100%);
background: linear-gradient(to bottom, #top 0%, #bottom 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{top}', endColorstr='#{bottom}',GradientType=0 );
}
.gradientRadial (#in; #out) {
background: -moz-radial-gradient(center, ellipse cover, #in 0%, #out 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%, #out));
background: -webkit-radial-gradient(center, ellipse cover, #in 0%, #out 100%);
background: -o-radial-gradient(center, ellipse cover, #in 0%, #out 100%);
background: -ms-radial-gradient(center, ellipse cover, #in 0%, #out 100%);
background: radial-gradient(ellipse at center, #in 0%, #out 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{in}', endColorstr='#{out}',GradientType=1 );
}
.userSelect (#value: none) {
-moz-user-select: #value;
-webkit-user-select: #value;
user-select: #value;
}
#import "reset.less";
#import "grid.less";
#import "slider/main.less";
#import "slider/skins/white.less";
#import "slider/slides/active-education.less";
#import "slider/slides/excursion-fund.less";
#import "slider/slides/food-fund.less";
#import "fonts/source-sans-pro.less";
#import "main.less";
3. #font-face definitions
#sourceSansProFontPath: "#{resPath}/fonts/source-sans-pro";
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffBlackItalic') format('woff'),
url('#{sourceSansProFontPath}/svgBlackItalic#source_sans_problack_italic') format('svg');
font-weight: 900;
font-style: italic;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffBlack') format('woff'),
url('#{sourceSansProFontPath}/svgBlack#source_sans_problack') format('svg');
font-weight: 900;
font-style: normal;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffBoldItalic') format('woff'),
url('#{sourceSansProFontPath}/svgBoldItalic#source_sans_probold_italic') format('svg');
font-weight: 700;
font-style: italic;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffBold') format('woff'),
url('#{sourceSansProFontPath}/svgBold#source_sans_probold') format('svg');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffExtraLightItalic') format('woff'),
url('#{sourceSansProFontPath}/svgExtraLightItalic#source_sans_proXLtIt') format('svg');
font-weight: 100;
font-style: italic;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffExtraLight') format('woff'),
url('#{sourceSansProFontPath}/svgExtraLight#source_sans_proextralight') format('svg');
font-weight: 100;
font-style: normal;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffItalic') format('woff'),
url('#{sourceSansProFontPath}/svgItalic#source_sans_proitalic') format('svg');
font-weight: 400;
font-style: italic;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffLightItalic') format('woff'),
url('#{sourceSansProFontPath}/svgLightItalic#source_sans_prolight_italic') format('svg');
font-weight: 200;
font-style: italic;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffLight') format('woff'),
url('#{sourceSansProFontPath}/svgLight#source_sans_prolight') format('svg');
font-weight: 200;
font-style: normal;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffRegular') format('woff'),
url('#{sourceSansProFontPath}/svgRegular#source_sans_proregular') format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffSemiboldItalic') format('woff'),
url('#{sourceSansProFontPath}/svgSemiboldItalic#source_sans_proSBdIt') format('svg');
font-weight: 600;
font-style: italic;
}
#font-face {
font-family: 'SourceSansPro';
src: url('#{sourceSansProFontPath}/woffSemibold') format('woff'),
url('#{sourceSansProFontPath}/svgSemibold#source_sans_prosemibold') format('svg');
font-weight: 600;
font-style: normal;
}
Solution Found:
It seems there is a Webkit bug when one sets text-rendering: optimizeLegibility;. When I disabled it, everything worked just fine.
Now, this raises the question - why did it do that? And is is really a bug? To me, it is. Simply because of the nature of the displaying of the fonts on certain elements, but not others.