I have a problem with CSS positioning an image on a web page. If you go to http://gdcs.com/j455908uduij/index.php
you can see the web page I am working on. The problem image is the blue vertical banner on the right margin. I can position the banner so that it is 1 pixel below the top horizontal banner for one web browser (for example, IE9). When I view it in other browsers (for example, Firefox), the banner is either too high or too low. I am generally aware of the box model issue with Internet Explorer, but I am having trouble getting code that works reasonably with IE and other browsers too.
If you view the source code of the page, you will see the CSS controlling the positioning of the banner. I have attached the code for both the web page and the CSS stylesheet for the website. I don’t think the stylesheet is an issue, but I included it anyway so that you can determine whether there is something in it which is affecting placement.
The horizontal positioning was not an issue, just the vertical.
Any suggestions you have would be appreciated.