Basically the below code should simply be a white page with a shadow around the edge. This works fine in Chrome but I can't seem to get it to work in Firefox!
<html>
<head>
<style type=text/css>
body {
background:#ffffff;
font-family:arial;
margin:auto;
box-shadow:inset 0px 0px 100px #333333;
-moz-box-shadow:inset 0px 0px 100px #333333;
-webkit-box-shadow:inset 0px 0px 100px #333333;
}
</style>
</head>
<body>
</body>
</html>
View the page here:
http://pastehtml.com/view/bagevr6ke.html
Look at it in Chrome then Firefox, and tell me if you see a difference : )
Cheers
EDIT: So the post below explained how to fix the above code, a CSS reset worked and also i learned about quirk mode and doctypes :)
However the CSS page i am working on is still suffering from this bug no matter what reset i use. I am not currently using a Doctype as i am not sure what i should put, or whether it would fix the bug.
Here is the complete site:
http://middle.dyndns-server.com/results.html
And the stylesheet:
body {
background:url('bg.png');
font-family:arial;
margin:auto;
box-shadow:inset 0px 0px 100px #333333;
-moz-box-shadow: inset 0px 0px 100px #333333;
-webkit-box-shadow:inset 0px 0px 100px #333333;
}
#footer {
padding-bottom:10px;
margin-top:30px;
}
#page {
width:960px;
height:auto;
background-color:#ffffff;
#background:url('bg2.png');
/*Space*/
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
margin-top:-10px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
/*Shadow*/
-moz-box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000;
-webkit-box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000;
box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000;
/*Border Radius*/
border-radius:0px 0px 20px 20px;
-moz-border-radius:0px 0px 20px 20px;
-webkit-border-radius:0px 0px 20px 20px;
-o-border-radius:0px 0px 20px 20px;
}
input[type=text] {
background: -webkit-gradient(linear,left top,right bottom,from(#333333),to(#666666));
background: -moz-linear-gradient(top, #333333, #666666);
filter: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#666666');
border-width:1px;
border-style:solid;
border-color:#777777;
color:ffffff;
}
.line1 {
float:left;
align:center;
padding-bottom:0px;
}
hr {
clear:left;
color:#111111;
}
/* The *normal* state styling */
.btn{
background-image:linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
background-image:-webkit-gradient(linear, 0% bottom, 0% top,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2)));
background-image:-moz-linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#80333333', EndColorStr='#20000000');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#80333333', EndColorStr='#20000000')";
background-color:rgb(51, 51, 51);
border:1px solid rgb(0, 0, 0);
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:5px 10px;
box-shadow:0px 0px 6px rgb(130, 130, 130);
-moz-box-shadow:0px 0px 6px rgb(130, 130, 130);
-webkit-box-shadow:0px 0px 6px rgb(130, 130, 130);
font-size:12px;
font-weight:normal;
color:rgb(255, 255, 255);
text-shadow:0px 0px 1px rgb(255, 255, 255);
}
/* The *hover* state styling */
.btn:hover{
background-image:linear-gradient(-90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
background-image:-webkit-gradient(linear, left top, left bottom,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2)));
background-image:-moz-linear-gradient(-90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
box-shadow:0px 0px 6px rgb(0, 0, 0);
-moz-box-shadow:0px 0px 6px rgb(0, 0, 0);
-webkit-box-shadow:0px 0px 6px rgb(0, 0, 0);
}
/* The *active* state styling */
.btn:active,.btn:focus{
background-image:linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
background-image:-webkit-gradient(linear, 0% bottom, 0% top,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2)));
background-image:-moz-linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
}
a {
font-family:arial;
outline:none;
text-decoration:none;
color:333333;
}
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:active {
text-decoration:none;
color:ffffff;
}
a:hover {
text-decoration:none;
}
I am sure its not all great but i am learning and this issue is my main focus right now : )
Thanks a lot.
Add this:
html, body {
height: 100%
}
http://jsbin.com/oyuzug
There is nothing in body, so it has no height.
The only reason it worked without this in Chrome is because you did not include a doctype as the very first line to enable Standards Mode.
Test these in Chrome:
Your original code: http://jsbin.com/urimah
Your original code with doctype: http://jsbin.com/urimah/2
Conclusion: Always include a doctype as the very first line to avoid Quirks Mode and the inconsistencies it brings between different browsers.
Firefox shows you the right thing because right now body has no height. So you have to define the height of your body.
Write this in your CSS:
html, body {
height: 100%
}
So the answer marked as correct CSS - Mozilla bug? box-shadow:inset not working properly does not work for me. Why? Because the example includes no content. When you style the <body> and <html> elements with height: 100% it creates a strange bug where the 100% is technically registering as 100% of the viewport rather than 100% of the window height.
This is a great example of how to do this properly: http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html. Styling the body and html elements at height: 100% is correct, however, your inner-shadow needs to be attached to another element (can't be body or html) and then min-height: 100% as well as box-shadow: 0 0 100px #000 attached to the shim, e.g.
html, body { height: 100% }
#styled-div {
min-height: 100%;
box-shadow: 0 0 100px #000;
}
Related
I'm creating a custom sider toggle for an ant design project and I'm struggling to preserve three sides (i.e top, right, left) of the box-shadow (i.e. 2px 2px 8px rgba(0, 0, 0, 0.15)) and remove the box-shadow/blur entirely from the left side. My most recent attempt is below. Any thoughts?
JSX:
<span onClick={this.toggleCollapse} className="ant-layout-sider-zero-width-trigger">
{collapsed ? <Icon type="menu-unfold" /> : <Icon type="menu-fold" />}
</span>
LESS:
.ant-layout-sider-zero-width-trigger {
background: #fff;
color: #000000a6;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15), inset -2px 0px 0px #fff;
&:hover {
background: #fff;
}
}
btw I've seen similar questions on Stack but none worked for me after much experimentation.
An idea is to use another container and rely on some overflow:
.container {
display:inline-block;
padding:5px 5px 5px 0;
overflow:hidden;
}
.box {
width:200px;
height:50px;
background: #fff;
color: #000000a6;
box-shadow:
2px 2px 8px rgba(0, 0, 0, 0.15),
inset -2px 0px 0px #fff;
}
<div class="container">
<div class="box">
</div>
</div>
You could increase the offset of the shadow and reduce its size:
html {
background: white;
}
body {
padding: 2em;
margin: 2em;
background: yellow;
box-shadow: 4px 4px 8px -4px, inset -2px 0px 0px #fff;
}
I have a program in html that has a progress element. It turns blue in firefox, but refuses to work in chrome, and it turns green, which I don't want. my code
progress {
color: #0063a6;
font-size: .6em;
line-height: 1.5em;
text-indent: .5em;
width: 30em;
height: 3em;
border: 1px solid #0063a6;
background: #fff;
}
<progress value ="50" max ="100"></progress>
You need to do two things. First reset the style of the progressbar to it's default values and then target the appearance with a browser specific pseudo class like so:
progress {
-webkit-appearance: none;
appearance: none;
}
progress::-webkit-progress-bar {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
styling the bar itself is done using background-image:
progress[value]::-webkit-progress-value {
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #09c, #f44);
border-radius: 2px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}
Read the full article here:
https://css-tricks.com/html5-progress-element/
I've got a weird situation. I'm using AngularJS to dynamically set the position of a range slider based on the current position in the video. If I style just the thumb (by enabling the bottom two calls below) the thumb moves along the slider in real time as expected. If I style the input[type="range"] as in the first section below, the thumb doesn't move dynamically unless you mouse over it.
I have tried other CSS styles of range inputs that I pulled from various websites, and I experience the same outcome each time. This seems to affect only Chrome. The weirdest thing is that IE works just fine (who would have thought?!) with the styled slider and the thumb moves along nicely.
input[type="range"] //::-moz-range-track //::-ms-track
{
outline:none;
background: rgb(127, 183, 219);
width: 130px;
height: 6px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-wekkit-border-radius: 8px;
}
input[type="range"]::-webkit-slider-thumb// ::-moz-range-thumb ::-ms-thumb
{
outline:none;
-webkit-appearance:none !important;
width:20px;
height:20px;
-webkit-appearance: none;
border-radius: 10px;
-moz-border-radius: 10px;
-wekkit-border-radius: 10px;
border:1px solid rgba(127, 183, 219, 1.0);
background: #FFF;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
-moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
}
input[type="range"] ::-webkit-slider-thumb:hover// ::-moz-range-thumb:hover ::-ms-thumb:hover
{
outline:none;
-webkit-appearance:none !important;
width:22px;
height:22px;
-webkit-appearance: none;
border-radius: 10px;
-moz-border-radius: 10px;
-wekkit-border-radius: 10px;
border: 1px solid rgba(127, 183, 219, 1.0);
background: #FFF;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
-moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
}
the text fade should appear with solid text on the left and faded text on the right. in this example i made how would you fade jupiter to look like earth and mars using only css?
.hello-jupiter {
display:inline-block;
background: rgba(215, 215, 215, 1);
color:white;
box-shadow: inset 0px 10px 15px -10px rgba(50, 50, 50, .5), inset 0px -10px 25px -10px rgba(50, 50, 50, .75);
}
jsfiddle <-- actually uses box-shaodw and not a gradient
I find this website is handy for CSS...
http://www.css3maker.com/css-gradient.html
CSS generated from the css3maker website:
.hello-jupiter {
display:inline-block;
background: rgba(215, 215, 215, 1);
color:white;
background:-webkit-gradient(linear, 100% 0%, 37% 0%, from(#FFFFFF), to(#000000))
}
This will only work in Chrome and Safari versions 4.0+
Here is an answer. I just floated a div to the right faded it from 0 to 100% opacity.
.hello-jupiter {
display:inline-block;
background: rgba(215, 215, 215, 1);
color:white;
box-shadow: inset 0px 10px 15px -10px rgba(50, 50, 50, .5), inset 0px -10px 25px -10px rgba(50, 50, 50, .75);
position:relative;
}
.fader {
position:absolute;
top:0px;
right:0px;
display:block;
width:75px;
background: -webkit-linear-gradient(left,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 75%)
}
http://jsfiddle.net/w92xv/45/
This page renders great in FF, Chrome, etc.. However in IE 7 and 8, the close "X" which is a background image does not line up. Any ideas? I tried to set the background-position etc..
The code I have:
.startup-container
{
width: 455px;
}
.close-startup-home
{
background: #c00 url("http://spotlightonhealthyliving.com/btn_closex.png") 0px -8px no-repeat;
float: right;
height: 52px;
width: 60px;
}
.menu-outer
{
background: #545454;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .4);
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .4);
}
.menu-inner
{
background: #3f3f3f;
-moz-box-shadow: inset 0px 0px 4px 3px rgba(0, 0, 0, .1);
box-shadow: inset 0px 0px 4px 3px rgba(0, 0, 0, .1);
-moz-border-radius:5px;
border-radius:5px;
}
.startup-box
{
width:439px;
line-height:20px;
text-align: center;
color:#fff;
padding-top:5px;
padding-bottom:5px;
}
.startup-box-inner
{
width:389px;
height:99px;
padding:20px;
margin-left:5px;
margin-right:5px;
}
<div class="startup-container">
<div class="close-startup-home"></div>
<div class="menu-outer startup-box">
<div class="menu-inner startup-box-inner"></div>
</div>
</div>
Give a position: absolute to your div containing the close button and position it according to that.
.startup-container {
width: 455px;
position: relative
}
.close-startup-home {
background: #c00 url("http://spotlightonhealthyliving.com/btn_closex.png") 0px -8px no-repeat;
float: right;
height: 52px;
width: 60px;
position: absolute;
right: 0;
}