Webkit #font-face rendering issue - some elements do not use the font - html

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.

Related

Dropdown menu is to big [closed]

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>

Issue with styles in Firefox, IE and Edge

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?

Different height for the <li>

Goal:
Make the text "bbb" to have the same font height as "aaa" but the height of the li.ttt should have the same height as the font-size: xx-large;
Problem:
Don't know how to do it. I tried using "height" but it doesn't work.
https://jsfiddle.net/qc89dwz7/
LI.filtered A {
position: relative;
padding: 1px 20px 1px 4px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll right 0;
background-position: right bottom;
font-weight: 400;
color: #08C;
text-decoration: none;
}
LI.filtered .testt {
background: #F0F0FF;
padding: 1px 4px 1px 4px;
font-weight: 400;
color: #08C;
text-decoration: none;
}
#result-filters {
margin: 0, 0, -30px;
}
#result-filters UL {
display: inline;
list-style: outside none none;
margin: 0;
padding: 0;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}
LI.filtered,
#result-filters LI.filtered {
padding-left: 0;
background: transparent none repeat scroll 0 0;
}
#result-filters UL LI {
margin: 0 8px 0 0;
float: left;
}
LI.ttt A {
position: relative;
padding: 1px 4px 1px 20px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll left 0;
background-position: left;
font-weight: 400;
color: #08C;
text-decoration: none;
font-size: xx-large;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #F4F4F4;
min-height: 61px;
border: 0;
line-height: 1.2;
letter-spacing: 1px;
width: 137px;
text-align: center;
font-family: Tahoma;
}
<div id="result-filters">
<ul>
<li class="filtered">
<a href="">
aaa
</a>
</li>
<li class="ttt">
bbb
</li>
</ul>
</div>
xx-large translates to 32px
Knowing this, you can establish the height and line-height of the two list-items separately:
li.filtered {
height: 12px;
line-height: 12px;
}
li.ttt {
height: 32px;
line-height: 32px;
}
You can then establish the font-size of aaa and bbb as 12px:
li.filtered a,
li.ttt a {
font-size: 12px;
}
Putting it all together:
LI.filtered A {
position: relative;
padding: 1px 20px 1px 4px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll right 0;
background-position: right bottom;
font-weight: 400;
color: #08C;
text-decoration: none;
}
LI.filtered .testt {
background: #F0F0FF;
padding: 1px 4px 1px 4px;
font-weight: 400;
color: #08C;
text-decoration: none;
}
#result-filters {
margin: 0, 0, -30px;
}
#result-filters UL {
display: inline;
list-style: outside none none;
margin: 0;
padding: 0;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}
LI.filtered,
#result-filters LI.filtered {
padding-left: 0;
background: transparent none repeat scroll 0 0;
}
#result-filters UL LI {
margin: 0 8px 0 0;
float: left;
}
LI.ttt A {
position: relative;
padding: 1px 4px 1px 20px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll left 0;
background-position: left;
font-weight: 400;
color: #08C;
text-decoration: none;
font-size: xx-large;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #F4F4F4;
min-height: 61px;
border: 0;
line-height: 1.2;
letter-spacing: 1px;
width: 137px;
text-align: center;
font-family: Tahoma;
}
li.filtered,
li.ttt {
display:block;
background-color: rgba(244,244,244,1);
}
li.filtered {
height: 12px;
line-height: 12px;
margin: 10px;
}
#result-filters li.filtered {
margin-top: 10px;
}
li.ttt {
height: 32px;
line-height: 32px;
}
li.filtered a,
li.ttt a {
font-size: 12px;
}
<div id="result-filters">
<ul>
<li class="filtered">
<a href="">
aaa
</a>
</li>
<li class="ttt">
bbb
</li>
</ul>
</div>
=====
A Simpler Alternative for Plain Colour Backgrounds
If you wish to middle-align the two same-font-size list-items over a plain colour background, simply colour in the background of li.ttt and leave the background of li.filtered transparent:
li.filtered,
li.ttt {
display:block;
height: 32px;
line-height: 32px;
}
li.ttt {
background-color: rgba(244,244,244,1);
}
li.filtered a,
li.ttt a {
font-size: 12px;
}
Putting it all together (simpler version):
LI.filtered A {
position: relative;
padding: 1px 20px 1px 4px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll right 0;
background-position: right bottom;
font-weight: 400;
color: #08C;
text-decoration: none;
}
LI.filtered .testt {
background: #F0F0FF;
padding: 1px 4px 1px 4px;
font-weight: 400;
color: #08C;
text-decoration: none;
}
#result-filters {
margin: 0, 0, -30px;
}
#result-filters UL {
display: inline;
list-style: outside none none;
margin: 0;
padding: 0;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}
LI.filtered,
#result-filters LI.filtered {
padding-left: 0;
background: transparent none repeat scroll 0 0;
}
#result-filters UL LI {
margin: 0 8px 0 0;
float: left;
}
LI.ttt A {
position: relative;
padding: 1px 4px 1px 20px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll left 0;
background-position: left;
font-weight: 400;
color: #08C;
text-decoration: none;
font-size: xx-large;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #F4F4F4;
min-height: 61px;
border: 0;
line-height: 1.2;
letter-spacing: 1px;
width: 137px;
text-align: center;
font-family: Tahoma;
}
li.filtered,
li.ttt {
display:block;
height: 32px;
line-height: 32px;
}
li.ttt {
background-color: rgba(244,244,244,1);
}
li.filtered a,
li.ttt a {
font-size: 12px;
}
<div id="result-filters">
<ul>
<li class="filtered">
<a href="">
aaa
</a>
</li>
<li class="ttt">
bbb
</li>
</ul>
</div>

css parts are missing when loading from wwwroot

I published a working version of my site to my wwwroot folder, but when I open the website some of the design is missing.
I looked in devTools (sources) in chrome and noticed that there are parts of my css that are missing, when I open the css manualy from the wwwroot folder I see that the parts are actualy there.
What might cause a selective css load?
The missing part of my css file:
#layer {
background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
height: 550px;
background-repeat: repeat;
position: absolute;
z-index: 3;
width: 100%;
top: 0;
left: 0;
}
#slide {
position: relative;
z-index: 1;
}
.menufixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99999;
border-bottom: chocolate 8px solid;
background-color: rgb(0, 0, 0);
box-shadow: 0 0 10px black;
}
The whole css file as published to the wwwroot folder:
.menu_item {
color: #FFFFFF;
border-top: 4px solid #B6B5B5;
display: inline-block;
font-family: Arial;
font-variant: small-caps;
font-weight: normal;
padding: 5px 2px 0px 2px;
text-decoration: none;
/* font-weight: bold; */
letter-spacing: 2px;
margin: 5px;
}
#Top {
border-bottom: chocolate 8px solid;
/* margin-bottom: 3%; */
background-color: rgb(0, 0, 0);
box-shadow: 0 0 10px black;
}
a {
text-decoration: none;
color: #5E5E5E;
}
#Logo {
color: #5E5E5E;
font-family: 'Reenie Beanie', cursive;
display: inline-block;
margin-right: 3vw;
background: url(http://www.elinorart.com/Gallery/latest%20artworks/slides/93.jpg) no-repeat, #5E5E5E;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1 {
font-size: 70px;
margin: 5% 0;
}
h1:hover {
color: chocolate;
}
a:hover, a div:hover {
color: chocolate;
}
#menu_bar {
display: inline-block;
}
#contact_text {
width: 50%;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
/* font-weight: 600; */
font-size: 16px;
/* font-family: -webkit-pictograph; */
color: #5E5E5E;
/* letter-spacing: 0px; */
}
#bottom_left p {
padding: 0px 49px 0 64px;
}
#bottom_center p {
padding: 0px 62px 0 30px;
}
#contact_details {
padding-bottom: 10px;
color: #5E5E5E;
font-size: 16px;
}
#pageFooter {
font-size: 0.8em;
color: #5E5E5E;
text-align: center;
font-family: Arial;
margin-top: 10%;
}
li {
line-height: 24px;
font-family: Arial;
color: #1C1C1C;
font-size: 16px;
list-style-type: none;
}
.exhibit_name {
color: black;
}
#page {
text-align: center;
background-color: rgb(232, 232, 232);
}
.page_content {
font-family: Arial;
/*text-align: initial;*/
/* background-color: rgb(232, 232, 232); */
/* padding-top: 3%; */
}
p {
font-size: 16px;
font-family: Arial;
}
#media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
body.about_me {
background-color: green;
}
.borderClass {
border-color: chocolate;
}
#contactDiv {
display: inline-block;
}
td {
vertical-align: top;
}
.contact_field {
border-bottom-width: 1px;
border: 1px solid #5E5E5E;
border-radius: 4px;
font-size: 16px;
font-family: Arial, cursive;
width: 322px;
height: 24px;
}
.contact_field_desc {
font-size: 14px;
padding: 4px;
font-family: Arial;
text-align: left;
}
.send_form {
border-bottom-width: 1px;
border: 1px solid #5E5E5E;
border-radius: 4px;
padding: 5px 28px;
}
body {
margin: auto;
}
#Facebook {
/* width: 100%; */
/* text-align: center; */
/* margin-left: 40%; */
/* margin-top: 3%; */
display: inline-flex;
margin-top: 2%;
}
#fb-root {
/*float: left;*/
vertical-align: central;
margin-right: 10px;
}
#fb-root2 {
/*float: right;*/
vertical-align: central;
margin-left: 10px;
}
.fb_iframe_widget {
/* margin-right: 13px; */
/* float: left; */
padding-right: 10%;
}
.exhibitions {
width: 40%;
margin: 0 5%;
float: left;
/*text-align: left;*/
}
.wrapper {
display: inline-block;
width: 45%;
text-align: left;
}
.exhibitions_wrapper {
padding-right: 3%;
}
ul {
padding: 0px;
}
ul li ul li {
list-style-type: initial;
padding-bottom: 10px;
}
.exhibitions_year {
/* margin-left: -5%; */
font-family: 'Reenie Beanie', cursive;
font-size: 37px;
/* line-height: 1px; */
margin: 14px 0;
color: orange;
color: chocolate;
font-weight: 500;
letter-spacing: 4px;
}
.bottom_sections {
width: 25%;
/* height: 100%; */
vertical-align: top;
text-align: left;
display: inline-block;
/* padding: 2%; */
}
.bottom_content {
/* padding: 0 10%; */
text-align: center;
}
.buttom_text {
font-size: 13px;
line-height: 25px;
padding: 0 10%;
text-align: left;
}
#AboutMe p {
font-size: 13px;
line-height: 25px;
}
.contact_info {
display: inline-block;
width: 19%;
vertical-align: top;
padding-left: 30px;
}
#exhibitions_wrapper {
width: 70%;
}
#AboutMe .wrapper {
border-right: 1px solid lightgray;
padding-right: 30px;
}
h3 {
padding-top: 3%;
margin: 12px 0;
font-variant: small-caps;
font-size: 37px;
font-weight: normal;
color: dimgrey;
letter-spacing: 10px;
font-family: Arial;
}
h4 {
font-size: 24px;
color: dimgrey;
font-variant: small-caps;
font-weight: normal;
}
h5 {
margin-top: 30px;
/* padding: 15px; */
border-bottom: 1px solid black;
font-size: 24px;
color: dimgrey;
font-variant: small-caps;
font-weight: normal;
text-align: center;
}
h2 {
/* padding: 0; */
margin-top: 12px;
font-variant: small-caps;
font-size: 32px;
font-weight: normal;
color: dimgrey;
letter-spacing: 10px;
font-family: Arial;
}
#AboutMe .contact_field {
width: 187px;
}
input {
margin-bottom: 15px;
}
.gallery_homepage {
height: 550px;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
.gallery_homepage div {
height: 550px;
}
#layer {
background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
height: 550px;
background-repeat: repeat;
position: absolute;
z-index: 3;
width: 100%;
top: 0;
left: 0;
}
#slide {
position: relative;
z-index: 1;
}
.menufixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99999;
border-bottom: chocolate 8px solid;
background-color: rgb(0, 0, 0);
box-shadow: 0 0 10px black;
}
Thanks!
There can be many reasons for it:
Your CSS rule might be overridden by inline style
It may be overridden by other preceding rule (in the later lines) in the same CSS file
You might be over ridding the css using ' !important' (this can be seen in dev tools)
You might have an error in your CSS file such as wrong syntax or missing ';' after rule or missing '{' or '}' at the beginning or end block of rules
Last but not least you might not be including the (correct) CSS file properly in the html
Hope this helps.
I just had a similiar problem: I updated a HTML and a CSS file and uploaded it to the server. When reloading in the browser, the updates in the HTML file showed but those in the CSS didn't. That was because of the way the browser (in my case Chrome) is caching. When opening in an Inkognito-Tab or deleting the cache it did work.

CSS background color width reduces when browser window is resized

I have a page but when I resize the browser window the background color gets cut down. I want the color to expand to the full browser width. One of my divs is bigger than the other ones. What is the fix for this?
The CSS is below:
#charset "utf-8";
/* ==========================================================================
RESET STYLES
========================================================================== */
* {
margin: 0; padding: 0;
}
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-size: 1em;
line-height: 1.4;
}
img {
border: 0 none;
}
/* ==========================================================================
BASE STYLES
========================================================================== */
html {
height: 100%;
}
body {
font-family: Arial, Helvetica Sans-serif;
width: 100%;
height: 100%;
color: #595959;
}
.col-full {
width: 1014px;
margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
font-family: Helvetica, Arial, Sans-serif;
}
/* ==========================================================================
HEADER STYLES
========================================================================== */
#header h1 {
margin-top: 26px;
float: left;
}
h1 a span {
display: none;
}
#login-form {
float: right;
margin: 25px 92px 12px 0;
}
#login-form input {
width: 150px;
height: 29px;
line-height: 29px;
border: 1px solid #a5a5a5;
color: #797979;
font-size: 14px;
padding-left: 8px;
margin-left: 3px;
}
#login-form #login-button {
width: 72px;
height: 30px;
background: url(../img/login-bg.png) top repeat-x;
border: 1px solid #494949;
cursor: pointer;
margin-left: 0;
font-weight: bold;
color: #FFF;
font-size: 13px;
padding-left: 0;
text-shadow: 1px 1px 1px #3f3f3f;
filter: dropshadow(color=#3f3f3f, offx=1, offy=1);
}
.form-buttons {
margin-left: 3px;
}
.form-buttons a {
text-decoration: none;
font-size: 12px;
color: #ef4926;
margin-right: 116px;
}
.nav {
clear: both;
width: 100%;
height: 47px;
background: #000;
}
.nav ul {
margin-top: 10px;
float: left;
}
.nav ul li {
float: left;
list-style: none;
margin-right: 53px;
}
.nav ul li a {
text-decoration: none;
font-family: Helvetica;
font-weight: bold;
color: #FFF;
/*font-size: 16px;*/
font-size: 15px;
}
.top-heading {
background: #363737;
height: 57px;
border-top: 1px solid #727272;
border-bottom: 1px solid #727272;
}
.top-heading h2 {
/*font-size: 28px;*/
font-size: 27px;
color: #FFF;
text-shadow: 1px 1px 2px #282929;
filter: dropshadow(color=#282929, offx=1, offy=1);
padding-top:8px;
}
#featured {
background: url(../img/featured-gd.png) repeat-x;
}
#featured .col-full {
background: url(../img/featured-bg.jpg) no-repeat;
}
.featured-content {
width: 454px;
float: left;
margin-right: 40px;
}
.featured-content h2 {
color: #FFF;
/*font-size: 38px;*/
font-size: 37px;
line-height: 1.15;
margin-top: 45px;
margin-bottom: 12px;
text-shadow: 1px 1px 2px #282929;
filter: dropshadow(color=#282929, offx=1, offy=1);
}
.featured-content p {
font-size: 15px;
color: #FFF;
line-height: 1.46;
}
.register-btn {
display: block;
width: 164px;
height: 39px;
text-decoration: none;
background: url(../img/register-btn.png) repeat-x;
text-align: center;
font-family: Helvetica;
font-weight: bold;
margin-top: 27px;
font-size: 22px;
color: #FFF;
padding-top: 4px;
-webkit-box-shadow: 0px 0px 1px 1px #2e2e2e;
box-shadow: 0px 0px 2px 2px #2e2e2e;
}
#featured img {
margin-top: 6px;
margin-bottom: 2px;
}
/* ==========================================================================
MAIN STYLES
========================================================================== */
#features {
background: #ff5423;
overflow: hidden;
}
#features h3 {
line-height: 1.15;
color: #FFF;
font-family: Helvetica;
padding-top: 24px;
margin-bottom: 13px;
/*font-size: 26px;*/
font-size: 25px;
}
.features-left {
width: 447px;
float: left;
margin-right: 62px;
}
.features-right {
width: 472px;
float: left;
}
.features-right ul {
margin-left: 15px;
}
.features-right ul li {
line-height: 1.76;
color: #ffc3b2;
font-size: 14px;
padding-left: 2px;
}
.features-right ul li span {
font-size: 17px;
color: #fefefe;
position: relative;
top: 2px;
}
.more-features {
display: block;
width: 144px;
height: 28px;
color: #fb3800;
font-family: Helvetica;
/*font-size: 17px;*/
font-size: 16px;
font-weight: bold;
text-align: center;
padding-top: 4px;
text-decoration: none;
background: url(../img/more-features.png) repeat-x;
margin-top: 38px;
margin-bottom: 23px;
}
#client-list {
border-top: 4px solid #a6a6a6;
border-bottom: 4px solid #c6c6c6;
padding-bottom: 7px;
}
#client-list .col-full {
width: 1080px;
}
#client-list h4 {
color: #4d4d4d;
/*font-size: 18px;*/
font-size: 17px;
margin-top: 39px;
}
#client-list .more-clients {
float: left;
text-decoration: none;
font-size: 15px;
color: #ff5423;
}
#client-list img {
margin-left: 90px;
margin-top: -44px;
}
#main {
clear: both;
background: url(../img/main-gd.png) repeat;
}
.col-446 {
width: 446px;
float: left;
margin-right: 55px;
}
.col-476 {
width: 476px;
float: left;
}
.col-476 p {
margin-right: 25px;
}
#main h3 {
font-family: Helvetica;
/*font-size: 28px;*/
font-size: 27px;
color: #535353;
line-height: 1.07;
margin-top: 30px;
margin-bottom: 14px;
}
#main p {
font-size: 14px;
line-height: 1.64;
margin-bottom: 21px;
}
.site-features {
margin-top: 32px;
float: left;
}
.site-features li {
list-style: none;
float: left;
margin-right: 35px;
}
li.sf-last {margin-right: 0;}
.site-features li a {
}
.join-box {
}
.join-btn {
}
.join-box p {
}
/* ==========================================================================
FOOTER STYLES
========================================================================== */
h4 a span {
display: none;
}
#footer {
clear: both;
}
I think the best way to solve this is to add a minimum width to your body. This way when the viewport is too narrow to show all your content, a horizontal scrollbar will allow the user to access the entire page. By the looks of your content, min-width: 1100px; would be just about right.