I am using pie.htc to allow me to have radius corners and drop shadows on my website in old versions of IE.
The trouble is it seems to be making IE run very very slowly.
Here's an example of my code... can anyone see how I can improve this?
div.myDiv {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
behavior: url(/PIE.htc);
}
I used CSS3Pie a lot in projects, because I was forced to make the sites exactly look alike which of course is nonsense in for a technician, but not a sales guy.
Actually, using any kind of .htc files is very slow because pie needs to parse these rules and create according VML-Elements to emulate the according css3-behaviour. If you have bigger projects you will have no choice other than:
Completely omitting CSS3-features for IE8 (and convince your salesguy) <- my favorite option
Omitting pie and using IE filters wherever possible
using a more lightweight framework with lesser support but faster processing, because PIE is (because it has such a superb support) quite bloated and thus rather slow
Using positions like Razor adviced does not really fix the speed issue and prefixing with -ms might give you serious trouble in IE9 trying to use both, css3pie and the prefixed css3-property.
try this for a change
div.myDiv
{
border-radius: 5px;
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
behavior: url(/PIE.htc);
position:relative;
}
PIE.htc file loads asynchronously along with DOM when it is ready. Setting the position:relative can certainly give you an edge. i prefix -ms- in code snippet which helps to detect IE. it worked for me. i used latest PIE.htc file.
Related
I keep noticing class="well" in a web app using Twitter's Bootstrap, but I can't find any documentation about it, unless I just overlooked it.
Thanks.
"well" is a CSS selector simply create prominent wrapper around element
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
The well is used as a simple effect on an element to give it an inset effect.
<div class="well">...</div>**
I've been researching on drop-shadow-effect technique for web design.
So, I would like to apply the technique to use implementing a top header bar for my website.
From my findings, the one that people out there use the most is box-shadow css property.
I'd like to know if this is the most effective yet simple way to achieve the desired outcome or not. any other options available for me to implement the same as well as their pros and cons?
any advice would be very much appreciated?
Simplest way is Photoshop :)
Otherwise, read on: http://www.css3.info/preview/box-shadow/
box-shadow is a CSS3 property, meaning it's not available in < IE9, and not natively available in most browsers, hence the proprietary prefixes:
Sample CSS code for IE drop shadow:
filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000',direction='120',strength='20');
CSS3 version:
element {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
-o-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
The only other option to the CSS3 box-shadow property is to use images. CSS3 box shadows are easier to apply and require less page weight (kb) to use. However, not all browsers will support CSS3 box-shadows.
If using the box-shadow property be certain to set all the various properties for different browsers.
box-shadow: 1px 2px 3px #000;
-moz-box-shadow: 1px 2px 3px #000;
-webkit-box-shadow: 1px 2px 3px #000;
-o-box-shadow: 1px 2px 3px #000;
-khtml-box-shadow: 1px 2px 3px #000;
Here is my file input rendered in Chrome:
In IE it looks a lot more basic, which is fine (although the vast inconsistencies with this particular control are frustrating!)
My default CSS for inputs is:
input{
font-family: arial, sans-serif;
font-size: 12px;
font-weight: bold;
color:White;
background-image:url(../images/buttonBG.png);
height:27px;
border:1px solid #000;
border-radius: 7px;
-moz-border-radius: 7px;
padding: 5px 20px 5px 20px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
text-shadow: 0px 1px 2px #000;
}
input:hover{
text-shadow: 0px 1px 2px #fff;
background-image:url(../images/buttonBGo.png);
}
As you can see there are two types of text on the control, is it possible to style both individually?
Also is there any way to specifically select file inputs? Like input.file (doesn't seem to work). If this is not possible, how do I remove all the CSS the input style has applied to it (so I am working with a blank slate again).
Though i have never implemented it anywhere but while studying about the same i came across this url
http://pixelmatrixdesign.com/uniform/
This might help you out.
you can't differentiate input types in IE. In recent browser you might be able to achieve it with css3 attributes selectors:
input[type=button] {
border: 15px solid Red;
}
what you can do is manually add a css class to your file input:
<input type="file" class="inputFile" />
.inputFile { color: Yellow; }
For full customazation (e.g. changing the look of the browse button) you'll need to use the label element technique.
It's fully semantic, accessible and requires no JavaScipt. Basically, you hide the input, ensure the id is set on both the label and file field, then style the label accordingly. Here's a great article that explains the technique along with a CodePen (https://codepen.io/bmarshall511/pen/bjyEgq) that shows how it's done: https://benmarshall.me/styling-file-inputs/
[type="file"] + label {
background: #f15d22;
border-radius: 5px;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
If you hover the mouse over the underlined table headings on this page, a tooltip appears
However, in IE7, the tooltips appear about 300px above their intended position, and on the first table, they don't appear at all.
Also, the tooltips are not as nicely styled when shown in IE, e.g. the corners aren't rounded, and the drop shadows aren't shown. I'm not too concerned about the styling, but I would like to get the tooltips displaying in the correct position.
I'm using the YACOP JQuery plugin to display the tooltips (I've modified this plugin slightly to remove the fading effects). The CSS styles applied to each tooltip are:
.callout {
max-width: 400px;
padding: 5px;
border: 1px solid #7992B0;
background-color: #FFE8A4;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
IE < version 9 doesn't support native or vendor specific CSS3 rules like rounded corners or drop shadows.
As for the IE7 Issue, setup a targeted CSS for IE7 either using conditional comments
<!--[if IE 7]>
.callout_main
{
position: absolute;
display: none;
margin: 0px;
left: 576.5px;
top: -66px;
}
Or the CSS browser selector and reposition the callout div with CSS.
The first table's tooltip doesn't seem to appear because it is poistioned way above the top of the page, so above the browsers "render view."
Update:
In response to your question, there is: <div class="callout_main" style="..."> I'd move these inline styles to a CSS file, and for the the IE/ rules change top: 366px; to top: -66px;. I think this will help to resolve your issue :)
.callout {
max-width: 400px;
padding: 5px;
border: 1px solid #7992B0;
background-color: #FFE8A4;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
You're using Webkit and Mozilla's css attributes, the ones starting with -webkit and -moz. These won't work on IE 6,7,8 (or any previous one) because they lack CSS 3 support. One day, all browsers will, hopefully, support CSS 3, but for now, you'll have to use some workarounds (likely), or force your users to use something that's not IE (depends on your users) if you want to have a nice looking tooltop.
There exists a compatibilty master table that will inform you of what you can and cannot use on various browsers.
I have a searchbox with auto-suggest that pops a div up underneath it with multiple search string suggestions (like google). Is it possible to have drop shadow on the auto-suggest box with CSS or will I need a script of some sort? I tried a background image but the number of suggests can vary from 1 to 10 or 15.
I'd prefer something that works in IE6+ and FF2+ if possible. Thanks!
This works for me on all my browsers:
.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}
then just give any div the shadow class, no jQuery required.
CSS3 has a box-shadow property. Vendor prefixes are required at the moment for maximum browser compatibility.
div.box-shadow {
-webkit-box-shadow: 2px 2px 4px 1px #fff;
box-shadow: 2px 2px 4px 1px #fff;
}
There is a generator available at css3please.
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
The most widely compatible way of doing this is likely going to be creating a second div under your auto-suggest box the same size as the box itself, nudged a few pixels down and to the right. You can use JS to create and position it, which shouldn't be terribly difficult if you're using a fairly modern framework.
you might want to try this. Seems to be pretty easy and works on IE6 and Moz atleast.
<div id ="show" style="background-color:Silver;width:100px;height:100px;visibility:visible;border-bottom:outset 1px black;border-right:outset 1px black;" ></div>
The general syntax is :
border-[postion]:[border-style] [border-width] [border-color] | inherit
The list of available [border-style]s are :
dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid
inherit
You can try using the PNG drop shadows. IE6 doesn't support it, however it will degrade nicely.
http://www.positioniseverything.net/articles/dropshadows.html