Here is my code for input field and placeholder. Don't know why its not working on ios safari but the same is working on other devices.
.form input {
margin-top: 30px;
border: 1px solid #d8d8d8;
border-radius: 5px;
background-color: transparent;
outline: none;
width: 50%;
/* padding: 18px 15px;
font-size: 14px; */
line-height: 40px;
height: 50px;
padding: 0 15px;
font-family: "Campan";
color: #3d8559;
position: relative;
}
.form input::placeholder {
font-size: 14px;
transition: 400ms;
position: absolute;
top: 32%;
left: 10px;
color: #8e8e8e;
}
I have also tried the code below but not working
::-webkit-input-placeholder {
color: #000;
opacity: 1;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #777;
}
:-ms-input-placeholder {
color: #777;
}
:-moz-placeholder {
/* Firefox 18- */
color: #777;
}
Related
I have a select with reset style and trying to create additional button and dropdown arrow icon inside using ::after selector and content. And now I'm trying to style the select in case of disabled applied on it. For the button case, I change the style by using select:disabled + button.resetDropdownButton::after. However, I still can't find the way to re-style the arrow icon when select is disabled. Anyone know how to do it?
select, option {
-webkit-appearance: none;
}
button.resetDropdownButton::after {
content: "\2716";
}
.filterWrapper {
/* flex: 1;*/
margin: 0 1rem 1rem;
position: relative;
}
.filterWrapper label {
display: block;
margin-bottom: .25rem;
}
.filterItem {
position: relative;
}
.filterItem::after {
/*add arrow down from fa-icon*/
content: '\f107';
font: normal normal normal 12px/1 FontAwesome;
color: black;
right: 8px;
top: -2px;
height: 26px;
padding: 15px 0px 0px 8px;
position: absolute;
pointer-events: none;
}
.filterItem select {
width: 100%;
/*padding: 0.5rem 1rem;*/
padding-right: 2rem;
padding-left: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 1rem;
border-radius: 6px;
border: 2px solid #CBD2E0;
transition: .2s all;
cursor: pointer;
}
.filterItem select::-webkit-input-placeholder {
color: var(--grey);
}
.filterItem select:focus {
outline: none;
background-color: rgba(214, 238, 247, 0.5);
border: 1px solid var(--blue);
box-shadow: 0 0 3px var(--blue);
}
.filterItem select > option {
border-radius: 10px;
}
.filterWrapper .resetDropdownButton {
position: absolute;
top: auto;
right: 1.15rem;
bottom: .5rem;
background-color: transparent;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
/* font-weight: bold;*/
border: 0 solid transparent;
cursor: pointer;
}
.filterWrapper .resetDropdownButton:hover {
text-decoration: underline;
}
select:disabled + button.resetDropdownButton::after {
color: gray;
opacity: 0.7;
}
select:disabled + button.resetDropdownButton:hover {
text-decoration: none;
}
select:disabled + filterItem::after {
/*add arrow down from fa-icon*/
color: yellow;
opacity: 0.7;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<div class="filterWrapper">
<div class="filterItem">
<select disabled>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<button class="resetDropdownButton"></button>
</div>
</div>
I expect the arrow icon that I create using ::after on the div wrapper can be restyle like the button one when select disabled.
Keeping the same HTML structure
This can be achieved with .filterItem:has(select:disabled)::after. But selector :has() is not well supported so far. You can read more.
select,
option {
-webkit-appearance: none;
}
button.resetDropdownButton::after {
content: "\2716";
}
.filterWrapper {
/* flex: 1;*/
margin: 0 1rem 1rem;
position: relative;
}
.filterWrapper label {
display: block;
margin-bottom: .25rem;
}
.filterItem {
position: relative;
}
.filterItem::after {
/*add arrow down from fa-icon*/
content: '\f107';
font: normal normal normal 12px/1 FontAwesome;
color: black;
right: 8px;
top: -2px;
height: 26px;
padding: 15px 0px 0px 8px;
position: absolute;
pointer-events: none;
}
.filterItem select {
width: 100%;
/*padding: 0.5rem 1rem;*/
padding-right: 2rem;
padding-left: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 1rem;
border-radius: 6px;
border: 2px solid #CBD2E0;
transition: .2s all;
cursor: pointer;
}
.filterItem select::-webkit-input-placeholder {
color: var(--grey);
}
.filterItem select:focus {
outline: none;
background-color: rgba(214, 238, 247, 0.5);
border: 1px solid var(--blue);
box-shadow: 0 0 3px var(--blue);
}
.filterItem select>option {
border-radius: 10px;
}
.filterWrapper .resetDropdownButton {
position: absolute;
top: auto;
right: 1.15rem;
bottom: .5rem;
background-color: transparent;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
/* font-weight: bold;*/
border: 0 solid transparent;
cursor: pointer;
}
.filterWrapper .resetDropdownButton:hover {
text-decoration: underline;
}
select:disabled+button.resetDropdownButton::after {
color: gray;
opacity: 0.7;
}
select:disabled+button.resetDropdownButton:hover {
text-decoration: none;
}
.filterItem:has(select:disabled)::after {
/*add arrow down from fa-icon*/
color: gray;
opacity: 0.7;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<div class="filterWrapper">
<div class="filterItem">
<select disabled>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<button class="resetDropdownButton"></button>
</div>
</div>
Change HTML structure
You can change the HTML structure and include the arrow inside your .filterItem and after the select, while also applying some CSS to make it look good.
This is better and more supported so far.
Something like this:
select,
option {
-webkit-appearance: none;
}
button.resetDropdownButton::after {
content: "\2716";
}
.filterWrapper {
/* flex: 1;*/
margin: 0 1rem 1rem;
position: relative;
}
.filterWrapper label {
display: block;
margin-bottom: .25rem;
}
.filterItem {
position: relative;
}
.filterItem select {
width: 100%;
/*padding: 0.5rem 1rem;*/
padding-right: 2rem;
padding-left: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 1rem;
border-radius: 6px;
border: 2px solid #CBD2E0;
transition: .2s all;
cursor: pointer;
}
.filterItem select::-webkit-input-placeholder {
color: var(--grey);
}
.filterItem select:focus {
outline: none;
background-color: rgba(214, 238, 247, 0.5);
border: 1px solid var(--blue);
box-shadow: 0 0 3px var(--blue);
}
.filterItem select>option {
border-radius: 10px;
}
.filterWrapper .resetDropdownButton {
position: absolute;
top: auto;
right: 1.15rem;
bottom: .5rem;
background-color: transparent;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
/* font-weight: bold;*/
border: 0 solid transparent;
cursor: pointer;
}
.filterWrapper .resetDropdownButton:hover {
text-decoration: underline;
}
select:disabled+button.resetDropdownButton::after {
color: gray;
opacity: 0.7;
}
select:disabled+button.resetDropdownButton:hover {
text-decoration: none;
}
.arrow::after {
/*add arrow down from fa-icon*/
content: '\f107';
font: normal normal normal 12px/1 FontAwesome;
color: black;
right: 8px;
top: -2px;
height: 26px;
padding: 15px 0px 0px 8px;
position: absolute;
pointer-events: none;
}
select:disabled + button.resetDropdownButton + span.arrow::after {
color: gray;
opacity: 0.7;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<div class="filterWrapper">
<div class="filterItem">
<select disabled>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<button class="resetDropdownButton"></button>
<span class="arrow"></span>
</div>
</div>
For some reason my CSS media query is not working for device widths 1001px and up. I have never seen this occur before with any of my prior projects. Any suggestions?
My media queries for devices that are 1000px and below is working fine. I have updated Chrome, cleared my cache, and still nothing. Here is my CSS...
style {
#media only screen and (min-width: 1001px) and (max-width: 1500px) {
/* --- NAV ---*/
.navbar {
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 2rem 1.5rem;
background: white;
box-shadow: 0px 0px 33px -18px gray;
position: fixed;
z-index: 2;
width: 100%;
}
.nav-item {
margin-left: 2rem;
}
.nav-link {
font-size: 13pt;
font-weight: 400;
color: #8f8f8f;
}
/* --- BODY ---*/
.header-div {
filter: brightness(100%);
height: 23rem;
}
#header-image {
max-width: 100%;
filter: brightness(80%);
margin-top: 2rem;
position: relative;
z-index: -1;
}
.header-h1 {
color: white;
font-size: 20pt;
font-weight: 400;
width: 20rem;
padding-left: 2rem;
margin-top: -16rem;
}
.header-h2 {
color: white;
font-weight: 300;
margin-top: 5px;
margin-bottom: 9px;
font-size: 15pt;
padding-left: 2rem;
}
.first-button {
color: black;
background: #f2f2f2;
border-radius: 3px;
padding: 4px 11px;
border: none;
font-weight: 400;
margin-top: 10px;
cursor: pointer;
transition: all linear 0.4s;
margin-left: 2rem;
}
.first-button:hover {
color: white;
background: black;
}
}
}
Delete style { on the first line.
Stylesheets don't need a style element selector.
Just copy and paste this:
#media only screen and (min-width: 1001px) and (max-width: 1500px) {
/* --- NAV ---*/
.navbar {
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 2rem 1.5rem;
background: white;
box-shadow: 0px 0px 33px -18px gray;
position: fixed;
z-index: 2;
width: 100%;
}
.nav-item {
margin-left: 2rem;
}
.nav-link {
font-size: 13pt;
font-weight: 400;
color: #8f8f8f;
}
/* --- BODY ---*/
.header-div {
filter: brightness(100%);
height: 23rem;
}
#header-image {
max-width: 100%;
filter: brightness(80%);
margin-top: 2rem;
position: relative;
z-index: -1;
}
.header-h1 {
color: white;
font-size: 20pt;
font-weight: 400;
width: 20rem;
padding-left: 2rem;
margin-top: -16rem;
}
.header-h2 {
color: white;
font-weight: 300;
margin-top: 5px;
margin-bottom: 9px;
font-size: 15pt;
padding-left: 2rem;
}
.first-button {
color: black;
background: #f2f2f2;
border-radius: 3px;
padding: 4px 11px;
border: none;
font-weight: 400;
margin-top: 10px;
cursor: pointer;
transition: all linear 0.4s;
margin-left: 2rem;
}
.first-button:hover {
color: white;
background: black;
}
}
I deleted the style {
}
You used "style" as a selector and put the media query in it
I am trying to change the color of the placeholder text of a contact form when hovering over it. Is this possible using only html/CSS or is javascript necessary?
You will see in the code below that I have put each input field of the contact form within its own div in order structure it properly on the page, which results in some long and messy code. But otherwise it has worked well. I have the background of the input fields set to change when hovering.
What I don't understand is why using the hover selector on the form to make the text bold works on BOTH the placeholder text and the input text; however, changing the color on hover works ONLY on the input text and NOT to placeholder.
I tried nesting the ::placeholder selector (as well as its counterparts for various web browsers) inside the hover selector in the SCSS document to change the color when hovering but with no luck.
Does anyone have any advice for how to make this placeholder text color change when hovering?
I included some images of the site and my code below.
Thanks!
Contact form as is.
Contact form on hover; placeholder text color not changing.
HTML & CSS CODE
.contact-form {
text-align: center;
justify-content: center;
position: relative;
}
.name {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 40vw;
padding: 0;
}
.first {
float:left;
width: 50%;
padding: 0.5em;
padding-left: 0;
margin: 0;
}
.form-control-first {
color: #878F93;
background-color: white;
border: none;
border-radius: 1em;
box-shadow: rgba(0, 0, 0, 0.1) 0em 0em 1em 0em;
padding: 1em;
font-family: Circe;
font-weight: 300;
font-size: 1em;
margin-top: 1em;
margin-bottom: 1em;
width: 100%;
}
.form-control-first:hover {
color: white;
font-weight: 600;
background-color: #AEBDB2;
cursor: pointer;
}
.form-control-first:focus {
outline: none;
pointer-events: none;
}
.last {
float:left;
width: 50%;
padding: 0.5em;
padding-right: 0;
margin: 0;
}
.form-control-last {
background-color: white;
color: #878F93;
border: none;
border-radius: 1em;
box-shadow: rgba(0, 0, 0, 0.1) 0em 0em 1em 0em;
padding: 1em;
font-family: Circe;
font-weight: 300;
font-size: 1em;
margin-top: 1em;
margin-bottom: 1em;
width: 100%;
}
.form-control-last:hover {
color: white;
font-weight: 600;
background-color: #AEBDB2;
cursor: pointer;
}
.form-control-last:focus {
outline: none;
pointer-events: none;
}
.email-message {
position: relative;
top: 5.5em;
bottom: 0;
left: 0;
right: 0;
padding-top: 0em;
margin: auto;
width: 40vw;
}
.form-control-email {
background-color: white;
color: #878F93;
border: none;
border-radius: 1em;
box-shadow: rgba(0, 0, 0, 0.1) 0em 0em 1em 0em;
padding: 1em;
font-family: Circe;
font-weight: 300;
font-size: 1em;
margin: 0;
margin-top: 0.5em;
margin-bottom: 0.5em;
width: 100%;
}
.form-control-email:hover {
color: white;
font-weight: 600;
background-color: #AEBDB2;
cursor: pointer;
}
.form-control-email:focus {
outline: none;
pointer-events: none;
}
.form-control-message {
background-color: white;
color: #878F93;
border: none;
border-radius: 1em;
box-shadow: rgba(0, 0, 0, 0.1) 0em 0em 1em 0em;
padding: 1em;
text-align: left;
font-family: Circe;
font-weight: 300;
font-size: 1em;
margin: 0;
margin-top: 0.5em;
margin-bottom: 0.5em;
width: 100%;
height: 30vh;
max-width: 100%;
max-height: 30vh;
}
.form-control-message:hover {
color: white;
font-weight: 600;
background-color: #AEBDB2;
cursor: pointer;
}
.form-control-message:focus {
outline: none;
pointer-events: none;
}
.form-control-submit {
justify-content: center;
align-items: center;
padding: 0.75em;
padding-left: 2em;
padding-right: 2em;
font-family: Circe;
font-weight: bold;
font-size: 0.75em;
text-transform: uppercase;
color:white;
border-radius: 2em;
background-color: #207CB4;
border: none;
display: inline-block;
margin: 0px, 2px;
text-decoration: none;
}
.form-control-submit:hover {
color: #174456;
background-color: #FFE98E;
cursor: pointer;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #878F93;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #878F93;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #878F93;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #878F93;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #878F93;
}
::placeholder { /* Most modern browsers support this now. */
color: #878F93;
}
<div class="contact-form">
<form id="contact-form" method="post">
<div class="name">
<div class="first">
<input name="first-name" type="text" class="form-control-first" placeholder="First Name" required>
</div>
<div class="last">
<input name="last-name" type="text" class="form-control-last" placeholder="Last Name" required>
</div>
<br>
</div>
<div class="email-message">
<input name="email" type="text" class="form-control-email" placeholder="Email" required>
<br>
<textarea name="message" class="form-control-message" placeholder="Type your message here." row="4" required></textarea>
<br>
<input type="submit" class="form-control-submit" value="Submit"></div>
</form>
</div>
This worked for me!
.input {
}
.input::placeholder {
color: red;
}
.input:hover::placeholder {
color: blue;
}
I am trying to create a full page transition using #Keyframes and CSS3 only without JavaScript.
Now I am stuck with my codes. Wondering if it is possible when I click on the link it will create a full page transition that moves from bottom to upward like this: http://burtonfeelgoodsnowboard.com/test/
Here's my HTML:
<div class="moveTop">
<h1>Page</h1>
<nav>
Page Up
</div>
and here's the CSS:
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
audio,
canvas,
img,
video {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
body{
font: 16px/1.5 'Lato', Arial, sans-serif;
background: #3498db;
color: #ffffff;
}
h1{
font-size: 50px;
font-weight: 300;
text-align: center;
}
span{
color: #2980b9;
font-weight: bold;
}
h2{
font-size: 35px;
text-align: left;
margin-left: -20px;
}
nav{
width: 28.09%;
margin: 0 auto;
display: block;
}
nav a {
font-size: 19px;
display: inline-block;
text-align: center;
font-family: 'Lato', sans-serif;
color: #2980b9;
font-weight: 400;
padding: 5px 15px;
text-transform: uppercase;
border-radius: 2px;
letter-spacing: 1px;
text-decoration: none;
margin-right: 10px;
border: 2px solid #ecf0f1;
border-radius: none;
}
nav a.active,nav a:hover {
background: #ecf0f1;
color: #3498db;
}
}
.moveTop{
-webkit-animation: moveToTop .6s ease both;
animation: moveToTop .6s ease both;
}
#keyframes moveFromTop {
from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}
My JSFIDDLE: https://jsfiddle.net/6z5LsL6r/
Anyone who can show me the OUTPUT VIA JSFIDDLE?
Thank in advance guys!
You can use :target selector to work around: https://jsfiddle.net/6z5LsL6r/3/
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.