跨浏览器图像

Question

So I have decided to use images for the text in my navbar links so I can use the font I want and not worry about cross-browser rendering issues. But I have run into another cross-browser issue. Due to internet explorer's image resizing issues, I need to export the images from photoshop at the same height and width as they will be displayed. But now there is a white, pixelated border around my images in certain spots(see image). My shopping cart icon is also being affected. screenshot of my navbar

Answer 1

Using images instead of text because you want to avoid cross-browser issues is not a good approach. You should use the css @font-face rule

`@font-face{
font-family: 'pick your font';
src: url("your_font.otf");}`

You'll need to download the .otf and the .eot files of the font you want and upload them to the site (different browsers support different sets of font formats). Then you can reference them like this:

@font-face{
 font-family: 'your_font';
 src: url('your_font.eot?#iefix') format('embedded-opentype'),
       url('your_font.woff') format('woff'),
       url('your_font.ttf') format('truetype')
       ;}

Font squirrel is a good source to get free font files (in all formats)

Also those white lines are appearing because the images were not sharp enough when you coloured them. That usually happens when you try and resize an small image and change its color.