Solved bar in profile page

[sivakd]

I just noticed that the solved bar is completely green for me even though I still have some unsolved problems. Something changed there? Though I wish I can reach there someday .

[rayfil]

Nothing changed there. When you get close to 100%, the available space for the bar is (i) too small to show "white space" for the unsolved portion, and (ii) the green color is quite pale and any remaining white space may not be that visible.

Your personal data (the page where you can edit your profile) has a much longer bar and the green color is darker. The remaining white space would be more visible.

[sivakd]

rayfil, thanks for the reply. But that's the strange thing. The bar on the profile is almost twice the size than in other pages and in other pages, I can still see white space but in the profile page it's all green.

[euler]

Most curious!? Apart from the value of a variable used to control the width I use exactly the same piece of code to generate the progress bars on the Problems page (width = 200) and the Profile page (width = 400). I've just checked in Firefox 4, Chrome 11, and IE 9, and I can see a gap in the progress bar for your statistics. What browser (and version) are you using? If you hover your mouse over the progress bar does it give the correct ratio of problems solved / number of problems?

[sivakd]

That is strange. I looked at the HTML code on both pages and everything looks good. Except, may be, the height and width for an image are just suggested sizes. So, may be for the same height of 5 pixels, the scaling is happening properly in one case and not the other. I am using Firefox 3.6.17 on OS X 10.6.7.

You actually don't need an image to get the effect. It can be done with just a div element as there is no issue with aspect ratio.

[euler]

I use an image for accessibility reasons; a screen reader would identify the image and provide extra information (found in the alt tag) for a visually impaired visitor.

The aspect ratio should not be a problem. However, I noticed that the script wasn't rounding the pixel width of the image and this might have been causing problems. It rounds the value now. Does that make any difference?

[sivakd]

I still see the same problem on the profile page. This is also on Windows & Firefox. It works fine in Safari & IE. Seems to be Firefox specific issue. I am fine not spending more time on this than necessary.

[TripleM]

Yeah, this is due to the width adjustments the browser is doing on all of the tables, table cells etc. Unless all of the cells have widths set that add up perfectly to the total (including cellpadding, cellspacing, border etc) browsers will resize them to fill up the space regardless of what you specify - ie despite setting <td style="border:2px solid #bbb;width:400px">, on my computer that <td> has been shrunk to a smaller size (indeed, fitting exactly the image contained within).

Simplest solution without having to mess around with everything else - use <table cellspacing="0" cellpadding="0" style="width:404px;"> on the table that just contains that one <td>. That should force it to stay the right size (including the border).