Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   IE vs. Firefox color issues? First Site (http://www.velocityreviews.com/forums/t371482-ie-vs-firefox-color-issues-first-site.html)

xigxag 09-19-2006 06:27 AM

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

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 07: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 07: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.


All times are GMT. The time now is 04:48 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.