CSS for Mobile/Responsive Design – IE Hacks

I’m testing on IE11, which is supposed to be standards compliant. And it is, except when it isn’t. Here is a great example of a hack that I had to use to make some sweet JQuery Superfish menu items behave in IE11.

#superfish-1 {
font-size: 98.9%;
float: left;
margin: -75px -86px 15px;
padding: 0 0 7px 58px;
position: relative;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
#superfish-1 {
font-size: 93%;
float: left;
margin: -77px -86px 15px;
padding: 0 0 7px 58px;
position: relative;
}
}

Advertisements

CSS for Mobile – IE Hacks

I’m testing on IE11, which is supposed to be standards compliant. And it is, except when it isn’t. Here is a great example of a hack that I had to use to make some sweet JQuery Superfish menu items behave in IE11.

#superfish-1 {
font-size: 98.9%;
float: left;
margin: -75px -86px 15px;
padding: 0 0 7px 58px;
position: relative;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
#superfish-1 {
font-size: 93%;
float: left;
margin: -77px -86px 15px;
padding: 0 0 7px 58px;
position: relative;
}
}

Mobile Testing – Free Tools

Here is another site that will provide you with many options for styling your site at several different screen widths/heights. What I really like about this site is that it shows so many resolutions on one page.

While this will be more of a distraction (info overload) if you are just starting to style a site for mobile devices, it is really nice once you have most of the changes in place and want to see what the site looks like on a wide variety of devices at a glance.

http://www.responsinator.com

Mobile Device Resolution Roundup

This is a good resource for mobile developers looking for a comprehensive list of smartphone devices and their resolutions. The list is pretty exhaustive, including several hundred makes and models. Certainly worthy of a bookmark.

http://cartoonized.net/cellphone-screen-resolution.php

Mobile Development and Tables in Drupal

Drupal uses Tables for its Forums. Tables don’t get a lot of respect in this day and age but they are still useful for many things. And Forum/Bulletin posting sites are one of them.

So I am trying to make the tables fit on a 320px width screen. Not easy. After playing around with several different CSS settings, I discovered that using

table-layout: fixed;

really seemed to help me. I had been shrinking the fonts to make the tables fit, with mixed results. Using the fixed setting helped.

Mobile Emulators/Testers

A couple of notes on a few tools for mobile development.

http://quirktools.com/screenfly – this is a great tool. make sure to be aware of the “proxy” setting if you’re having trouble navigating your site.

http://responsivepx.com – Really nice tester with a slider for easy adjustment of length and width of the site.

Mobile Device Resolution Roundup

Great reference for Mobile Device Web Development

http://screensiz.es/phone