Need some help making my site be cross-browserable.

Ok, so I don't know the actual term for it, but either way I'm trying to make my website look the same when viewed in IE 7 or Firefox 2 (I believe those are the latest versions of both) and looking the same in any other browsers would be nice.

Here's the site. http://schnell.dreamhosters.com/

Right now my primary problem is the look of the images I use. At the moment I use primarily .png's because they seem to give me the best quality to size ratio. The problem I'm having is that most (if not all) if the images look darker in IE 7 than they do in Firefox. For instance, if you can see it, there's a bit of darker grey around my navigation bar and content box than the grey I use for the rest of the background. I made sure in Photoshop that those two grays are exactly the same hex coded color, yet they still appear different when viewed in IE 7, but they're fine in Firefox.

Any suggestions how to remedy this problem or maybe a simple workaround? I'd rather not have to switch to another format just for the sake of cross-browserability.

I know HTML, Javascript, CSS, PHP and MySQL all fairly well, so don't be shy to give me some coding solutions.

There are two things you can do.

1. even though the hex codes are "the same" there really not. There exists 'web-friendly-colors' since for what ever reason, some colors will not display the same in different browsers (the non-friendly versions) and those that will (web friendly colors). What I am assuming is since Firefox is a better browser *cough* (im a Firefox fan boy) its actually able to display web friendly colors no problem; while IE is not able to, thus you are getting discolorations.

I see, lookign at the source code:
body bgcolor="#3B3B3B"

#3B3B3B IS NOT A WEB FRIENDLY COLOR!
http://www.w3schools.com/html/html_colors.asp

The general rule of thumb, is that if you break a hex color code into three parts, example: #112233, the first two values should be equal, then the third and forth should be equal, then 5th and 6th should be equal.
examples of friendly: #112233, #ff11ff #22ff11
examples of NOT-friendly: #121212 #FF12F1 #f1ff22, #3B3B3B
I'm not sure if there is any weird hex colors that maybe not included in this rule, but I know to be web friendly it does need to follow this criteria. I don't know, or have noticed any hex values that do not fit this criteria and are not friendly.

I haven't used photoshop for awhile, but I believe there is a setting that you can use to only use 'web-friendly' colors, if that helps.

2. make a 1px by 1px "dot" of the color the background should be, and save it in the same way (.png use the same levels of quality, etc...) and set your background as a picture of this 1px by 1px dot.





The first choice of using web friendly colors is by far the better choice of action though, but more time consuming.

Most graphical editing programs allow for hexidecimal color selection so that shouldn't be a problem.

Although, really, the color thing isn't that big of a deal and you're probably going to expend a ton of effort to try and make the site look identical in both (or all) browsers, and that effort is probably going to go to waste due to user customization and optimization which will result in radically different setups across the board, although that is tempered somewhat by a simple site design that leans more towards lean css rather than full blown flash / js.

Of course, if it's your goal to attempt that, it's a bit of a different story.