IE vs. Firefox color issues? First Site

[xigxag]

Hi everyone.

I'm working on my first ever web project. It's for a class, but I decided to try to get the most I could out of it. So I went went standards-compliant code and CSS from the beginning. I've got a pretty good start, but am running into a couple of issues.

http://srv13.fountainheadcollege.com/sean.youngberg/

First is, I used a gradient image for the side columns. Kinda lame, i know :five:

I set the background color of the main content div to the color at the end of the gradient. Looks fine in firefox, but in IE there is an obvious cut-off where the image ends and the background color begins. I hadn't heard of this before, I thought a hex color code would be the same in any app. If you wouldn't mind having a look and let me know if it's the same on your browsers.

Another thing I just ran into was getting my footer text nav centered.

<div id="footer">
	 
    <a class="footImg" href="http://validator.w3.org/check?uri=referer">
        <img class="footImg"
        src="pics/valid-xhtml10.png" title="View XHTML Validation"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
   </a>
    <a class="footImg" href="http://jigsaw.w3.org/css-validator/">
    <img class="footImg" src="pics/vcss.png" alt="Valid CSS!" 
     title="View CSS Validation" height="31" width="88"/>
 </a>

<div class="footNav">
  <a href="index.html">Home</a> | 
  <a href="html_ex.html">HTML</a> | 
  <a href="photoshop.html">Photoshop</a>
</div>
</div>

div#footer {
	clear:both;
	border-top: 1px solid #000000; }
.footNav {
	font-size:.8em;
	padding:0;
	margin-top:.8em;
	margin-bottom:.9em;
	text-align:center; }
.footImg {
	float:left;
	border:none; 
	margin-left:.5em;
	margin-top:.1em;
	margin-bottom:.1em; }

It was centered fine with the text-align when I only had one image.

I know my whole code is very sloppy and there are probally better ways to do about everything I have on this page, but as I say it's my first page! I just keep playing with things until I get it where I want it.

Notice I had to put the .footImg class on both the <a> and <img> tags to get it to look like it does now.

I didn't want to manually move it over, seems like it should just center in the div. Is there any reason why/why not to put the <a> tags inside a <p>?

Any helpful criticism would be great. I'm still trying to find a good color/background/hover color combo for my buttons and <a>'s. I'm not very artistic, so any help in that department would also be nice. Obviously, I like green. Thanks for having a look!

 

[xigxag]

Ok, figured out the IE color issue. Apparently it was a problem with using .png images. I saved them as jpg and all was well. Still working on the rest.

 

[xigxag]

guess I got the other issue as well. I put the navigation stuff in another div, gave it position:relative with text-align:center and shifted it with left:-80px. Seems to look fine, let me know if this is ok.

Please don't hold back on any (contructive) criticism.