HTML - IE vs. Firefox color issues? First Site

09-19-2006, 07:27 AM

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

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.

HTML Code:

<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>

Code:

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

xigxag · 09-19-2006, 08:09 AM

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 · 09-19-2006, 08:38 AM

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.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

09-19-2006, 07:27 AM	#1
	IE vs. Firefox color issues? First Site 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 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. HTML Code: <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> Code: 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

09-19-2006, 08:09 AM	#2
xigxag Junior Member Join Date: Sep 2006 Posts: 3	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.

09-19-2006, 08:38 AM	#3
xigxag Junior Member Join Date: Sep 2006 Posts: 3	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.