Hey all:

So I'm working on a new design for my site, and I've been having a few problems with my CSS. I think I've got most of them worked out, and the one that's really giving me a headache is in Firefox, when you hover over the bottom nav links the page lengthens (look at the scrollbar). It doesn't seem to happen in IE, so any tips would be greatly appreciated.

You can see the site in action at: http://beta.nplsolutions.com/

I have my CSS split up into two different files, (sorry if this is a pain):

base.css

/* CSS Document */

/* REDEFS */
html {
    height:100%;
    }

body {
    height:100%;
    margin:0px;
    }

a {
    color:black;
    text-decoration:underline;
    border: 0px none;
    }

a.nav {
    text-decoration:none;
    }
        
a.nav_footer {
    text-decoration:none;
    color:white;
    }
    
a img {
    border:none;
    }
    
h1 {
    margin-top:10px;
    margin-bottom:10px;
    margin-left:15px;
    font-family:"Trebuchet MS";
    font-size:18px;
    }
        
/* HEADER */
#head {
    width:100%;
    height:117px;
    margin:0px;
    background-image: url(images/Header_bg.jpg);
    background-repeat: repeat-x;
    }
    
#logo {
    float:left;
    width:83px;
    height:117px;
    margin-left:25px;
    }
    
#NPL {
    float:left;
    width:154px;
    height:117px;
    margin-left:30px;
    }

#nav {
    float:right;
    width:470px;
    hieght:117px;
    background-image: url(images/nav_bg.jpg);
    background-repeat: repeat-x;
    }
    
#nav_left {
    float:left;
    width:20px;
    height:117px;
    margin-left:
    }

#nav_main {
    float:left;
    width:450px;
    margin-top:93px;
    }
    
span.nav_item_left {
    font-family:"Trebuchet MS";
    margin-left:18px;
    margin-right:22px;
    font-variant: small-caps;
    }

span.nav_item {
    font-family:"Trebuchet MS";
    margin-left:22px;
    margin-right:22px;
    font-variant: small-caps;
    }
    
span.nav_item_right {
    font-family:"Trebuchet MS";
    margin-left:22px;
    margin-right:10px;
    font-variant: small-caps;
    }

#H1 {
    width:100%;
    height:52px;
    margin:0px;
    background-image: url(images/H1_bg.jpg);
    background-repeat: repeat-x;
    }
    
div.H1 {
    margin-left:30px;
    padding-top:12px;
    font-family:"Trebuchet MS";
    font-color:white;
    font-variant: small-caps;
    color: #FFFFFF;
    font-size: 22px;
}

/* BODY */
#nonfooter {
    position: relative;
    min-height: 100%;
    }
    
* html #nonfooter {    
    height: 100%;
    }
    
#body {    
    padding:0px 195px 0px 0px;
    }
    
div.paragraph {
    margin-left:3px;
    font-family:"Trebuchet MS";
    font-size: 12px;
    text-indent: 10pt;
    margin-bottom:10px;
    }
        
span.b {
    font-weight: bold;
    }

div.technologies {
    margin-top:3px;
    margin-bottom:10px;
    font-family:"Trebuchet MS";
    font-size: 12px;
    font-style: italic;
    }
    
/* FOOTER */
#footer {
    width:100%;
    height:15px;
    overflow:hidden;
    position: relative;
    margin-top: -15px;
    text-align:center;
    background-image: url(images/footer_bg.jpg);
    background-repeat: repeat-x;
    }

#bottom_nav {
    width:459px;
    height:15px;
    margin:0px auto;
    font-family: "Trebuchet MS";
    font-size: 10px;
    color:white;
    }
    
#bottom_nav_text {
    float:left;
    width:345px;
    height:15px;
    }
    
#nav_accent_left {
    float:left;
    width:37px;
    margin-right:20px;
    background-image: url(images/footer_accent.jpg);
    }
        
#nav_accent_right {
    float:left;
    width:37px;
    margin-left:20px;
    background-image: url(images/footer_accent.jpg);
    }

index.css

/* CSS Document */

/* REFEDS */
a.sidebar {
    text-decoration:none;
    }
    
h2.sidebar {
    margin-top:0px;
    margin-bottom:5px;
    margin-left:2px;
    margin-right:2px;
    font-family:"Trebuchet MS";
    font-size:14px;
    font-weight:bold;
    }

/* BODY */
#content {
    width:100%;
    min-height:495px;
    padding-top:5px;
    padding-left:15px;
    }

* html #content {    
    height: 495px;
    }
    
#img_computer {
    float:right;
    width:121px;
    height:162px;
    border:1px solid;
    border-color:#B0B0B0;
    margin-left:10px;
    margin-top:10px;
    }
    
div.box_title {
    border:1px solid;
    border-color:#B0B0B0;
    height:20px;
    margin-bottom:3px;
    padding-left:3px;
    background-color:#E4E4E4;
    font-family:"Trebuchet MS";
    font-size: 14px;
    }
    
div.box_body {
    min-height:85px;
    border:1px solid;
    border-color:#B0B0B0;
    padding-left:3px;
    padding-bottom:2px;
    margin-bottom:20px;
    background-color:#FFFFFF;
    font-family:"Trebuchet MS";
    font-size: 12px;
    }

* html div.box_body {
    height:85px;
    }

div.box_p {
    font-family:"Trebuchet MS";
    font-size: 12px;
    }

#img_sii {
    float:right;
    width:136px;
    height:68px;
    margin-left:30px;
    margin-right:10px;
    margin-top:5px;
    }

#sidebar {
    position:absolute;
    top:169px;
    right:0px;
    width:170px;
    }

div.sidebar_image {
    margin-top:10px;
    margin-left:20px;
    width:120px;
    }

div.sidebar_text {
    margin-top:10px;
    margin-left:20px;
    margin-bottom:30px;
    width:120px;
    }
        
div.sidebar_p {
    margin-left:2px;
    margin-right:2px;
    font-family: "Trebuchet MS";
    font-size: 12px;
    }

index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>BETA - NPL Solutions | Home [Web design in Boulder Colorado]</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="base.css" rel="stylesheet" type="text/css">
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nonfooter"> 
    <div id="head"> 
        <div id="logo"><img src="images/logo.jpg" width="83" height="117" /></div>
        <div id="NPL"><img src="images/NPL.jpg" width="154" height="117" /></div>
        <div id="nav"> 
            <div id="nav_left"><img src="images/nav_left.jpg" width="20" height="117" /></div>
            <div id="nav_main"> <span class="nav_item_left"><a class="nav" href="#">Home</a></span> 
                <span class="nav_item"><a class="nav" href="#">Company</a></span> 
                <span class="nav_item"><a class="nav" href="#">Selected Work</a></span> 
                <span class="nav_item_right"><a class="nav" href="#">Contact</a></span> 
            </div>
        </div>
    </div>
    <div id="H1"> 
        <div class="H1">Home</div>
    </div>
    <div id="body"> 
        <div id="content"> 
            <div id="img_computer"><img src="images/pic_computer.jpg" width="121" height="162" /></div>
            <h1>Welcome</h1>
            <div class="paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing 
                elit. Donec imperdiet. Nulla pellentesque elit non neque. Sed 
                ante. Integer eget odio sit amet justo convallis auctor. Nunc 
                vel mi. Class aptent taciti sociosqu ad litora torquent per conubia 
                nostra, per inceptos hymenaeos. Donec eget urna vel neque imperdiet 
                pulvinar. Nunc sollicitudin, eros quis venenatis feugiat, elit 
                lacus posuere enim, eget placerat lacus sem at risus. Suspendisse 
                sollicitudin sapien ultricies felis. Aliquam erat volutpat. Aliquam 
                aliquam nulla vel lectus. Nullam at erat. Sed justo felis, mollis 
                sit amet, adipiscing vel, eleifend eu, nisi. Donec mi nulla, malesuada 
                quis, porta nec, faucibus non, libero.</div>
            <div class="paragraph">Vestibulum tortor. Ut dictum sapien nec pede 
                consequat viverra. Sed neque nisl, tincidunt a, vehicula vitae, 
                tincidunt at, risus. In molestie, quam eget pharetra iaculis, 
                orci justo imperdiet pede, ac faucibus risus sem eu neque. Curabitur 
                laoreet dignissim nisi. Cras dictum ullamcorper lorem. Vestibulum 
                ante ipsum primis in faucibus orci luctus et ultrices posuere 
                cubilia Curae; Praesent convallis accumsan dolor. Donec erat. 
                Proin non eros quis neque congue mattis. Phasellus sodales metus 
                vitae turpis sodales iaculis. Pellentesque habitant morbi tristique 
                senectus et netus et malesuada fames ac turpis egestas. Proin 
                lorem justo, hendrerit nec, dapibus ut, nonummy et, ante. Quisque 
                et neque sed risus malesuada dapibus. Pellentesque semper, nisl 
                ut luctus ornare, nibh tellus pellentesque lorem, in consectetuer 
                augue tellus in tortor. Sed arcu risus, consequat eget, laoreet 
                vel, congue ullamcorper, ipsum. Sed eu tellus. Curabitur eu nibh 
                vitae lacus laoreet luctus. Aliquam dignissim arcu vel pede.</div>
            <div class="box_title">Case Study</div>
            <div class="box_body"> 
                <div id="img_sii"><img src="images/sii_logo.jpg" width="136" height="68" /></div>
                <div class="box_p">Find out how Steel Images, Inc. was able to 
                    break into the retail market by leveraging the web in the 
                    establishment of their unique and exciting online store.</div>
                <div class="technologies">Technologies used: XHTML, PHP, XML, 
                    CSS</div>
                <a href="#">Read more...</a> </div>
        </div>
        <div id="sidebar"> 
            <div class="sidebar_image"><a href="#" class="sidebar_image"><img src="images/teaser_articles.jpg" width="119" height="86" /></a></div>
            <div class="sidebar_text"> 
                <h2 class="sidebar"><a href="#" class="sidebar">Articles</a></h2>
                <div class="sidebar_p">Find out how <span class="b">NPL</span> 
                    Solutions helps you stay on top with the most important internet 
                    trends.</div>
            </div>
            <div class="sidebar_image"><a href="#" class="sidebar_image"><img src="images/teaser_portfolio.jpg" width="119" height="89" /></a></div>
            <div class="sidebar_text"> 
                <h2 class="sidebar"><a href="#" class="sidebar">Selected Work</a></h2>
                <div class="sidebar_p">View our portfolio and see for yourself 
                    why <span class="b">NPL</span> Solutions is right for your 
                    business.</div>
            </div>
        </div>
    </div>
</div>
<div id="footer"> 
    <div id="bottom_nav"> 
        <div id="nav_accent_left">&nbsp;</div>
        <div id="bottom_nav_text"> <a href="#" class="nav_footer">Home</a> - <a href="#" class="nav_footer">Company</a> 
            - <a href="#" class="nav_footer">Selected Work</a> - <a href="#" class="nav_footer">Articles</a> 
            - <a href="#" class="nav_footer">Client Login</a> - <a href="#" class="nav_footer">Contact</a> 
        </div>
        <div id="nav_accent_right">&nbsp;</div>
    </div>
</div>
</body>
</html>

I don't see the problem in FF 2.0 at all. The bottom links on hover have no effect on the page whatsoever.

Why do you have a span on links that already have classes ???

You WILL have problems with your left floated elements with the left margins, in IE you'll run into the doubled float-margin bug.

Doesn't seem to do it here either, although I'm at 1440x900 with a left-side taskbar so I may not be your best case study.

Thanks for the help! I tried it on a few other boxes and I can't reproduce the problem, so it must be just some weird extension or something that I have installed on this box. Thanks for the other critical feedback as well. This is obviously a work in progress (hence the lorem ipsum text), but if you have any other feeback on the overall design I would be very appreciative as well!

Nicky