IE9 has the concept of pinning a particular website to the Windows7 task bar. For certain sites (such as Facebook), it will then display an extra large favicon in the task bar, and also next to the back button.
How do I tell IE to do this for my site?
It's a bit late, but I found the answer above to be somewhat incomplete.
ico files can contain multiple images at the same time. So you can for example put a 16x16, a 24x24, and a 32x32 image inside a single ico file. This way IE can use the image with the most appropriate size. So it will use 16x16 inside the addressbar, the 32x32 for the taskbar (pin), and the 24x24 for next to the back button. If you want them to look better on hi-dpi screens you could use 64x64 instead of 32x32, and 48x48 in stead of 24x24.
You could even use different kinds of images instead of the same image in differently scales; so e.g. just the logo on the 16x16 and 24x24, but the logo and brandname on the 32x32.
One tool for creating such icons is the commandline application png2ico, or icoFx if you like a GUI.
Please read the following article
How to enable IE9 pinning and Jumplists
Create a High Definition Favicon
Standard favicon files are usually 32x32 or 16x16 pixels in size. These look great in the browser but when you pin it to the taskbar it can be a little small and pixilated.
To give the best pinning experience you should use a 64x64 favicon. I used http://www.favicon.co.uk/ to create a 64 x 64 icon file and then uploaded it to my site.
You then need to make sure you are using the new favicon by checking the tag is pointing at the new 64x64 fav.ico file.
Basically you now can create a larger favicon file, and IE9 will use it in the task bar. However, if you have a standard size favicon, IE9 will still use it.
An added benefit is that you can implement an awesome JumpList to enhance the visitors browsing experience.
Further reading: http://www.hanselman.com/blog/IE9SiteSpecificBrowsersAndAddingYourOwnJumpListItemsToPinnedTabs.aspx
Related
Subject: Display custom icons instead of values in list views
Under the Classic interface the icons are working fine as described in the documentation. However, if I switch to Unified Interface they are not displayed anymore.
Inspecting the page (visually and in the generated html) it looks that the space is indeed reserved for the image as DIV. So I suspect the code behind the page is not able to find/retrieve the images when in Unified Interface even if I supply the full URL of the picture.
Did anybody else encountered similar problems when moving from Classic to UI interface?
We are in an on-premise installation.
What type is your image? Is it PNG, JPEG, or GIF.
In new UI it should only be PNG and that too of size 16*16.
Reference article to look into
I have created a website using Adobe Muse and have uploaded the site to the ftp server . The website is live and is as designed when looked via a desktop. But when the same site is being viewed from a mobile, the entire page is getting left aligned and there is a gap to the right side. I even made a phone layout and uploaded the same to the ftp server and the problem still persists. Ive googled a lot and inserted html code into the metadata to make the site centered but in vain. Nothing works . I have a tight deadline and would really be grateful for any quick help.
maybe your images are placed in pixels... If I am right
try using a rectangular tool... fill it with image then make the width 100%
to view the sample image click here
The size of mobile layout in muse is fix... I think the mobile you are using have different size... so just start using % on placing the images like the background etc.
There's a setting that was causing my content to be left-aligned in the phone layout.
Click Page > Page Properties
There's an un-marked button to the far right of Padding - click this and set it to centered. By default it is left-aligned.
I'm having an issue with Outlook and when Windows Display (Control Panel > All Control Panel Items > Display) is set to Medium - 125% (or larger)
The text in the newsletter appears bigger and is creating issues with spacing. Although most of the issues with this can be resolved, I would like to know if there is a way to force Outlook to respect the pixel sizing as defined in the html email.
An example code block is something on these lines
...
<td width="460" valign="baseline">
<p style="font-size:16px;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;" >Hello </p>
</td>
...
The text inside the <p> tag is 16px on a machine that has Windows Display 100% but is larger when Windows Display 125% (interestingly, the browser still respects the 16px and does not increase the font size like Outlook)
I don't think you're taking the right approach to this problem. Please look at it another way.
The user said "I want my text to be bigger". They probably said that because they have a very high res display or they have visual difficulties. It's their preference, if not their need, to have bigger text.
You're saying "how do I override the user's preference for my cosmetic convenience?".
Don't do that. Fix your layout's design so it adapts better to varying text sizes.
Reduce your image use and/or place your images so that they can handle being pushed around by the text. Consdier using scalable units like em or percentage font sizes to be more friendly toward people with visual difficulties or very-high-res displays.
Background:
The reason Windows scales fonts (and pixels) like this is because software developers for the platform have been consistently ignoring the font sizes the user sets in Explorer and the theme. Apps often force the use of their own fonts with specific pixel sizing instead of using the system fonts and sizes.
This has led to lots of apps that're unusable for people with visual difficulties, on media PCs, etc.
Microsoft wanted to give users a way to override these badly behaved programs, so they gave users a way to scale the pixel sizes provided by applications by a fixed percentage. Essentially they redefined a font "px" as an abstract unit that can be scaled.
Your HTML email is trying to be one of those badly behaved programs.
When a <select> tag is used in a HTML page, is there a way to style the text size in
the scroll wheel that shows on the iPhone?
There is this alternative.
http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch
It uses javascript to put the elements on the page.. I used it for a web/ iphone app and it worked really well. There would be custom styling if you wanted to change the default text sizes and you could also load in custom images..
I don't believe you can style the wheel that shows up on the iPhone directly. In fact, even modifying it in browsers has weird support. For example, http://jsbin.com/obake3 doesn't work at all in Chrome, only modifies the actual drop down in Safari and stretches the graphic in a very ugly way in Firefox.
We investigated and couldn't find any reliable way of altering the display so we looked into different libraries. We're having good luck with the Mobiscroll library for jQuery. It is a more up to date project than the cubiq project referred to in other responses.
The control is themable. You can easily change the appearance of if in CSS. It also comes with pre-defined, nice looking color schemes.
We chose it because it works across devices allowing for a more consistent look & feel.
Taken from Sitepoint Ref
The select renders slightly differently depending on the browser and operating system in use, and is well known as a troublesome HTML element to style with CSS (because the display is inherited from the operating system, rather than provided by the browser)
Regular HTML select boxes (such as, e.g. found here), while being "chosen" are presented by the iPhone on a native widget that seems to totally ignore regular html font sizes and whatnot. It does some ellipsing when it goes too long, but the font is way too big for a list I want to present -- even on landscape, only about 35 characters can fit.
Is there any way to tell the iPhone to use a smaller font there?
This is not possible. Use radio buttons instead.
Also, you can create custom select boxes. If created the good way, it works great. One small misstep and the UI is a disaster.