I want to use CSS to create rounded-corners on facebook fan-page. I have created the fanpage but I can't get the styles to work for safari browser. I have used to Safari Development tools and when I do the in-line styles it actually works but when I go and put it in the fbml code, nothing updates in safari. I have also included the same style in a stylesheet which is hosted somewhere else and it doesn't work. any help would be appreciated.
My CSS for rounded-corners
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
-khtml-border-radius: 0px 0px 8px 8px;
-webkit-box-shadow: #666 0px 2px 3px;
border-radius: 0px 0px 8px 8px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
padding-left: 5px;
padding-right: 5px;
background: #DAE1EB;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#DAE1EB), to(#DAE1EB));
background: -moz-linear-gradient(#DAE1EB, #DAE1EB);
background: linear-gradient(#DAE1EB, #DAE1EB);
-pie-background: linear-gradient(#DAE1EB, #DAE1EB);
I don't see why it shouldn't work.
Try this:
In the src of your CSS after is says .css try putting .css?2 (any number).
I've had some problems with FB caching and it's CDN, this usually solves it.
Let me know if this helps.
Related
I've look all relevant topics but could not find solution so I created this question.
Im trying to implement box-shadow on IE8 And its not working.. It works on IE9+?
I have simple div:
<span id="controls" class="box-shadow">
<input id="start" type="text" placeholder="Get Directions: Enter Address or Postcode"/>
<input id="end" type="hidden" value="Text" />
</span>
And CSS:
#controls.box-shadow{
background-color: white;
font-size: 13px;
position: relative;
padding: 5px;
z-index: 10000;
float: right;
height: 35px;
width: 96%;
margin-left: 20px;
}
.box-shadow{
box-shadow: 0px 0px 15px 0px #232361;
-moz-box-shadow: 0px 0px 15px 0px #232361;
-webkit-box-shadow: 0px 0px 15px 0px #232361;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#232361')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#232361');
}
#start{ width:82%; height:27px; border:none; padding:5px}
Box-shadow doesn't work natively in IE8 but you can use a polyfill for CSS3.
Here's a working example: http://css3pie.com/
You need to apply the polyfill to your element like so
.box-shadow {
box-shadow: 0px 0px 15px 0px #232361;
-moz-box-shadow: 0px 0px 15px 0px #232361;
-webkit-box-shadow: 0px 0px 15px 0px #232361;
behavior: url(PIE.htc);
}
CSS3 box-shadow is not supported in IE8 or below. I personally would not worry about IE8 support, but if you need to, then MS has a DropShadow that has been around since IE5.5.
Box Shadow Support
Drop Shadow
if you don't want to use any third party plugin, you can refer to this website:
http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/
I'm making a web page (lots of them that are connected)
I have added the glow function/attribute to my buttons in CSS. The thing is I've used this;
button:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
The thing is, my CSS file is linked and being used by 5 different HTML files and more are coming. So instead of just getting the glow effect on just 4-5 buttons that I have on one HTML page, the glow function now is on all buttons on all other HTML pages.
How do I avoid this, I cant add the glow function inside the #id's can I?
My buttons like like this in css
#TrafficJam1 {
position: absolute;
top: 1120px;
left: 20px;
height:107px;
width: 278px;
}
That's just one of them
Here's the HTML part of that particular one,
<input type="image" src="TrafficJam.jpg" id="TrafficJam1">
I have to use this code because my buttons are images.
Give the buttons you want to apply this CSS to a class like this:
<input type="image" src="TrafficJam.jpg" id="TrafficJam1" class="glow">
A class is another identifier for html elements. But it's different from id in the sense that you may use them to target multiple elements at a time. So you can just give the buttons you want this effect on the same class and target that class in your CSS like this:
.glow:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
Then a little bit off topic. The thing you're asking is pretty basic stuff. So I get it that you're beginner at HTML and CSS, right? In case you are it would be wise to learn some more HTML and CSS with an online learning tool like codecademy.com.
Create a new stylesheet and link this in the page where you want the buttons to glow.
This is easily done by using the <link> tag, but I guess you are familiar with that.
In that file you could just add the code you were using:
.classname:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
so i have a nice box-shadow that seems to work in all browsers except ie 8 and below. I need my site to be compatible for IE 8.
here is the effect that i'm referring to:
http://unifiedforuganda.com/ugandanprograms.html
here is the relevant css:
.program-image {
position: relative;
float: left;
width: 400px;
padding: 2px;
margin: 10px 20px 10px 0;
-moz-box-shadow: 3px 3px 15px 3px #414141;
-webkit-box-shadow: 3px 3px 15px 3px #414141;
box-shadow: 3px 3px 15px 3px #414141;
}
i don't care about the shadow showing up in IE but is it possible to have a black border be there for the image only when the shadow is not rendered? i want to avoid IE conditional sheets if possible
EDIT: seems i even have to use conditional comments or use a hack which i don't want to. now just have to figure out to use the conditional comments for IE....
As you can see here, box-shadow is not supported until IE9. But here is a SO post expalining the usability of box-shadow in IE8 and below.
so i ended up using conditional comments in the of the html document...simplier than i thought....here the code i ended up using:
<!--[if lte IE 8]>
<style type="text/css">
.program-image { border: 1px solid black; }
</style>
<![endif]-->
this will target the .program-image class that normally has the box shadow working in most other browsers but when that fails, the above code will kick in and apply a small black border...this is the css:
.program-image {
position: relative;
float: left;
width: 400px;
padding: 2px;
margin: 10px 20px 10px 0;
-moz-box-shadow: 3px 3px 15px 3px #414141;
-webkit-box-shadow: 3px 3px 15px 3px #414141;
box-shadow: 3px 3px 15px 3px #414141;
}
I have a very peculiar problem concerning formatted input buttons.
On my first page, I created a css rule named "button" for formatting buttons that stand alone in one row. it works perfectly, and the button appears as shown below
the css for this button is below
.button {
width: 100%;
height: 15mm;
background-color: #AAA;
color: #FFFFFF;
font-size: 20px;
text-shadow: 0px -2px #888;
border:none; !important
-moz-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
-webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
}
In html, it looks like this:
<a href="dashboard.html">
<input class="button" type="button" value="SUBMIT" action="dashboard.html" />
</a>
The problem is, I've copied this rule and altered it slightly in a second page for buttons which are parallel, and it doesn't format the buttons. strangely enough, it appears right in dreamweaver
but in any browser, it loses it's formatting
Here is the css for the parallel buttons
.2buttons {
width: 40%;
height: 15mm;
background-color: #AAA;
color: #FFFFFF;
font-size: 20px;
text-shadow: 0px -2px #888;
border:none; !important
-moz-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
-webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
}
and here is the html
<a href="report.html">
<input class="2buttons" type="button" value="OK"/>
</a>
strangely enough, even if you apply the first css rule, which works, to these buttons, they still remain unformatted.
There two thing in your code.
first
Never start class &ID name with numerical number.
Write like this .buttons2 instead of this .2buttons.
& Second
Write like this
border:none !important;
Instead of this:
border:none; !important
border:none; !important should be border:none !important;
And change the class name to .twoButtons (or something else) instead of .2buttons as class names can't start with numbers...
Do NOT start a class name with a number! This is only supported in Internet Explorer.
See
http://www.w3schools.com/css/css_id_class.asp
Your problem in that the name of the class starts with number. You should change that.
I am using this .htc logic to make my content tabs rounded but its not working. My tab structure looks like this.
<li id="profiletab1" class="selected">
Overview
</li>
<li id="profiletab2" class="">
Overview
</li>
...
css code for this
color: #4f4f4f;
height: 35px;
display: inline-block;
padding: 0px 18px 0px 19px;
font-size: 14px;
line-height: 35px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
behavior: url(border-radius.htc);
background: #e7e7e7;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e7e7e7), to(#cccccc));
background: -webkit-linear-gradient(#e7e7e7, #cccccc);
background: -moz-linear-gradient(#e7e7e7, #cccccc);
background: -ms-linear-gradient(#e7e7e7, #cccccc);
background: -o-linear-gradient(#e7e7e7, #cccccc);
background: linear-gradient(#e7e7e7, #cccccc);
-pie-background: linear-gradient(#e7e7e7, #cccccc);
border-right: 1px solid #b1b1b1;
IE does not support CSS 3 until the IE 9
to use border-radius in css,
add
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
and
if you want to have them in IE 7/8,
you will need some sort of help with some javascript library.
e.g. http://css3pie.com/
Is it working in any IE browser? Also double check the path of your .htc file
I am using the PIE.htc method and my CSS is something like this.
#maincol #content {
float:left;
background-color:#FFF;
width:100%;
height:399px;
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
behavior: url(../css/PIE.htc);
}
Also I have tested and verified that it works in all versions of IE. All I had to do was put the pie.htc file in my CSS folder and then add the behavior to the elements that I wanted to round the corners on.
You need to use:
behavoir:url(PIE.htc)
at the end of the class