My html does not load the css style file. The preview povided by Eclipse correctly shows the changes I made in the css file. If I am loading the file with Firefox on the other hand these changes are gone. This also hapens if loaded on another machine. I emptied my cache etc. (using CCleaner). However if I load the html file with IE all changes are visible. Intrestingly this is only the case for colors.
I include the css file using the following line:
<link rel="stylesheet" type="text/css" href="./css/style.css" />
The releveant css lines:
#menubar
{ width: 920px;
height: 50px;
text-align: center;
margin: 0 auto;
background: #000099;
background: -moz-linear-gradient(#535353, #1d1d1d);
background: -o-linear-gradient(#535353, #1d1d1d);
background: -webkit-linear-gradient(#535353, #1d1d1d);
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border: 15px 15px 15px 15px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
}
The lines in html:
<div id="menubar">
<ul id="menu">
<li class="current">Home</li>
<li>Practical Information</li>
<li>People</li>
<li>Programme</li>
<li>Contact Us</li>
</ul>
</div><!--close menubar-->
Based on the comment:
I have changed the color to blue #000099 but it remains in the original grey color that was there before
You have 4 rules to set the background colour.
background: #000099;
background: -moz-linear-gradient(#535353, #1d1d1d);
background: -o-linear-gradient(#535353, #1d1d1d);
background: -webkit-linear-gradient(#535353, #1d1d1d);
Each one is applied in turn and ignored if the rule isn't supported by the browser.
You are only changing the first rule, which is the only rule supported by IE.
Since Firefox supports -moz-linear-gradient that continues to override the previous background colour rule, so it gets ignored.
You need to change your gradient rules too.
Note, however, that the -prefix- rules are experimental and should generally be avoided for production work and that you are missing an unprefixed linear-gradient for use in browsers which have their final implementation of the property. Support for prefixed rules will be dropped at some stage.
Related
Here is my issue. I have 2 css classes, my elements can have either
.classA{box-shadow:inset -2px 0px 0px 0px rgba(63,191,31,1);}
.classB{box-shadow:inset -2px 0px 0px 0px rgba(204,29,29,1);}
I wish to use a third class to change the inset but not the color
.classC{box-shadow:inset -10px 0px 0px 0px;}
That works (the shadow is here) but the color turns black. I would like to keep my original color.
How to change the shadow properties using CSS ONLY without losing the color?
Box-shadow cannot be broken into parts like for example border can. But a trick you can use is that box-shadow inherits its color from the color attribute of the element.
<div class="box">
</div>
<div class="shadow box">
</div>
.box{
box-shadow: 0 0 10px;
width: 100px;
height: 100px;
margin: 10px;
background: #fff;
}
.box.shadow{
color: rgba(255,0,0,.3);
}
http://jsfiddle.net/82z8r73o/
I have the following HTML
<div id="borderContainer" class="scViewer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false">
<div id="buttonPagerContentPane" data-dojo-type="dijit/layout/ContentPane" align="center" data-dojo-props="region:'bottom'" class="buttonContentPane">
<div id="buttonPagerTitle" class="ContentPaneTitle">
Sheet Selector <br>
</div>
<button data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-point="PreviousButtonAttachNode" id="previousButton" class="scViewButtonContent buttonContentPane">
Previous
</button>
<button data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-point="NextButtonAttachNode" id="nextButton" class="scViewButtonContent">
Next
</button>
</div>
</div>
And the following CSS:
.scViewer {
color: #2546ff;
}
.scViewer .buttonContentPane {
padding: 5px 5px;
color:#FFFFFF;
border-radius: 5px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.scViewer .ContentPaneTitle{
color: #2546ff;
font-weight: bold;
}
.scViewer .buttonContentPane .scViewButtonContent{
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
text-decoration: none;
}
My problem is that the two previous/next buttons don't inherit the buttonContentPane class without explicitly defining it again, even though it is within the parent buttonPagerTitle <div> ..To demonstrate this above, I explicitly define the nextButton without the buttonContentPane property, and the resultant HTML in the dev tools does not contain the buttonContentPane in the defined, but the inherited section contains buttonContentPane with its properties grayed out:
My overall goal is to boilerplate CSS code for re-use within my organization. Is my syntax wrong? Did I structure the selectors improperly? Thank you for your time
I assume you want your 'next' and 'previous' buttons to inherit these properties:
.scViewer .buttonContentPane {
padding: 5px 5px;
color:#FFFFFF;
border-radius: 5px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
Unfortunately (for you), not all properties are inherited by an element's children/descendants, and not all elements will inherit from their parents/ancestors. You're experiencing both problems.
Padding, border-radius, and box-shadow aren't automatically inherited: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
Color usually is inherited but buttons are form elements, and form elements don't inherit properties from their parents: Why are CSS-styles not inherited by HTML form fields?
You'll need to either directly add the class to the buttons if you want them to be styled correctly (as you mentioned you did in your question), or you'll need to write rules in your CSS that explicitly state the buttons should inherit properties from their parents.
The following is a simple example showing how to explicitly tell an element to inherit properties from its parent. Click "Run code snippet" to see the resulting buttons.
.wrapper1,
.wrapper2 {
color:red;
padding: 20px;
box-shadow: 0 0 3px rgba(0,0,0,0.4);
border-radius: 10px;
margin: 10px;
width: 100px;
}
.wrapper2 button {
color: inherit;
padding: inherit;
box-shadow: inherit;
border-radius: inherit;
border: none;
}
<div class="wrapper1">
This button doesn't inherit.
<button>My button</button>
</div>
<div class="wrapper2">
This button does inherit.
<button>My button</button>
</div>
I found out that using PIE.htc will hellp to resolve the problem with IE7-8 when using box shadow.
I did exactly as they are explaining on the official website: http://css3pie.com/
But I can't get it to work on IE7 and IE8:
this is my code:
.shadow {
behavior: url(PIE.htc);
width: 200px;
height: 200px;
border: 1px solid #696;
text-align: center;
-webkit-box-shadow: #666 0px 0px 5px;
-moz-box-shadow: #666 0px 0px 5px;
box-shadow: #666 0px 0px 5px;
background: #EEFF99;
}
<div class="shadow">
Example
</div>
Just put your PIE.htc file in the same directory where you have put your html and hopefully it will work.
behavior: url(PIE.htc);
according to Documentation
Of course you will need to adjust the path to match where you uploaded PIE.htc in step 2. Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.
Reference Images: Image1
Image 2
Give .shadow{ position: relative}
For PIE to work properly, give it a position through CSS.
I want to create a content wrapper with a left and right shadow, not a bottom shadow. This is sort of what I'm going for: http://community.mybb.com/ notice the shadow (though this uses an image, not css).
What's the best way to do this with CSS?
Your best bet is to use an image to be compatible with older browsers. For CSS you'll use box-shadow but IE9 is the first IE to support box-shadow.
That being said you'll need to use two box-shadow properties if you want to use CSS. You'll need to do two of them.
Take a look at http://css-tricks.com/snippets/css/css-box-shadow/
Also the generator at http://css3generator.com/
Here is a vague idea of what to do
<div id="leftBorder">
<div id="rightBorder">
<div id="content">Content here</div>
</div>
</div>
#leftBorder {
-webkit-box-shadow: -10px 0px 5px 0px #999999;
-moz-box-shadow: -10px 0px 5px 0px #999999;
box-shadow: -10px 0px 5px 0px #999999;
}
#rightBorder {
-webkit-box-shadow: 10px 0px 5px 0px #999999;
-moz-box-shadow: 10px 0px 5px 0px #999999;
box-shadow: 10px 0px 5px 0px #999999;
}
Alternatively you can potentially set just the border property alone bit it won't give you the nice fuzzy shadow look.
It may be tough to support below IE9 and you may need to throw in some pictures anyway. An old A List Apart article explains how to do this but it's not pretty.
http://www.alistapart.com/articles/cssdrop2/
I got a problem rendering box-shadows over floating divs!
Ive tested in chrome and firefox with the same result.
<html>
<head>
</head>
<body>
<div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
</div>
<div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
</div>
</body>
</html>
Edit: The div on top doesn't render its shadow on the div below, is there any fix for this problem or do I have to try a different solution?
regards
/Joel
Works for me in Firefox 4, but that code will never work on chrome or safari, the -moz is a vendor tag indicating mozilla.
You need add all of the following
-moz-box-shadow: 0px 8px 8px #000; width: 200px;
-webkit-box-shadow: 0px 8px 8px #000; width: 200px;
box-shadow: 0px 8px 8px #000; width: 200px;
-webkit is the vendor tag for Chrome/Safari, the following will add in drop shadows for the vendors that support it and then when it's universally supported the last rule will cover all browsers.
Edit: To get the top div's dropshadow over the other element you must position:relative and then give it a z-index higher than the bottom one.
What's wrong with them? If you're worried about not seeing the bottom shadow of the top div it's because you need a little separation. If you're having trouble seeing the box-shadow it's because you need to use vendor-specific prefixes at this stage, like so.
Demo: jsfiddle.net/q5yf3
If you want them to be stuck together, just give the first div a z-index with position:relative and it will look how you want it to.
HTML:
<div class="bs up"></div>
<div class="bs"></div>
CSS:
div.bs {
float:left;
clear:left;
margin:1em;
width:200px;
height:200px;
background:#aaa;
box-shadow:0 8px 8px #000;
-moz-box-shadow:0 8px 8px #000;
-webkit-box-shadow:0 8px 8px #000;
}
div.up { z-index:10; position:relative; }
Demo: jsfiddle.net/VaVhy
That said, I'd also recommend looking into using rgba() instead of hex values for box-shadow color as it renders the shadow a lot more naturally on non flat-colored backgrounds.
looks fine in firefox because you are using -moz-box-shadow, for webkit browsers you will have to use -webkit-box-shadow