Timo

Screengrab from my computer: http://i28.tinypic.com/t8nujk.png Win XP & IE7, LCD resolution 1680 x 1050. Not sure why TinyPic has converted my PNG screengrab to a JPG, though.

How standard (web-safe) is Century Gothic? I just noticed my mum's computer, with Windows XP+SP3 doesn't have it as standard, but mine (the same Windows XP+SP3) does have it. I also understand that Avant Garde is the Mac alternative.

* Jasc Paint Shop Pro v7: a really old version, but I know it like the back of my hand. I use it mainly for creating gradients, designing layouts, creating alpha transparencies (shadows, floating logos, and alias-free graphic fonts, etc.), and optimizing images for web land. * Dreamweaver: makes it a little easier to see what is happening to the layout in Design View when creating Divs and stuff, but that's pretty much all I use it for. The split view (layout + code) option is good. * Notepad++: The king of data entry. * IE and FF: for testing. * A bucket of tea: quite literally. My favourite cup holds a pint. Goes down very well with a nibble of very dark chocolate: Mmm. * Midnight: My most creative time. Sorry, that's 6.

PNG24, just to clarify you mean 16-million colour (24-bit) PNGs, as opposed to just 256-coloured (8-bit) ones? I've been using the JS fix with 16-million colour PNGs which have full alpha transparency with no probs.

So my site works great at the "normal size" 96 DPI resolution setting, but when I checked the site on my mum's computer (which she has chosen to use the "Large" setting at 120 DPI) it completely destroys my formatting and site! ... Words are uglyly (if there is such a word) wrapped around any old how, spilling outside DIVs into other areas, line-breaking downwards onto other lines, forcing other stuff off elsewhere, words falling off the page, terrible. Short of using graphics or Flash for absolutely *everything*, is there any way you can address the coding of your site to make sure it's compatible for all DPI settings, for text, etc.? Thanks, Tímo

Thanks. It appears IE (and Safari) is the oddball yet again, and cannot accurately deal with PNGs that have gamma correction data embedded into them. Unfortunately you can't stop Photoshop or Paint Shop Pro adding this gamma data when you save out PNGs. Result: I've therefore used the free graphic editor GIMP to import the PNG and then save it out again with the gamma correction data removed from the file, and the new PNG image is now faithfully displayed on all browsers (including IE and Safari). You could of course use the GIF format instead if the number of colours in your image is <256 and you don't need alpha transparency, but PNG still offers significantly lower file-sizes than GIF in general use (and supports up to 16M colours, unlike GIF) so the GIMP method for tweaking the PNGs works great. Hope this helps others.

That's the one I've used in the past without problems. It was for using 16-million colour PNGs with full alpha transparencies in IE6. (IE7 and Firefox are fine). I uploaded the pngfix.js file to my server, and then simply added this code in the style sheet to specifically target those with IE6: <!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]--> All the other workarounds I tested brought up the golden bar in IE due to needing to run an active-x control, so I ditched those ones.

Hitting my head against a brick wall with this... I have a colour gradient that I wanted to repeat horizontally as a background inside a Div. The graphic is a 16-million colour PNG (no transparency), 693 pixels tall, and one pixel wide as usual. So I made a Div, 693 pixels high (to match the graphic), and 730 pixels wide, and selected the image as the background with "repeat-x" to fill the Div horizontally with the graphic. Problem is, the image looks different in IE7 and Firefox. Firefox displays the gradient faithfully, whereas IE7 doesn't. You can see a spliced comparison between the two browsers here: Firefox is displaying it correctly, but why is IE showing it different and darker? My code is shown below:- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- #TestArea { background-image: url(http://URL.com/image.png); background-repeat: repeat-x; height: 693px; width: 730px; } --> </style> </head> <body> <div id="TestArea"> </div> </body> </html> Thanks!

Very interesting analysis and article about screen and browser resolution usage behaviours:- http://www.baekdal.com/reports/actual-browser-sizes However, the article was correct as of late 2006, so it's 1½ years old. Even back then, 1024 x 768 was dominant.

Just wondering, since a few of you have stats generators for your sites, what are the percentages for the other resolutions? What is the most popular resolution that people use when they visit your site(s)? When visiting several large computer stores it appears 1280 x 1024 is the resolution of most of the 4:3 ratio monitors that are sold nowadays. What percentage have widescreen? Seems they are becoming almost mainstream over and above 4:3 format. Thanks

I don't think there are any non-boring websafe fonts out there! Out of those, Verdana and Tahoma are nice and understated for headings. Georgia for classic, Trebuchet for casual, Arial for intelligibility... ....but definately not Comic Sans! Really pains me to see that font.

Thanks Dizi. Went for this method in the end: http://homepage.ntlworld.com/bobosola/ ... with a small javascript file, as it was the only one I tested (of many) that didn't invoke the gold "activeX/script blocked" bar in IE when it tries to install the alphaimageloader.. Thanks

Thanks everyone, I'll certainly take it all on board. Thanks again Rob. This is what I'm getting, if you can see the bottom of the pic where the fade abruptly stops short: »Screenshot« when visiting: »this« Not sure what's causing it? To work around it, I've graphically redone the background slice to be 1024 pixels high instead of 800 (taking a hit on pixelisation, though) but that should work for most resolutions. Here's my final site test: 1024 pixel Test However, I've just submitted the URL to BrowserShots.org to see what it would look like on other browsers, and MS IE5.5 and IE6 makes it look like this!:- With grey boxes around the images? Why is that? Is it because I've used alpha layers on the images? Much appreciated. What else could I perhaps do, design-wise, to improve the look (professionalism) of the page? Thanks guys. Timo

Thanks ever so much, Tom. That was my second option, to have the solid colour at the bottom at the bottom of the fade. However for some reason the background image always gets cut short (cropped) before the full fade, and therefore doesn't fade into the correct background #hex colour:- » Here « (Since the image slice is 800 pixels tall to start with, you'd obviously need a monitor capable of displaying larger than that in order to see the crop. I'm currently using 1680x1050 res.) Thanks for the info about centering the graphic. However, I need to centre everything in the body (any sequential text and graphics), where I'd normally, simply use <center></center> encasing the whole lot. I have tried the advice in the sticky in the forum, using a div #wrapper, but it still doesn't work. And every centering CSS answer I see on google is different, it seems there's not a standardised, succint, methodic and 100% compatible way to do anything. This is all so complex. =/ Why is everything in CSS so obscure? I mean, why did they abolish simple HTML tags like <table height="xx%"> and <center>insert images, text, everything here</center> for extravagant, messy and obscure CSS/doctype workarounds, which ironically have more quirks than the HTML quirks they were meant to fix, when tags like <table height="xx%"> and <center> did the job perfectly well to begin with? At present I fail to see why CSS is so heavily pushed and the be-all-and-end-all. Am sure there could've been a simpler, standardised implementation between the two (CSS and HTML). It will pixelate very slightly, but the limitations of 24-bit colour-depth in the original image will have pixelated it more to start with, than any slight, post-processed vertical stretch would. Even though the slice is 800 pixels high, there's still only 200 colours on there (each colour is repeated vertically per every 4-pixels) due to the inability to produce any more colours between the start and end colour with merely 24-bit colour-depth. Technically I could have used a 200-pixel-high slice with the 200 colours, and stretch it, and it would still look the same as the 800-pixel high one. If the original 1-pixel-width image has sufficient bit-depth to not appear pixelated (vertically), even after stretching it vertically to fit 100% height, how can it pixelate any more by stretching it horizontally? The pixelised distortion I originally mentioned was when the gradient suddenly distorted to around 10 colours or so, instead of the 200 it has. Thanks

Thanks ever so much guys, that worked. And for the further reading. I have another version of the site that I'd like to do. And that involves stretching a graphic to fit the size of all browsers, and then to centre the content on the page. First the background. I created a colour-fade in a graphics program, which I took a slice of, (shown »here«) and wanted to stretch it across the visible page. To do this, I've so far done: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <Html> <Head> <Title>TITLE</Title> <Style type="text/css"> html, body {height: 100%; margin: 0; padding: 0;} img#bg {position:fixed; top: 0; left: 0; width: 100%; height: 100%;} #content {position: relative; z-index: 1;} </Style> <!--[if IE 6]> <style type="text/css"> html {overflow-y: hidden;} body {overflow-y: auto;} #bg {position: absolute; z-index:-1;} #content {position: static;} </style> <![endif]--> </Head> <Body> <img src="http://www.gobo.dsl.pipex.com/data/Site/Test/Background.png" alt="bg" id="bg" /> <div id="content"><img src="http://www.gobo.dsl.pipex.com/data/Site/Test/ike.gif" alt="graphic"></div> </Body> </Html> » Website « ^ Which works for the background. However the colour-fade doesn't stay true to form when the user has manually selected a zoom/text-size-increase other than 100% (by holding down CTRL and scrolling the mouse wheel). And sometimes I've noticed the image glitches/distorts, making it look blocky and pixelised, almost like the colour-depth (the number of colours) has decreased down to around 4- or 8-bit. Refreshing the page again restores it to full colour. I'm trying to find the event that I'm doing elsewhere on the computer that evokes the glitch, to try and get a screengrab. Anyhow. Is that the best method to do the full-page background image stretch, or is there a more compatible method? Also, I tried centering a test graphic by using the advice in the sticky topic in this forum, but it didn't seem to work. Same URL: http://www.gobo.dsl.pipex.com/data/Site/Test/Test.html Thanks

Hi there, Currently designing a contact page for an associate while they have their main site designed elsewhere. This was my idea, created in a graphics program (PaintShop Pro):- The problem is my web programming is really old-skool (from around the year 2000), with outdated HTML syntax such as <center></center>, <table height=100%> etc. I can't seem to get my head around CSS/scripting properly, as it's completely different to what I was taught. However, this is my initial code: <HTML> <Head> <Title>Title Title Title</Title> <Style type="text/css"> body { color: white; background-color: #9AADB0; } div.boxTitle {background: #D0DCDE; padding-top: 3em; padding-bottom: 0.5em; border: none; width: 100%} div.boxBody {background: #9AADB0; padding: 3em; border: none;} width: 100%} div.boxEnd {background: #D0DCDE; padding-top: 2em; padding-bottom: 4em; border: none; width: 100%} </Style> </Head> <Body> <center> <div class="boxTitle"> <img src="C:\3D-URL.png" alt="Insert Description"> </div> <div class="boxBody"> <img src="C:\Bullet.png" align="middle"> Welcome to [insert organisation here] <img src="C:\TransparentBullet.png" align="middle"> <p> Our website is currently under construction. <p> <img src="C:\Bullet.png" align="middle"> However if you would like to get in touch <img src="C:\TransparentBullet.png" align="middle"> <br> please contact: <p> <img src="C:\Bullet.png" align="middle"> Joe Bloggs <img src="C:\TransparentBullet.png" align="middle"> <br> Address 1 <br> Address 2 <br> Address 3 <p> <img src="C:\Bullet.png" align="middle" align="middle"> m<b>:</b> 0987 654321 <br> <img src="C:\TransparentBullet.png" align="middle">t<b>:</b> 0123 456789 <br> e<b>:</b> abcde@12345.com <p> <p> <img src="C:\Bullet.png" align="middle"> Last words here. </div> <div class="boxEnd"> <img src="C:\Star.png"> </div> </center> </Body> </HTML> ... which is a bit of a mish-mash of old skool HTML and CSS, but it seems to mostly work, as shown in the link below (I've also changed the colours a bit): » WebSite « I'd like to go one further though, and use a colour-fade/gradient on the title bar at the top and bottom, such as this (again made in a graphics program): For scalability I wanted to use the common technique of taking a thin slice of the colour-fade, and then simply stretching it 100% across the width of the page using programming: And this is where I fail. 1) Firstly, why is there a border around the Div.Box(s) on the page, on the initial [WebSite]? 2) How would I best integrate the colour fade into the Div.Box code for the top and bottom bars on the site? 3) Is there anything I could perhaps do better for maximum compatibility for most resolutions? I thank you kindly for any ideas, Timo