I want an element organization in my UI equivalent to the results of following CSS:
#wall {
width: 100%;
display: box;
box-orient: horizontal;
box-align: stretch;
box-lines: multiple;
}
Unfortunately browsers do not seem to support box-lines: multiple;, and some widely used browsers do not yet support flexible box model at all.
Is there an existing jQuery plugin that provides this functionality?
You asked about this a while ago, but in case you have not looked into this lately, this is a great tool to provide support for the Flexible Box Model in browser that don't support it yet.
Cross-browser support for the Flexible Box Model
Related
I've been working on some buttons using css3 effects such as border-radius, box-shadow, and linear-gradient. For IE8 and lower, I'm using PIE to create the desired effect but it seems box-shadow works on IE8 without using PIE. Does IE8 actually support the box-shadow property?
According to caniuse.com box-shadow is not supported but it "can be partially emulated in older IE versions using the non-standard "shadow" filter." So, if you're using -ms-filter or filter as a fallback it will render in a visually similar manner to the CSS3 box-shadow declaration. If that is not the case then you should check to see if you are using another polyfill to generate box-shadow support.
You can use IE8's developer tools to see exactly what styles are being recognized and rendered.
Working in Kendo UI Mobile, is it possible to define device specific css elements.
For example to perform platform specific css for iOS and Android I use
.km-ios .km-view-title
{
height: 40px;
color: #fff;
}
.km-android .km-view-title
{
height: 50px;
color: #000;
}
however how to specify between iPhone 4 and iPhone5, is it possible?
Kendo UI Mobile does not provide device specific classes. You can add such class manually, based on the difference of the screen height.
Actually Kendo UI Mobile does add platform version CSS classes by concatenating the platform class and its major version. So, you can target iOS5 with .km-ios5 and Android 2.x with .km-android2.
There's one additional catch - iOS7 doesn't have the .km-ios class that previous iOSes have - this is due to the major redesign the platform received, so Kendo UI Mobile considers it separate.
I'm attempting to add a lightbox to an older website. This site will only display correctly in IE 8 with quirks mode on. Given this constraint, are there any lightbox plugins that function correctly? Are there workarounds for plugins that don't support quirks mode?
I've tried ColorBox with no success (the ColorBox FAQ states outright that quirks mode is not supported).
There is virtually nothing available today that is intended to work correctly with Quirks mode.
Quirks mode was obsolete in 2001 -- it's basically an IE5-compatibility mode. If your code is still using it, then it's got a serious problem. By far the best answer would be to upgrade your site not to use quirks mode any more.
The good news is that this actually isn't difficult, if you only need to support IE8 and above, because IE8 supports a CSS feature called box-sizing. (This doesn't work in IE6 or IE7, which is why quirks mode has lingered so long, but it's fine in IE8)
box-sizing is a standard CSS feature that works in all browsers, and allows you to specify the box model to work like quirks mode.
The box model is the primary difference between quirks mode and standards mode, so in order to make a site written for quirks mode work in all browsers, simply set the box-sizing across the whole site: the following code should do it:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
You can then add the doctype and put the site into standards mode, and it should continue to work as before.
Once you've done that, you should be able to start using some modern browser features and up-to-date script libraries like the one you're asking about.
Hope that helps.
It looks like slimbox support quirks mode, but I don't try it myself. http://www.digitalia.be/software/slimbox2
Is it possible to use Panel control(Asp.net) with scrolling in MVC3 Razor? If not what will be the alternative for this control?
I found it as very simple one. Thanks Sternr. I used div instead of Panel
coding
CSS will be
{
width:180px;
height:584px;
background-color:#CCCCCC;
float:left;
overflow:auto;
}
And if you don't need horizontal / vertical scroll specifically
You can give like
overflow-x:Hidden; Or
overflow-y:Hidden.
I didn't check compatibility for all browser versions. But it works fine on Chrome 13.0.782.107, Firefox 5.0 and IE 9
For IE8:
-ms-overflow-y: hidden;
Thanks
I like the new New Project templates included in the ASP.NET MVC3 tools update, as presented at MIX 11 recently.
A basic site can be seen here:
http://mix11.haacked.com/
When I view the above site in Chrome, the HTML5 styles are visible - rounded corners and text shadow.
When I view the site in IE8 those styles aren't visible.
My question is, isn't Modernizr supposed to make these styles work in older browsers?
-Matt
Modernizer won't actually add missing functionality to a browser. Basically, you use it as a guide to tell you whether a browser supports a certain feature. In your case, you could have a CSS file which will compensate for browsers that don't support border radius:
.no-borderradius div {
/* properties for browsers that don't support border-radius */
}
The above is a total made-up example, I'm not sure 100% if it's correct, but check the documentation here.
So for IE8, you would need to display rounded corners using a different technique.