Issues with Internet Explorer and background not showing - css

I'm having a few issues with my background not showing for my button elements.
Here's my CSS code:
button.button-master-lite, a.button-master-lite {
background: #92AE41;
background: -moz-linear-gradient(top, #89A73E 0%, #92AE41 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#89A73E), to(#92AE41));
border: 1px solid #89A73E;
border-bottom: 1px solid #92AE41;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 0 1px 0 0 #92AE41;
-webkit-box-shadow: inset 0 1px 0 0 #92AE41;
box-shadow: inset 0 1px 0 0 #92AE41;
color: #fff;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 1;
padding: 5px 8px 6px 8px;
text-align: center;
text-shadow: 0 -1px 0 #5D862F;
width: auto;
}
And here's my HTML:
<a class="button-master-lite" href="#">Order Now</a>
With IE 6 and IE 7 the background-color does not show. However, when I take off the other background declarations except the first one, the background shows.
The HTML page I have this button on has a number of divs and sub-divs with floats and position style elements, but I can't figure out which one is causing the issue. I tried putting the code on a completely blank page with only my stylesheet and it worked ok.
Is there anything in particular that would be causing the background not to show when I have other background declarations for other browsers?! Does it have anything to do with floats or other positioning elements?
I'd appreciate some assistance. Thanks.


You're resetting the background right after you set it. Use background-color for setting the color and then background-image for those CSS3 gradients.
Demo: http://codetester.org/2cef201d
This site helps a lot!
http://css3please.com/


try using background-color and background-image properties like so:
button.button-master-lite, a.button-master-lite {
background-color: #92AE41;
background-image: -moz-linear-gradient(top, #89A73E 0%, #92AE41 100%);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#89A73E), to(#92AE41));
border: 1px solid #89A73E;
border-bottom: 1px solid #92AE41;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; -moz-box-shadow: inset 0 1px 0 0 #92AE41;
-webkit-box-shadow: inset 0 1px 0 0 #92AE41;
box-shadow: inset 0 1px 0 0 #92AE41;
color: #fff;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 1;
padding: 5px 8px 6px 8px;
text-align: center;
text-shadow: 0 -1px 0 #5D862F;
width: auto;
}


Add display:block or display:inline-block

Related

How to create inset text shadow?

How can I create inset shadow on text? Here is what I am trying to achieve
I am creating this in Figma, on text I have added both drop shadow and text shadow. It seems that Figma only shows source code for drop shadow. Can I achieve inner shadow as well? Values in Figma are these:
x:0
y:4
blur:4
spread:0
color: #000
percentage:25%
h1 {
font-size: 6rem;
margin-bottom: 1rem;
text-shadow: -1px -1px 7px rgba(0,0,0,.2), -1px -1px 2px rgba(255,255,255,.6);
color: #C92929;
text-align: center;
}
<h1>Lorem ipsum</h1>

In CSS you can experiment with transparency of text color and its shadow.
For example:
h1 {
color: rgba(201, 41, 41, 0.8);
text-shadow: 0px 4px 4px #fff, 0 0 0 #000, 0px 4px 4px #fff;
font-size: 6rem;
margin-bottom: 1rem;
text-align: center;
}
<h1>Lorem ipsum</h1>
I think, the main problem is calculate that values of colors, to receive advisable effect.

We make a blurred white text-shadow, and a black text-shadow, while making the color of the text transparent. This can give the illusion that the text-shadow is inset... There is no such property, though.
h1 {
color: transparent;
text-shadow: 0px 4px 4px #fff, 0 0 0 #000, 0px 4px 4px #fff;
font-size: 6rem;
margin-bottom: 1rem;
text-align: center;
}
<h1>Lorem ipsum</h1>

You can try with transparency as subject here and the code below:
I know result is not the one you expect, because I did not change your shadow. But this the way I use transparantrency that is important.
h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 0px 0px 7px rgba(0,0,0,.2), 0px 0px 2px rgba(255,255,255,.2);
text-align: center;
background: white;
}
span{
background: #C92929;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display:block;
}
<h1><span>Lorem Ipsum</span></h1>

Chrome not printing out text shadow #media print

I have just modified some td's in a table because I am using a split colored backgrounds and my problem is that when I use a half white and half brown background, the text is not visible unless I set a text-shadow
This is how it looks when printed out on Safari. As you can see the text has a border shadow. This is all set in my code bellow.
border-radius: 5px;
border:1px;
border-color:#000;
-webkit-text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
-webkit-print-color-adjust: exact;
font-family: Arial, Helvetica, sans-serif;
font-size:40px;
text-align: center;
border-style: solid;
padding: 0px;
color: #000;
width: 80px;
height: 80px;
vertical-align: -52px;
font-weight: bold;
-webkit-print-color-adjust: exact;
}
When I try and print it out on Chrome, All Works the same a safari apart from the text shadow. Should be read mlk.
Has anyone been faced to this problem before?

Try something like this #media Print text-shadow under Chrome. see snippet below.
.shadow {
border-radius: 5px;
border: 1px;
border-color: #000;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
text-align: center;
border-style: solid;
padding: 0px;
color: #fff;
width: 80px;
height: 80px;
vertical-align: -22px;
font-weight: bold;
background: linear-gradient(to right, #ffffff 0%,#ffffff 48%,#752201 52%,#752201 100%);
}
/*
this is the part you are interested in
*/
#media print {
#media print and (-webkit-min-device-pixel-ratio: 0) {
.shadow {
-webkit-filter: drop-shadow(-1px 0 black) drop-shadow(0 1px black) drop-shadow(1px 0 black) drop-shadow(0 -1px black);
}
}
/*
additional print specific css styling can go here
*/
}
<div class='shadow'>mlk</div>

Div overlap another div

I have an issue I really can't figure out.
My login div overlapping my menu when my screen solution is smaller than XX. (found out when i changed from 21" to 15".)
I godt an menu witch seems to stay where it's placed, but the login box under is overlapping.
I got my css here:
/*******************
FONTS
*******************/
#import url(http://fonts.googleapis.com/css?family=Bree+Serif);
/*******************
SELECTION STYLING
*******************/
::selection {
color: #fff;
background: #f676b2; /* Safari */
}
::-moz-selection {
color: #fff;
background: #f676b2; /* Firefox */
}
/*******************
BODY STYLING
*******************/
* {
margin: 0;
padding: 0;
border: 0;
}
/*******************
TOPBAR
*******************/
#topbar {
list-style: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
letter-spacing: -0.5px;
font-size: 13px;
text-shadow: 0 -1px 3px #202020;
width: 100%;
height: 30px;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f;
/*-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;*/
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 4px #8b8b8b;
}
#wrapper1 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:300;
text-align: left;
text-decoration: none;
/* Center wrapper perfectly */
width: 300px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -200px;
}
/*
.gradient {
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
background: url(../img/gradient.png) no-repeat;
}
*/
.gradient {
/* Center Positioning */
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
/* Fallback */
background-image: url(../img/gradient.png);
background-repeat: no-repeat;
/* CSS3 Gradient */
background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213,246,255,1)), to(rgba(213,246,255,0)));
background-image: -webkit-radial-gradient(50% 50%, 40% 40%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
}
/*******************
MENU
*******************/
#menu {
margin: 40px 0;
list-style: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
letter-spacing: -0.5px;
font-size: 13px;
text-shadow: 0 -1px 3px #202020;
width: 980px;
height: 34px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 4px #8b8b8b;
}
#menu li {
display: block;
float: left;
border-right: 1px solid #5d5d5d;
border-left: 1px solid #929292;
width: 105px;
height: 34px;
border-bottom: 1px solid #575757;
border-top: 1px solid #797979;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f;
}
#menu li:not(:last-child):hover {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
background-color:#383838;
-moz-box-shadow: inset 0 0 5px 5px #535353;
-webkit-box-shadow: inset 0 0 5px 5px #535353;
box-shadow: inset 0 0 5px 5px #535353;
}
#menu li:not(:last-child):active {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
background-color:#383838;
-moz-box-shadow: inset 0 1px 2px 2px #000;
-webkit-box-shadow: inset 0 1px 2px 2px #000;
box-shadow: inset 0 1px 2px 2px #000;
}
#menu li a {
color: white;
text-decoration: none;
text-align: center;
display: block;
line-height: 34px;
outline: none;
}
#menu form input {
width: 76px;
height: 20px;
margin-left: 9px;
margin-top: 8px;
border: none;
padding-left: 20px;
padding-right: 10px;
color: #eee;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-image: url("../img/magnifier.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));
background-image: url("../img/magnifier.png"), -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
background-repeat: no-repeat;
background-color: #6E6E6E;
-moz-box-shadow: inset 0 2px 1px 1px #363636;
-webkit-box-shadow: inset 0 2px 1px 1px #363636;
box-shadow: inset 0 2px 1px 1px #363636;
}
#menu li:first-child {
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
border-left: none;
}
#menu li:first-child a img {
vertical-align: middle;
margin-top: -2px;
}
#menu li:last-child {
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
border-right: none;
width: 124px;
}
#-webkit-keyframes showMenu {
from { opacity: 0; top: -20px; }
to { opacity: 1; }
}
#menu {
-webkit-animation: showMenu 1s;
position: relative;
}
/*******************
LOGIN FORM
*******************/
.login-form {
width: 300px;
margin: 0px auto;
position: absolute;
z-index:5;
background: #f3f3f3;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/*******************
HEADER
*******************/
.login-form .header {
padding: 40px 30px 30px 30px;
}
.login-form .header h1 {
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 28px;
line-height:34px;
color: #414848;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
margin-bottom: 10px;
}
.login-form .header span {
font-size: 11px;
line-height: 16px;
color: #678889;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
}
/*******************
CONTENT
*******************/
.login-form .content1 {
padding: 0 30px 25px 30px;
}
/* Input field */
.login-form .content1 .input {
width: 188px;
padding: 15px 25px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
font-size: 14px;
color: #9d9e9e;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
background: #fff;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}
/* Second input field */
.login-form .content1 .password, .login-form .content .pass-icon {
margin-top: 25px;
}
.login-form .content1 .input:hover {
background: #dfe9ec;
color: #414848;
}
.login-form .content1 .input:focus {
background: #dfe9ec;
color: #414848;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
.user-icon, .pass-icon {
width: 46px;
height: 47px;
display: block;
position: absolute;
left: 0px;
padding-right: 2px;
z-index: 3;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.user-icon {
top:147px; /* Positioning fix for slide-in, got lazy to think up of simpler method. */
background: rgba(65,72,72,0.75) url(../img/user-icon.png) no-repeat center;
}
.pass-icon {
top:221px;
background: rgba(65,72,72,0.75) url(../img/pass-icon.png) no-repeat center;
}
/* Animation */
.input, .user-icon, .pass-icon, .button, .register {
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
}
/*******************
FOOTER
*******************/
.login-form .footer {
padding: 25px 30px 40px 30px;
overflow: auto;
background: #d4dedf;
border-top: 1px solid #fff;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
}
/* Login button */
.login-form .footer .button {
float:left;
padding: 11px 25px;
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 18px;
color: #fff;
text-shadow: 0px 1px 0 rgba(0,0,0,0.25);
background: #56c2e1;
border: 1px solid #46b3d3;
border-radius: 5px;
cursor: pointer;
box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
}
.login-form .footer .button:hover {
background: #3f9db8;
border: 1px solid rgba(256,256,256,0.75);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.login-form .footer .button:focus {
position: relative;
bottom: -1px;
background: #56c2e1;
box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
}
/* Register button
.login-form .footer .register {
display: block;
float: right;
padding: 10px;
margin-right: 20px;
background: none;
border: none;
cursor: pointer;
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 18px;
color: #414848;
text-shadow: 0px 1px 0 rgba(256,256,256,0.5);
}
.login-form .footer .register:hover {
color: #3f9db8;
}
.login-form .footer .register:focus {
position: relative;
bottom: -1px;
}*/
I'm not a genius in CSS, so im glad to see people helps in here, and so damn fast generally!
Thank you! :-)

edit #wrapper1 like this:
#wrapper1 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
text-align: left;
text-decoration: none;
width: 300px;
height: 400px;
position: absolute;
left: 50%;
top: 145px; /* or more */
margin-left: -150px;
}
and your gradient like this:
.gradient {
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 145px; /* as the top of wrapper */
margin-left: -300px;
margin-top: 0px;
background-image: url(../img/gradient.png);
background-repeat: no-repeat;
background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213,246,255,1)), to(rgba(213,246,255,0)));
background-image: -webkit-radial-gradient(50% 50%, 40% 40%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
}
jsFiddle
Update:
as the #Atul you can use position:relative for #wrapper1 too. look at this code:
#wrapper1 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
text-align: left;
text-decoration: none;
width: 300px;
height: 400px;
position: relative;
left: 50%;
margin-left: -150px;
}
jsFiddle

Since you position your inlogbox absolute it will overlap the menu at some point. (When the window size is smaller than the height of the menu and inlogbox together).
The only thing you can do is position your inlogbox static.
Therefor, change:
#wrapper1 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:300;
text-align: left;
text-decoration: none;
/* Center wrapper perfectly */
width: 300px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -200px;
}
To:
#wrapper1 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:300;
text-align: left;
text-decoration: none;
width: 300px;
height: 400px;
margin: 0 auto;
}
The inlogbox will then be under the menu . If you want extra space between the menu and inlogbox, simply add a margin-top to the inlogbox.

IE 9 (Browser mode:ie9, document mode:standards) supports CSS3 box-shadow?

Is IE really support CSS3 box-shadow? thanks.
a {
background: -moz-linear-gradient(center top , #6CAB00 0px, #486E00 90%) repeat scroll 0 0 transparent;
border: 1px solid #315100;
box-shadow: 0 1px 0 #BBED62 inset;
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
float: right;
font-size: 17px;
font-weight: normal;
height: 32px;
line-height: 32px;
padding: 5px 10px;
text-shadow: 0 1px 0 #000000;
}

IE supports box-shadow CSS3 on the new versions. What version of IE you use?

firefox chrome padding issue with button

I have a problem with a project, i don't know way, chrome and firefox are not display the same height with my buttons. I'd been looking around and I found that firefox has an issue with buttons, so i add the code below, but still doesn't work. What could it be?
.button-type::-moz-focus-inner { border: 0; padding: 0; margin:0; }
.button-type {
background: #a9a9a9;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 3px rgba(255,255,255,0.2), inset 0 2px rgba(255,255,255,0.2), inset 0 28px 22px rgba(255,255,255,0.2), inset 0 -10px 28px rgba(0,0,0,0.2);
box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 3px rgba(255,255,255,0.2), inset 0 2px rgba(255,255,255,0.2), inset 0 28px 22px rgba(255,255,255,0.2), inset 0 -10px 28px rgba(0,0,0,0.2);
font: Arial, Helvetica, sans-serif;
line-height: 1;
padding: 8px 15px;
width: auto;
height: auto;
border: none;
text-align: center;
font-size: 13px;
color: #fff;
cursor: pointer;
display: block;
text-decoration: none;
text-shadow: -1px -1px #333;
}
.button-type.black {
background: #000;
color: #fff;
}
.button-type.gray {
background: #a9a9a9;
}
.button-type.light-gray {
background: #d3d3d3;
color: #222;
}

Solve it the solution (and error) was:
display:block
replace it with:
display:inline

Resources