I have mapped the mimi type in web.xml
<mime-mapping>
<extension>htc</extension>
<mime-type>text/x-component</mime-type>
</mime-mapping>
My xhtml file resides in WebContent/tasks/task/include/test.xhtml
My css file resides in WebContent/css/test.css
My PIE.htc file resides in WebContent/pie/PIE.htc
In my CSS, I have the rule:
.test{
border-radius:5px;
position:relative;
zoom:1;
behavior: url(/pie/PIE.htc);
}
But IE8 is not displaying rounded corners. What am I doing wrong?
OK I fixed it. I added the full url such as http://www.test.com/ and also tried ../
.test{
border-radius:5px;
position:relative;
z-index:0;
behavior: url(http://www.test.com/tasks/pie/PIE.htc);
}
OR
.test{
border-radius:5px;
position:relative;
z-index:0;
behavior: url(../../../pie/PIE.htc);
}
Related
I'm looking to create an internationalised application which will support Right To Left content.
Therefore standard (LTR) would be:
div{
padding-left:10px;
}
Whereas RTL would be:
div{
padding-right:10px;
}
Using Less I could do:
#left:right;
.div{
padding-#{left}:10px;
}
Which would produce:
.div {
padding-right: 10px;
}
Is there a way of producing two CSS files for when #left = right and #left = left?
For example I could have:
Styles.less
Which produces:
Styles.css
Styles.rtl.css
this file name will be styles-rtl.less
#import "styles.less";
/*override variables */
#direction :ltr;
#oposite-direction :rtl;
#start-direction :left;
#end-direction :right;
#tr-direction :-1;/*for manipulation transform*/
Example for using:
/*positions*/
position:absolute;
right:0;
/*will be*/
#{start-direction}:0;
/**************/
float:right;
/*will be*/
float:#start-direction;
/**************/
direction:rtl;
/*will be*/
direction:#direction;
/*************/
transform:translateX(180px);
/*will be*/
transform:translateX(180px*#tr-direction);/*multiple by minus*/
How would I add a small triangle image located locally on my machine at that location to the beginning of the table line?
Heres my CSS
stock:nth-child(1){
display:table-row;
content: url('..\stock\down.gif');
color:red;
}
And the corresponding XML
<stock class="down">
<symbol>AAPL</symbol>
<company>Apple Computer, Inc.</company>
<lastSale>$15.26</lastSale>
<netChange>-0.17</netChange>
<pChange>-1.10%</pChange>
<volume>5.548</volume>
</stock>
Here is a much much better way to write the css
stock[class~=down]{
border-bottom: 2px solid black;
display:block;
background: url("down.gif") no-repeat;
color:red;
}
It's a lot easier to do this with XSLT, where you can run a foreach across each of the children in your file and apply styles from a spreadsheet, but you can do this with XML and CSS. You'll need to set the headers in your xml file, and then call the stylesheet, like so:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="stylesheet.css"?>
<stock class="down">
<symbol>AAPL</symbol>
<company>Apple Computer, Inc.</company>
<lastSale>$15.26</lastSale>
<netChange>-0.17</netChange>
<pChange>-1.10%</pChange>
<volume>5.548</volume>
</stock>
Then you just need to modify your CSS file to make whatever changes you like.
For instance:
(Edit for image):
stock {
display:block;
margin-left:20px;
}
symbol {
display: list-item;
list-style: url("..\stock\down.gif");
}
company {
display: list-item;
list-style: url("..\stock\down.gif");
}
You can then change this how you like, in the same way you'd style for HTML
I found This article but I want to use a picture in ::before and ::after content attribute, not Font Icons.
Original:
.icon-dribbble:before, .icon-dribbble:after {
content: "\e007";
}
The best I've come up so far (Which doesn't work, The pic does show up but It doesn't work as intended like in the article):
.icon-dribbble:before, .icon-dribbble:after {
background-image: url('icon.png');
background-repeat:space;
background-size: 40px 40px;
background-position:center;
top:0px;
content: "";
}
The problem is your pseudo elements, with no content in them, have nothing to size themselves to so you'll need to size them manually. Firstly, set their display value to block or inline-block, whichever suits your needs. Then set the height and width to the size of your image, which I'm guessing is 40 pixels square.
Also, you've set a value for the top property, without setting one for position. I've assumed and used absolute below.
NOTE: While the above points still apply, the below has been heavily edited from the orginal solution provided following many clarifications from the asker.
.icon{
background:#404040;
border-radius:50%;
display:block;
overflow:hidden;
height:60px;
position:relative;
text-indent:60px;
transition:background .5s;
white-space:norwap;
width:60px;
}
.icon:hover{
background:#3c9;
}
.icon::before,.icon::after{
background-position:center center;
background-repeat:no-repeat;
background-size:40px 40px;
content:"";
display:block;
height:40px;
left:10px;
position:absolute;
transition:top .5s;
width:40px;
}
.icon::before{
background-image:url('http://quran.ksu.edu.sa/images/resize3.png');
top:10px;
}
.icon::after{
/* You'll need a different image below */
background-image:url('http://quran.ksu.edu.sa/images/resize3.png');
top:70px;
}
.icon:hover::before{
top:-70px;
}
.icon:hover::after{
top:10px;
}
.icon:hover::before{
top:-70px;
}
<a class="icon" href="#">text</a>
I'm trying to add PT Sans into a newsletter, but for some reason it isn't loading I've copied almost all of the code, but it isn't working. I would be so grateful for anyone who can help.
Here is the CSS code:
h1, h2, h3 {
font-family: 'PT Sans', sans-serif;
}
and the HTML code:
<link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
EDIT:
Here's the rest of the CSS:
h1, h2, h3 {
font-family: 'PT Sans', sans-serif;
}
#logo{width:810px}
#saveDateText{
position:relative;
top:30px;
left:80px;
font-size:50px;
color:rgb(228,242,214)
}
#october{
position:relative;
top:0px;
left:90px;
font-size:35px;
color:rgb(228,242,214)
}
#raftLogo{
position:relative;
top:-125px;
left:550px;
}
#saveTheDate {
background-color:rgb(123, 190, 48);
height:170px;
width:810px;
}
#honoring {
position:relative;
background-color:rgb(9, 65, 30);
width:810px;
top:-30px;
font-size:20px;
height:400px;
}
#honoringTextDiv {
position:relative;
width:740px;
left:70px;
top:50px
}
#infoText {
color:white;
font-size:25px;
}
#honoringText {
color:rgb(242, 183, 51);
}
#benifit{
color:white;
font-size:25px
}
#morgridge {
position:relative;
top:20px
}
#sponsorships {
position:relative;
left:20px;
top:-30px;
height:300px;
width:400px;
border-right-style:solid;
border-right-color:rgb(160, 202, 129);
border-right-width:1px;
}
#inventiveSponsorsDiv {
position:relative;
left:425px;
top:-155px
}
#dmns {
position:relative;
top:-40px;
}
#1stbank {
position:relative;
top:80px;
}
#inspirationalSponsors, #inventiveSponsors{
position:relative;
top:0px;
color:rgb(123,190,48);
font-size:18px;
}
#inventiveSponsors {
top:-20px;
}
#names, #names2 {
line-height:25px;
font-size:14px
}
#names2 {
position:relative;
top:-94px;
left:160px;
text-align:left;
}
Try to use URL without "http":
<link href="//fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
Few tips:
1. Use the HTML code in the beginning of your <head>, before anything else. Example:
<head>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
/* Rest of the code after this */
</head>
2. If that doesn't work, put this in your CSS file instead:
#import url(http://fonts.googleapis.com/css?family=PT+Sans);
Ask yourself this:
1. Are you developing online or offline (if online check number 2)
2. Make sure your browser does not have a shield icon because this
means the browser is blocking the font and you need to click
the allow button.
3. Check for spelling errors or anything suspicious.
4. Finally #import is the safest way I think.
I had the same problem and if using the CSS tag of:
"font: 3em bold;" ---this overrides the google api call and loads your next default font.
SOLUTION: Use font-style and font-size
Check whether your css file is loaded after vendor stylesheets. For example, bootstrap.css should be before your css file.
I had this issue today. And the metter if you made your test in with a httpsurl you need to change the link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"
by href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet".
Otherwise, there is a conflict issue.
I hope that will hope someone.
I'm trying to embed an image into my css directly as encoded data:
background:#fae url("data:image/gif;base64,
R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jv
b29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//
mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Eky
ky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCm
TIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr
7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7")
no-repeat;
But, it fails. What's even more weird is that embedding the data URI directly into an image tag does work:
You can check my example out at: http://jsfiddle.net/cAb2y/1/
Am I doing something wrong?
(source example: http://www.websiteoptimization.com/speed/tweak/inline-images/)
Remove all of the line breaks or spaces from the Data URI:
h3 {
width:50px;
height:50px;
display:block;
border:2px red solid;
background:#fae url("data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7") no-repeat;
}