[Shadowfax]

I want to start off by saying I've never tried any kind of coding before, so jumping right in to try the website is probably not smart. I validated my code on WC3 and it seemed to do great in Firefox, then I opened it in IE 6 and well, yeh.

The more I stare at it, the more issues I find. I got it down to 4, two I'm sure I can fix, so here are the two I know I cannot.

On the footer nav, the first two links don't work! I have NO idea why because the whole set is contained within the span. The third link doesn't even want to work until you hover over the last couple letters.

And the even bigger issue, opened in IE6, the main nav is pushed over to the right and overlaps the body content. I've read some stuff that says that's a padding issue, but I am unsure how to go about the fix. Even the "detailed" explanations are confusing to me.

The website is atlantatalentum.com - View source will allow you to see my html. I've commented out some things I will want to use for other pages in the future. I wanted to keep it simple for now.

Here's the CSS.

Thanks in advance for all your help! Feel free to email me with suggestions!

@charset "utf-8";
/* CSS Document for Atlanta Talentum by Shadowfax*/
 
/* Page Styling */
 
* {
    margin: 0px;
    padding: 0px;
}
 
html {
    scrollbar-face-color: #99b;
    scrollbar-arrow-color: #fff;
    scrollbar-highlight-color: #fff;
    scrollbar-shadow-color: #99c;
    scrollbar-3dlight-color: #000;
}
 
 
body {
    background: #7a3233 url(images/Left-Side-Border.jpg) left top repeat-x;
    z-index: 1;
    margin: 0px auto;
    font-family: Georgia, Calisto MT, Garamond, serif;
    float: inherit;
}
 
 
div.layoutbox {
    width: 760px;
    margin: 0px auto;
    
}
 
 
    
/* Styling */
 
div#header {
    width:645px;
    height:213px;
    font-size: 10px;
    text-align: left;
    clear: both;
    margin: 0px;
    color: #000000;
    background-image: url(images/Header.jpg);
    background-repeat: no-repeat;
}
 
div#nav {
    position: absolute;
    top: 213px;
    width: 159px;
    height: 462px;
    font-size: 10px;
    text-align: left;
    padding: 0px 40px 40px 5px;
    clear: both;
    margin: 0px;
    color: #000000;
    background-image: url(images/Navigation.jpg);
    background-repeat: no-repeat;
    z-index: auto;
        
}
 
div#body {
    top: 213px;
    width: 451px;
    height: 462px;
    font-family: Georgia, "Calisto MT", Garamond;
    font-size: 15px;
    font-weight: normal;
    text-align: justify;
    text-indent: 20px;
    clear: both;
    margin: 0px 0px 0px 159px;
    color: #000000;
    background-image: url(images/body.jpg);
    background-repeat: no-repeat;      
}
    
    
div#footer {
    top: 676px;
    text-align: left;
    clear: both;
    margin: 0px 0px 0px 26px;
    width: 584px;
    background-color: #7A3233;
}
 
#footer a:visited {
    color: #e8d8ca;
}
 
.style2 a:visited {
    font-family: HANA, "Copperplate Gothic Light", Garamond, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none; 
    color: #e8d8ca;
    }
 
.style2 a:link { 
    font-family: HANA, "Copperplate Gothic Light", Garamond, sans-serif;
    font-size: 12px; 
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none; 
    color: #000000;
    }
    
.style2 a:hover, a:active { 
    font-family: Georgia, "Calisto MT", Garamond, serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase; 
    text-decoration: underline; 
    color: #000000;
    }
        
.Heading
{
    padding: 0px 0px 0px 0px;
    margin: 0px;
    font-family: HANA, "Copperplate Gothic Light", Garamond, sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    color: #000000;
    text-align: left;
    text-decoration: underline;
}
 
.body_text
{
    padding: 0px 15px 0px 0px;
    margin: 0px;
    font-family: Georgia, "Calisto MT", Garamond, serif;
    font-size: 15px;
    font-weight: normal;
    text-transform: none;
    color: #000000;
    text-align: justify;
    text-decoration: none;
}
 
 
.mailto a:link, a:visited, a:hover, a:active{
    text-transform: none;
    }
 
 
a:link { 
    font-family: HANA, "Copperplate Gothic Light", Garamond, sans-serif;
    font-size: 12px; 
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none; 
    color: #000000;
    }
    
a:visited { 
    font-family: HANA, "Copperplate Gothic Light", Garamond, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none; 
    color: #4b1515;
    }
    
a:hover, a:active { 
    font-family: Georgia, "Calisto MT", Garamond, serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase; 
    text-decoration: underline; 
    color: #000000;
    } 

[Shadowfax]

Playing with it some more I think that the footer nav issue might just be a z-score??

I dunno why it would be transparent but everything under the "main nav" image doesn't want to click, the rest does just fine.

[Shadowfax]

Just a padding issue, even with a proper z-score, links will not work if they are covered by any kind of padding. I got around the padding by specifying different widths.

As for the navigation overlap, the footer div was covering some of the padding and it didn't let them align properly. Overlapping divs in that case just didn't want to play nicely.