I'm trying to use Bootstrap glyph icons as buttons with circle background. I'd like to reach this with css only.
I found two possibilities (below), but it's do not work in IE9 compatibility mode. What is tricky in it and causes IE problems?
li:nth-child(even) .button-16 {
background-color: #369;
border: 2px solid #369;
border-radius: 16px;
}
li:nth-child(odd) .button-16:after {
content: " ";
display: block;
height: 16px;
z-index: -1;
position: relative;
background-color: #369;
border-radius: 16px;
box-shadow: 0px 0px 1px 0px #369;
width: 16px;
left: -1px;
top: -1px;
}
Here is working example
Greets!
IE9 compatibility mode means that site is compatible with older IE wersions whitch unfortunatelly doesn't support border-radius.
There are some hacks to walkaround that like Css3pie.
Update:
Pseudo class :nth-child is also not supported in IE < 9.
Here you have example site where you can check how css is supported in major browsers http://reference.sitepoint.com/css/selectorref
Related
My CSS style not working properly for IE 11 and Safari browsers. I searched every possible place to find an answer but failed. a lot of people talking about cross-browser CSS problem but no one did a working example and show how it's done properly. so if you guys know please help me to overcome this issue.
this is a part of my CSS I found not working for IE and safari
<style> .lap_drop_dwn:before {
content:"";
position: absolute;
right: 31px;
top: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0px 10px 10px 10px;
border-color: transparent transparent rgb(0,0,0,0.5) transparent;
}
.drop_dwn_items {
display: block;
width: 100%;
height: 50px;
background-color: rgb(0,0,0,0.5);
text-decoration: none;
line-height: 50px;
font-size: 22px;
color: #fff;
padding: 0 20px;
text-align: center;
}
</style>
this is a part I found, but my CSS file is quite large so there could be many so hard to find manually. it would be better if there is some script which automatically fixes those errors according to particular browser needs.
I've added a custom weather web part to my SharePoint page, but I want a hover message that displays additional info.
The pieces I've got worked out look great in Chrome, but not so great in IE 11. I need this to look the same in both - any tips?
.tooltip {
display:inline;
position: relative;
font-family:Arial,Helvetica,sans-serif;
font-size:9pt;
}
.tooltip:hover:after {
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
top: 6px;
color: #fff;
content: attr(title);
left: 5px;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
/*width: auto;*/
}
.tooltip:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 0 6px 6px 6px;
top: 40px;
content: "";
left: 25px;
position: absolute;
z-index: 99;
}
Here's my JSFiddle: http://jsfiddle.net/hcoa82wb/
The problem was the .tooltip tag using the display: inline When this is changed to display: inline-block both IE and Chrome began to show the messed up version of the tool-tip. From there it was just a matter of changing the top properties to display how you would want it. Here is your JS Fiddle updated. I left comments in the CSS code.
On the same note I would recommend using a different Class name other than .tooltip I would hate for you to run into issues in the future if someone adds a WebPart or a 3rd party SharePoint plug-in that uses the same class name. I've had issues with that in the past.
I'm using the flex box technique to layout my webpage, but I have come across with some confusion about the syntax. What I'm confused about is do you have to use -webkit- anymore or has all browsers implemented HTML5 yet. I have been looking for answers on the various websites and one person says you need to use the -webkit- syntax and another person says you don't have to use it anymore. I understand what flex boxes do I'm just confused on whether you need to use -webkit- or not. If I don't can someone show me the correct syntax and if I do need to use the -webkit- syntax can someone show me how to implement my layout into Firefox, Opera, and IE. I know Chrome and Safari use the -webkit- syntax.
header, section, footer, article , aside, hgroup, nav {
display: block;
}
* {
margin: 0px;
padding: 0px;
}
body {
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
}
h1 {
font: bold 20px tahoma;
}
h2 {
font: bold 14px tahoma;
}
#page_wrap {
max-width: 1000px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header {
background: red;
border: 4px solid black;
padding: 20px;
border-radius: 5px;
}
#top_menu {
border: 2px solid red;
background: black;
color: white;
padding: 10px;
}
#top_menu li {
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px tahoma;
}
#section {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
#main_section {
border: 1px solid black;
-webkit-box-flex: 1;
margin: 20px;
padding: 20px;
}
#side_news {
border: 2px solid red;
margin: 20px 0px;
width: 220px;
padding: 30px;
background: #a4a4a4;
border-radius: 10px;
-webkit-box-shadow: rgb(110,110,110) 10px 10px 10px;
}
#the_footer {
clear: both;
text-align: center;
padding: 20px;
border-top: 2px solid black;
}
article {
background: black;
color: white;
border: 3px solid red;
padding: 20px;
margin-bottom: 15px;
}
article footer {
text-align: right;
}
I have been developing a CSS framework, and fromt hat I learned: To make things work for real, you have to also type it all out. That means in short: You should use the -webkit- prefix, and the same settings without. Besides, there is also -o- (Opera), -moz- (Firefox), -ms- and sometimes -Ms (IE, and yes, case sensitive). Very rarely there might be also -khtml-...but the chance you run into that is equal to zero. I have not seen any modern browser that uses that one any longer.
It might be painful to duplicate your statements, but that is how you make your CSS cross-browser compatible. And that is why I started to use PHP to do it instead...
You can also look up the statements - i.e. box-pack - and see their browser compatibility and syntaxes.
For example: Google Chrome seems to preffer -webkit- over the "non-branded" (no -webkit-) version. Safari tends to ignore the branded version and uses the non-branded version.
You can't ever drop the -webkit prefix from display: -webkit-box, because the standardized version is not called box.
Instead, it's called display:flex. The associated flexbox properties (including -webkit-box-pack) all have different names in the "new" standardized flexbox model, too.
Having said that -- you should prefer the new display:flex model to the old -webkit-box/-moz-box model, because the new version has better interoperability and cross-browser support, because it's actually standardized.
The -webkit- prefix is needed for Safari and Chrome when using transitions, transforms, animation, gradients, calc, flexbox, and columns. For border-radius, box-shadow, border-image, and text-shadow it's not really necessary unless you want to cover older browsers like Safari 5.0.
Is it possible to create a border like the flowing image with css? Any hints will be appreciated
#sidebar h4, #sidebar-alt h4 {
background:url('images/widget-title-bg.png');
color: #333333;
font-size: 22px;
font-family: Arial, sans-serif;
font-weight: normal;
margin: 0 0 10px 0;
padding: 7px 0px 11px 0px;
}
EDIT: Made some changes according to your comments. Try:
<h1 id="progress">
<i></i>Recent Posts
</h1>
#progress {
display: block;
max-width: 200px;
min-width: 150px;
position: relative;
margin: 50px auto 0;
padding: 0 3px;
border-bottom: 10px solid #ECECEC;
font: bold 26px 'Dancing Script', cursive;
}
#progress i {
display: block;
position: absolute;
width: .8em;
height: 10px;
left: 0;
bottom: -10px;
background-color: #4287F4;
}
http://jsfiddle.net/userdude/z45QJ/4/
I'm not a big fan of the position manipulation, but all browsers should support and display this nearly identically, the only possible problem being the font's displa may be slightly differently in different browsers. However, IE7-9 should interpret everything else just fine.
Too bad the whole wuuurld isn't on WebKit:
<div id="progress"></div>
#progress {
width: 300px;
height: 10px;
border: none;
background-color: #ECECEC;
border-left: solid #4287F4;
box-shadow:inset 2px 0 white;
-webkit-animation: slide 10s linear infinite;
}
#-webkit-keyframes slide {
from {
border-left-width: 0;
width: 300px;
} to {
border-left-width: 300px;
width: 0;
}
}
http://jsfiddle.net/userdude/z45QJ/1
It could be adjusted to go both ways. However, it only works on WebKit browsers (Chrome, Safari [?]). If that's ok, let me know and I'll add the return trip.
There are four ways to do it. I demonstrate four ways in this JSFiddle, and here are some explanations.
If you're not sure, just use Method B.
Method A
Method A has the advantage that it's the most compatible but the disadvantage that it requires extra HTML. Basically, you're giving an outer div the blue border and an inner div the white border. Your HTML will look something like this:
<div class="methodA">
<div class="container">
Method A
</div>
</div>
Your CSS will look like this:
.methodA {
border-left: 10px solid blue;
}
.methodA .container {
height: 100%;
border-left: 10px solid white;
}
Method B
Method B has the advantage that there's no extra HTML, but the disadvantage is that it won't work in IE before version 9.
.methodB {
border-left: 10px solid blue;
-webkit-box-shadow: inset 10px 0 white;
-moz-box-shadow: inset 10px 0 white;
box-shadow: inset 10px 0 white;
}
You can mitigate IE's compatibility issues using CSS3 PIE, which makes box shadows behave in Internet Explorer (along with other CSS3 features).
Methods C and D
This JSFiddle shows two other methods, which I won't describe in as much detail, but...
Method C makes the blue border a shadow. As a result, it can "cover" other elements and it also changes the size of the element. I don't love this solution, but it might work for you. It also suffers the compatibility issues of Method B.
Method D puts two divs inside of the element: one for the blue border and one for the right border.
it is not really complicate and no extra HTML is needed.
h4:after {
display:block;
content: '';
height:4px;
width: 1px;
border:0px solid #ececec;
border-left-width: 10px;
border-left-color:#4287F4;
border-right-width: 90px;
}
http://jsfiddle.net/N27CH/
Check this link Visit
(http://jsfiddle.net/qD4zd/1/).
See if it helps. This tells you about the application of gradient. See how it is done.
Also why not use directly the images that you want as the border.
Check out for "Gradient" in Css. This might answer your question.
I studied some usage of "canvas" tag in HTML5. That is preety much informative about gradient specification and is also more readable than the traditionl HTML4. So for this question i also want to request the questioner to look at the "canvas" tag in HTML5. check the link below.
Link: http://html5center.sourceforge.net/Using-Unprefixed-CSS3-Gradients-in-Modern-Browsers
Link: http://www.sendesignz.com/index.php/web-development/111-how-to-create-gradient-and-shadow-effect-in-html5-canvas
Second link is more awesome. Cheers.:)
I'm trying to position all images on my webpage behind a log-in screen but I can't seem to make that work. I've tried using z-index but that doesn't help either. I was wondering if anyone can help me sort this out. Here's a screenshot of my issue: http://img64.imageshack.us/img64/1267/uplad.png. I'm trying to make all images stay behind the black image with the log-in screen in front of everything.
CSS
CSS for images
img
{
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
border: 1px solid #ccc;
float: left;
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
z-index:0;
}
CSS for black background
element.style {
height: 1843px;
left: 0;
position: fixed;
top: 0;
width: 1263px;
z-index: 10000;
}
.modalBackground {
background-color: #000000;
opacity: 0.5;
}
CSS for Log-in Screen
element.style {
display: block;
margin-left: -225px;
margin-top: -212px;
}
.pagepopups .popup {
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 0 0 3px #333333;
background-color: #006699;
display: none;
left: 50%;
padding: 11px 10px;
position: absolute;
top: 50%;
z-index: 10001;
}
Z-index does appear to be what you want. There is a known z-index bug with Internet Explorer where it doesn't exactly follow the z-index as other browsers. Fortunately, there's an easy fix. You need to specify z-index on parent elements up until the container for all of the elements you're trying to specify a z-index for. I think the problem is that IE creates a "z-index context" for each element unless the parent element has a z-index. Here's a good link describing the issue and how to fix it.
You failed to make the image fully anonymous (Featured on .. button), I Googled for the live site, and it has the issue you're describing, so I'm assuming it's the same version you're working with.
Testing only in IE7:
Add to .header a single rule: z-index: 10000.
That's it fixed in IE7.
It will probably also be fixed in IE6, but if not, let me know and I'll take a look.
You're lucky you didn't anonymise it properly :)