Coding questions

Oh dear, here I am again, already.

I'm still struggling with the min-height malarky, it's not the code that's the problem but it wont work within what I've got already, I'm doing something wrong but I can't see it.

It worked with the first bit that needed it, a simple box. That worked fine. But with the footer, it just isn't having it.

I celebrated early a second ago (Usain Bolt style), it changed to the size I wanted it, thought it was done, changed the text inside and the box didn't change to accomodate that, so it's not done :(


Anyway, I can't upload it as I'm running on dial-up speeds so all I can do is provide the code.

Just give you the relevent footer code:

Code: 
@charset "utf-8";/* CSS Document *//* Cross browser reset */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {      margin:0;     padding:0; }body {    color:#e5e5e5;    font-size:12px;    font-family:Arial, Helvetica, sans-serif;    }a img {    border-style:none;}body {    background-color:#262626;}#outer_container {    width:880px;    height:600px;    background-image:url('images/body_background.png');    background-repeat:no-repeat;    margin:0 auto;}#container {    width:700px;    height:100%;    margin:0 auto;}ul,ol,li { list-style-type:upper-roman; }p { line-height:20px; }ul { line-height:20px; padding-left:21px; }a { color:#e5e5e5; text-decoration:none; font-weight:400; font-size:12px; font-family:Arial, Helvetica, sans-serif; }a h2 { color:#80a1e3; text-decoration:none; font-weight:400; font-size:18px; font-family:Cambria, Georgia, "Times New Roman", Times, serif; }a h2:hover { color:#8FB6FF; }#buttons {    width:700px;    height:80px;    margin:0 auto;}#home, #services, #portfolio, #testimonials, #contact, #blog { float:left; }a.rollover#home {    display:block;    width:106px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_home.png); }a.rollover:hover#home { background-position:0 -80px; }#home .displace { position: absolute; left:-5000px; }a.rollover#services {    display:block;    width:115px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_services.png); }a.rollover:hover#services { background-position:0 -80px; }#services .displace { position: absolute; left:-5000px; }a.rollover#portfolio {    display:block;    width:119px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_portfolio.png); }a.rollover:hover#portfolio { background-position:0 -80px; }#portfolio .displace { position: absolute; left:-5000px; }a.rollover#testimonials {    display:block;    width:155px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_testimonials.png); }a.rollover:hover#testimonials { background-position:0 -80px; }#testimonials .displace { position: absolute; left:-5000px; }a.rollover#contact {    display:block;    width:114px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_contact.png); }a.rollover:hover#contact { background-position:0 -80px; }#contact .displace { position: absolute; left:-5000px; }a.rollover#blog {    display:block;    width:91px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_blog.png); }a.rollover:hover#blog { background-position:0 -80px; }#blog .displace { position: absolute; left:-5000px; }#content {    width:640px;    height:200px;    margin:90px auto 0;}#quotes {    width:300px;    height:35px;    background-color:#36F;    float:right;    margin:13px 30px;}#content h1 { font:400 24px Cambria, Georgia, "Times New Roman", Times, serif; color:#FFF; }#content .threecol {    width:640px;    height:100%;    margin-top:43px; /* 23 px + 20px for the margin:-20px 0; case below */    float:left;}#content .c1 {    border-left:1px solid #484848;    border-right:1px solid #484848;    padding:0 14px;    width:184px;    float:left;}#content .c2, #content .c3 {    border-right:1px solid #484848;    padding:0 14px;    width:184px;    float:left;}#content .c1 div, #content .c2 div, #content .c3 div { margin:-20px 0; position:relative; }#content .twocol {    width:640px;    height:100%;    display:block;    float:left;}#content .twocol #two-c1 {    width:401px; /* 429px - 14px(x2) padding */    min-height:100px; /* Box will go no smaller than 100px regardless of content */    height:auto !important;    height:500px; /* Maximum height the box will stretch to */    background-color:#2e2e2e;    border:1px solid #4c4c4c;    padding:13px 14px 14px 14px;    float:left;}#two-c1 .rightalign#jargon {    text-align:right;    font-weight:900;    line-height:22px;}.rightalign#technicaldetails { text-align:right; }#content .twocol #two-c2 {    width:185px;    float:left;    padding:11px 10px 14px 14px;}#slide-port {    background-image:url(images/slide_port/stocks-studio.png);    width:184px;    height:174px;    margin-top:4px;}#slide-port p { padding-top:120px; } /* Drops the text below the image */#footer {    width:100%;    min-height:50px; /* Used by FF, IE7+ etc */    height:auto !important; /* Used by all, ignored by IE6 */    height:500px; /* Used only by IE6 as IE6 ignores !important on duplicate declerations */    background-color:#1F1F1F;    margin-top:80px;    border-top:1px solid #000;    float:left;}#footer_content {    width:100%;    min-height:50px; /* Used by FF, IE7+ etc */    height:auto !important; /* Used by all, ignored by IE6 */    height:500px; /* Used only by IE6 as IE6 ignores !important on duplicate declerations */}#footer_content .threecol {    width:640px;    min-height:50px;    height:auto !important;    height:500px;    margin:0 auto;    margin-top:20px;    padding:30px 0;}#footer_content .c1 {    border-left:1px solid #3e3e3e;    border-right:1px solid #3e3e3e;    padding:0 14px;    width:184px;    min-height:50px; /* Used by FF, IE7+ etc */    height:auto !important; /* Used by all, ignored by IE6 */    height:500px; /* Used only by IE6 as IE6 ignores !important on duplicate declerations */    float:left;}#footer_content .c2, #footer_content .c3 {    border-right:1px solid #3e3e3e;    padding:0 14px;    width:184px;    min-height:50px; /* Used by FF, IE7+ etc */    height:auto !important; /* Used by all, ignored by IE6 */    height:500px; /* Used only by IE6 as IE6 ignores !important on duplicate declerations */    float:left;}#footer_content .c1 div, #footer_content .c2 div, #footer_content .c3 div { margin:-20px 0; position:relative; }#footer h2 { font-weight:400; font-size:18px; font-family:Cambria, Georgia, "Times New Roman", Times, serif; color:#FFF; }#footer ul, #footer ol, #footer li { list-style-type:none; }#footer ul { padding:0; }
I think the problem is to do with the -20px on the borders, something along those lines.

If anyone can make any sense of the above code I'll be in debt to you.

Any helps appreciated, I'll keep trying at my end.
 
Post was too long so here's the full HTML:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Xenonsoft Redesign (CHANGE THE TITLE)</title>
<link rel="stylesheet"
      type="text/css"
      href="style.css" />
      
<script type="text/javascript">/* JAVASCRIPT HERE */</script>
</head>

<body>
<div id="outer_container">
    <div id="container">
        <div id="buttons">
            <a href="#" class="rollover" id="home" title="Home"><span class="displace">Home</span></a>
            <a href="#" class="rollover" id="services" title="Services"><span class="displace">Services</span></a>
            <a href="#" class="rollover" id="portfolio" title="Portfolio"><span class="displace">Portfolio</span></a>
            <a href="#" class="rollover" id="testimonials" title="Testimonials"><span class="displace">Testimonials</span></a>
            <a href="#" class="rollover" id="contact" title="Contact"><span class="displace">Contact</span></a>
            <a href="#" class="rollover" id="blog" title="Blog"><span class="displace">Blog</span></a>
        </div>
        <div id="quotes"></div>
        <div id="content">
            <div id="javascript-slideshow">
                <script type="text/javascript">
                    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
                    new fadeshow(fadeimages, 640, 200, 0, 10000, 1) <!-- High delay to stop it annoying me during the development -->
                </script>
            </div>
            <div class="threecol">
                <div class="c1">
                    <div> <!-- This div gives the border -20px -->
                    <h1>What We Do</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a pellentesque erat. Sed at orci id mi pretium sagittis sit amet eget nisi. Duis at est ipsum, at venenatis elit. Morbi quis mi augue, eu eleifend tellus. Donec consequat dolor eu dui.</p>
                    </div>
                </div>
                <div class="c2">
                    <div> <!-- This div gives the border -20px -->
                    <h1>Our Experience</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a pellentesque erat. Sed at orci id mi pretium sagittis sit amet eget nisi. Duis at est ipsum, at venenatis elit. Morbi quis mi augue, eu eleifend tellus. Donec consequat dolor eu dui.</p>
                    </div>
                </div>
                <div class="c3">
                    <div> <!-- This div gives the border -20px -->
                    <h1>Want More?</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a pellentesque erat. Sed at orci id mi pretium sagittis sit amet eget nisi. Duis at est ipsum, at venenatis elit. Morbi quis mi augue, eu eleifend tellus. Donec consequat dolor eu dui.</p>
                    </div>
                </div>
            </div>
            <div class="twocol">
                <div id="two-c1">
                    <h1 class="rightalign" id="jargon">We Try To Take The Jargon Out Of Web Design</h1>
                    <h1>Our Standard Solution</h1>
                    <ul>
                        <li>Unique Web Design</li>
                        <li>Domain Name Registration (URL)</li>
                        <li>Both Monthly & Yearly Hosting Packages For Your Convenience</li>
                        <li>Search Engine Optimisation (SEO) and Support
                        <li>5 Free Standard Email Accounts (e.g. [email protected])</li>
                        <li>Visitor Statistics Installation To Analyse Your Customer Information</li>
                    </ul>
                    <a href="#"><h2 class="rightalign" id="technicaldetails">Want More Technical Details? Follow Me.</h2></a>
                </div>
                <div id="two-c2">
                    <h1>Recent Projects</h1>
                    <div id="slide-port"><p>Stocks Studio came to us needing an online presence. We gave them just that.</p></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="footer">
    <div id="footer_content">
        <div class="threecol">
            <div class="c1">
                <div> <!-- This div gives the border -20px -->
                   <a href="#"><h2>Latest Blog Posts</h2></a>
                <!-- Example blog posts -->
                <ul>
                    <a href="#"><li>Lorem ipsum dolor sit amet</li></a>
                    <a href="#"><li>Consectetur adipiscing elit</li></a>
                    <a href="#"><li>Aliquam viverra bibendum varius</li></a>
                    <a href="#"><li>Morbi molestie justo</li></a>
                    <a href="#"><li>Ac tempus sollicitudin orci</li></a>
                    <a href="#"><li>AAAAb</li></a>
                </ul>
                   </div>
            </div>
            <div class="c2">
                <div> <!-- This div gives the border -20px -->
                   <a href="#"><h2>Lorem Ipsum Dolor</h2></a>
                <!-- Example blog posts -->
                <ul>
                    <a href="#"><li>Lorem ipsum dolor sit amet</li></a>
                    <a href="#"><li>Morbi molestie justo</li></a>
                    <a href="#"><li>Ac tempus sollicitudin orci</li></a>
                </ul>
                </div>
            </div>
            <div class="c3">
                <div> <!-- This div gives the border -20px -->
                <a href="#"><h2>Sit Amet met met</h2></a>
                <!-- Example blog posts -->
                <ul>
                    <a href="#"><li>Lorem ipsum dolor sit amet</li></a>
                    <a href="#"><li>Consectetur adipiscing elit</li></a>
                    <a href="#"><li>Aliquam viverra bibendum varius</li></a>
                    <a href="#"><li>Morbi molestie justo</li></a>
                </ul>
                   </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Cheers Harry.

I'm contemplating doing it all over and starting again, but I think I would come out at near the same solution.
 
I think you might need to rejig your min-heights. Is the issue that the vertical border lines aren't the same height?
 
Actually, step #1: get rid of those markup errors. They can't be helping.

EDIT: Here is some error-less Strict markup, I've not fixed the original problem yet though.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Xenonsoft Redesign (CHANGE THE TITLE)</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="outer_container">
    <div id="container">
        <div id="buttons">
            <a href="#" class="rollover" id="home" title="Home"><span class="displace">Home</span></a>
            <a href="#" class="rollover" id="services" title="Services"><span class="displace">Services</span></a>
            <a href="#" class="rollover" id="portfolio" title="Portfolio"><span class="displace">Portfolio</span></a>
            <a href="#" class="rollover" id="testimonials" title="Testimonials"><span class="displace">Testimonials</span></a>
            <a href="#" class="rollover" id="contact" title="Contact"><span class="displace">Contact</span></a>
            <a href="#" class="rollover" id="blog" title="Blog"><span class="displace">Blog</span></a>
        </div>
        <div id="quotes"></div>
        <div id="content">
            <div id="javascript-slideshow">
                <script type="text/javascript">
                    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
                    new fadeshow(fadeimages, 640, 200, 0, 10000, 1) <!-- High delay to stop it annoying me during the development -->
                </script>
            </div>
            <div class="threecol">
                <div class="c1">
                    <div> <!-- This div gives the border -20px -->
                    <h1>What We Do</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a pellentesque erat. Sed at orci id mi pretium sagittis sit amet eget nisi. Duis at est ipsum, at venenatis elit. Morbi quis mi augue, eu eleifend tellus. Donec consequat dolor eu dui.</p>
                    </div>
                </div>
                <div class="c2">
                    <div> <!-- This div gives the border -20px -->
                    <h1>Our Experience</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a pellentesque erat. Sed at orci id mi pretium sagittis sit amet eget nisi. Duis at est ipsum, at venenatis elit. Morbi quis mi augue, eu eleifend tellus. Donec consequat dolor eu dui.</p>
                    </div>
                </div>
                <div class="c3">
                    <div> <!-- This div gives the border -20px -->
                    <h1>Want More?</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a pellentesque erat. Sed at orci id mi pretium sagittis sit amet eget nisi. Duis at est ipsum, at venenatis elit. Morbi quis mi augue, eu eleifend tellus. Donec consequat dolor eu dui.</p>
                    </div>
                </div>
            </div>
            <div class="twocol">
                <div id="two-c1">
                    <h1 class="rightalign" id="jargon">We Try To Take The Jargon Out Of Web Design</h1>
                    <h1>Our Standard Solution</h1>
                    <ul>
                        <li>Unique Web Design</li>
                        <li>Domain Name Registration (URL)</li>
                        <li>Both Monthly & Yearly Hosting Packages For Your Convenience</li>
                        <li>Search Engine Optimisation (SEO) and Support</li>
                        <li>5 Free Standard Email Accounts (e.g. [email protected])</li>
                        <li>Visitor Statistics Installation To Analyse Your Customer Information</li>
                    </ul>
                    <h2 class="rightalign" id="technicaldetails"><a href="#">Want More Technical Details? Follow Me.</a></h2>
                </div>
                <div id="two-c2">
                    <h1>Recent Projects</h1>
                    <div id="slide-port"><p>Stocks Studio came to us needing an online presence. We gave them just that.</p></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="footer">
    <div id="footer_content">
        <div class="threecol">
            <div class="c1">
                <div> <!-- This div gives the border -20px -->
                   <h2><a href="#">Latest Blog Posts</a></h2>
                <!-- Example blog posts -->
                <ul>
                    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                    <li><a href="#">Consectetur adipiscing elit</a></li>
                    <li><a href="#">Aliquam viverra bibendum varius</a></li>
                    <li><a href="#">Morbi molestie justo</a></li>
                    <li><a href="#">Ac tempus sollicitudin orci</a></li>
                    <li><a href="#">AAAAb</a></li>
                </ul>
                   </div>
            </div>
            <div class="c2">
                <div> <!-- This div gives the border -20px -->
                   <h2><a href="#">Lorem Ipsum Dolor</a></h2>
                <!-- Example blog posts -->
                <ul>
                    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                    <li><a href="#">Morbi molestie justo</a></li>
                    <li><a href="#">Ac tempus sollicitudin orci</a></li>
                </ul>
                </div>
            </div>
            <div class="c3">
                <div> <!-- This div gives the border -20px -->
                <h2><a href="#">Sit Amet met met</a></h2>
                <!-- Example blog posts -->
                <ul>
                    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                    <li><a href="#">Consectetur adipiscing elit</a></li>
                    <li><a href="#">Aliquam viverra bibendum varius</a></li>
                    <li><a href="#">Morbi molestie justo</a></li>
                </ul>
                   </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
 
Harry said:
I think you might need to rejig your min-heights. Is the issue that the vertical border lines aren't the same height?
Click to expand...
The issue is that the footer doesnt stretch to the content, and currently it's not sitting as hoped, with it being below the background.

30uwboz.jpg


Harry said:
Actually, step #1: get rid of those markup errors. They can't be helping.

EDIT: Here is some error-less Strict markup, I've not fixed the original problem yet though.

*HTML*
Click to expand...
Cheers Harry, I'll take a look at that, hadn't realised I had so many errors on there!
 
This is doing my head in, coding is so fun :D

I'm not gonna copy and paste your code up there Harry, as I think it will just make things more confusing at my end. I'll go through the errors and fix them though.

I've had a look at your HTML changes though and can't spot them at first glance, what exactly were you advising to change?
 
I'm getting there fella, off for some lunch, will be back to you.

EDIT: It's totally safe to use my code, you just hadn't closed a few tags and had a tags outside h1 and li tags.
 
Ah right, cheers Harry! No idea how you find time to help me, but it's appreciated. I'll try using your code, hopefully it wont really confuse me :lol:

EDIT: Ah, so <a></a>'s should be inside the <h2>/<p>/<li> elements. Gotcha.
 
Here's the editted CSS code reflecting a change or two :)

Code: 
@charset "utf-8";/* CSS Document *//* Cross browser reset */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {      margin:0;     padding:0; }body {    color:#e5e5e5;    font-size:12px;    font-family:Arial, Helvetica, sans-serif;    }a img {    border-style:none;}body {    background-color:#262626;}#outer_container {    width:880px;    height:553px;    background-image:url('images/body_background.png');    background-repeat:no-repeat;    margin:0 auto;}#container {    width:700px;    min-height:50px; /* Used by FF, IE7+ etc */    height:auto !important; /* Used by all, ignored by IE6 */    height:1500px; /* Used only by IE6 as IE6 ignores !important on duplicate declerations  */    margin:0 auto;}ul,ol,li { list-style-type:upper-roman; }p { line-height:20px; }ul { line-height:20px; padding-left:21px; }a { color:#e5e5e5; text-decoration:none; font-weight:400; font-size:12px; font-family:Arial, Helvetica, sans-serif; }h2 a  { color:#80a1e3; text-decoration:none; font-weight:400; font-size:18px; font-family:Cambria, Georgia, "Times New Roman", Times, serif; }h2:hover a { color:#8FB6FF; }#buttons {    width:700px;    height:80px;    margin:0 auto;}#home, #services, #portfolio, #testimonials, #contact, #blog { float:left; }a.rollover#home {    display:block;    width:106px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_home.png); }a.rollover:hover#home { background-position:0 -80px; }#home .displace { position: absolute; left:-5000px; }a.rollover#services {    display:block;    width:115px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_services.png); }a.rollover:hover#services { background-position:0 -80px; }#services .displace { position: absolute; left:-5000px; }a.rollover#portfolio {    display:block;    width:119px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_portfolio.png); }a.rollover:hover#portfolio { background-position:0 -80px; }#portfolio .displace { position: absolute; left:-5000px; }a.rollover#testimonials {    display:block;    width:155px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_testimonials.png); }a.rollover:hover#testimonials { background-position:0 -80px; }#testimonials .displace { position: absolute; left:-5000px; }a.rollover#contact {    display:block;    width:114px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_contact.png); }a.rollover:hover#contact { background-position:0 -80px; }#contact .displace { position: absolute; left:-5000px; }a.rollover#blog {    display:block;    width:91px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_blog.png); }a.rollover:hover#blog { background-position:0 -80px; }#blog .displace { position: absolute; left:-5000px; }#content {    width:640px;    min-height:50px; /* Used by FF, IE7+ etc */    height:auto !important; /* Used by all, ignored by IE6 */    height:1500px; /* Used only by IE6 as IE6 ignores !important on duplicate declerations */    margin:90px auto 0;}#quotes {    width:300px;    height:35px;    background-color:#36F;    float:right;    margin:13px 30px;}#content h1 { font:400 24px Cambria, Georgia, "Times New Roman", Times, serif; color:#FFF; }#content .threecol {    width:640px;    min-height:50px; /* Used by FF, IE7+ etc */    height:auto !important; /* Used by all, ignored by IE6 */    height:500px; /* Used only by IE6 as IE6 ignores !important on duplicate declerations */    margin-top:43px; /* 23 px + 20px for the margin:-20px 0; case below */    float:left;}#content .c1 {    border-left:1px solid #484848;    border-right:1px solid #484848;    padding:0 14px;    width:184px;    float:left;}#content .c2, #content .c3 {    border-right:1px solid #484848;    padding:0 14px;    width:184px;    float:left;}#content .c1 div, #content .c2 div, #content .c3 div { margin:-20px 0; position:relative; }#content .twocol {    width:640px;    min-height:50px; /* Used by FF, IE7+ etc */    height:auto !important; /* Used by all, ignored by IE6 */    height:500px; /* Used only by IE6 as IE6 ignores !important on duplicate declerations */    display:block;    float:left;    margin-top:45px;}#content .twocol #two-c1 {    width:397px; /* 429px - 14px(x2) padding */    min-height:100px; /* Box will go no smaller than 100px regardless of content */    height:auto !important;    height:500px; /* Maximum height the box will stretch to */    background-color:#2e2e2e;    border:1px solid #4c4c4c;    padding:13px 14px 14px 14px;    float:left;}#two-c1 .rightalign#jargon {    text-align:right;    font-weight:900;    line-height:22px;}.rightalign#technicaldetails { text-align:right; }#content .twocol #two-c2 {    width:185px;    float:left;    padding:11px 10px 14px 14px;}#slide-port {    background-image:url(images/slide_port/stocks-studio.png);    width:184px;    height:174px;    margin-top:4px;}#slide-port p { padding-top:120px; } /* Drops the text below the image */#footer {    width:100%;    min-height:50px; /* Used by FF, IE7+ etc */    height:auto !important; /* Used by all, ignored by IE6 */    height:500px; /* Used only by IE6 as IE6 ignores !important on duplicate declerations */    background-color:#1F1F1F;    margin-top:30px;    border-top:1px solid #000;    float:left;}#footer_content {    width:100%;    min-height:50px; /* Used by FF, IE7+ etc */    height:auto !important; /* Used by all, ignored by IE6 */    height:500px; /* Used only by IE6 as IE6 ignores !important on duplicate declerations */}#footer_content .threecol {    width:640px;    min-height:50px;    height:auto !important;    height:500px;    margin:0 auto;    margin-top:20px;    padding:30px 0;}#footer_content .c1 {    border-left:1px solid #3e3e3e;    border-right:1px solid #3e3e3e;    padding:0 14px;    width:184px;    min-height:50px; /* Used by FF, IE7+ etc */    height:auto !important; /* Used by all, ignored by IE6 */    height:500px; /* Used only by IE6 as IE6 ignores !important on duplicate declerations */    float:left;}#footer_content .c2, #footer_content .c3 {    border-right:1px solid #3e3e3e;    padding:0 14px;    width:184px;    min-height:50px; /* Used by FF, IE7+ etc */    height:auto !important; /* Used by all, ignored by IE6 */    height:500px; /* Used only by IE6 as IE6 ignores !important on duplicate declerations */    float:left;}#footer_content .c1 div, #footer_content .c2 div, #footer_content .c3 div { margin:-20px 0; position:relative; }#footer h2 { font-weight:400; font-size:18px; font-family:Cambria, Georgia, "Times New Roman", Times, serif; color:#FFF; }#footer ul, #footer ol, #footer li { list-style-type:none; }#footer ul { padding:0; }
 
Hmm, I'm changing your CSS quite a lot (more than two). Will have to merge them later.

And <a> is inline, so has to go inside block level elements (h#, p, li etc) until HTML5.
 
Right, gotcha. Feel free to change the CSS (ignore my small change you've probably fixed that yourself) if it's all still working mate, I can adapt it later if there's anything that doesn't quite work.

When we reach HTML5 are the <a> elements going to go inside block level elements?
 
Okay, done.

Here's latest (valid strict) markup:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Xenonsoft Redesign (CHANGE THE TITLE)</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="outer_container">
    <div id="container">
        <div id="buttons">
            <a href="#" class="rollover" id="home" title="Home"><span class="displace">Home</span></a>
            <a href="#" class="rollover" id="services" title="Services"><span class="displace">Services</span></a>
            <a href="#" class="rollover" id="portfolio" title="Portfolio"><span class="displace">Portfolio</span></a>
            <a href="#" class="rollover" id="testimonials" title="Testimonials"><span class="displace">Testimonials</span></a>
            <a href="#" class="rollover" id="contact" title="Contact"><span class="displace">Contact</span></a>
            <a href="#" class="rollover" id="blog" title="Blog"><span class="displace">Blog</span></a>
        </div>
        <div id="quotes"></div>
        <div id="content">
            <div id="javascript-slideshow">
                <script type="text/javascript">
                    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
                    new fadeshow(fadeimages, 640, 200, 0, 10000, 1) <!-- High delay to stop it annoying me during the development -->
                </script>
            </div>
            <div class="threecol">
                <div class="c1">
                    <div> <!-- This div gives the border -20px -->
                    <h1>What We Do</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a pellentesque erat. Sed at orci id mi pretium sagittis sit amet eget nisi. Duis at est ipsum, at venenatis elit. Morbi quis mi augue, eu eleifend tellus. Donec consequat dolor eu dui.</p>
                    </div>
                </div>
                <div class="c2">
                    <div> <!-- This div gives the border -20px -->
                    <h1>Our Experience</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a pellentesque erat. Sed at orci id mi pretium sagittis sit amet eget nisi. Duis at est ipsum, at venenatis elit. Morbi quis mi augue, eu eleifend tellus. Donec consequat dolor eu dui.</p>
                    </div>
                </div>
                <div class="c3">
                    <div> <!-- This div gives the border -20px -->
                    <h1>Want More?</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a pellentesque erat. Sed at orci id mi pretium sagittis sit amet eget nisi. Duis at est ipsum, at venenatis elit. Morbi quis mi augue, eu eleifend tellus. Donec consequat dolor eu dui.</p>
                    </div>
                </div>
            </div>
            <div class="twocol">
                <div id="two-c1">
                    <h1 class="rightalign" id="jargon">We Try To Take The Jargon Out Of Web Design</h1>
                    <h1>Our Standard Solution</h1>
                    <ul>
                        <li>Unique Web Design</li>
                        <li>Domain Name Registration (URL)</li>
                        <li>Both Monthly & Yearly Hosting Packages For Your Convenience</li>
                        <li>Search Engine Optimisation (SEO) and Support</li>
                        <li>5 Free Standard Email Accounts (e.g. [email protected])</li>
                        <li>Visitor Statistics Installation To Analyse Your Customer Information</li>
                    </ul>
                    <h2 class="rightalign" id="technicaldetails"><a href="#">Want More Technical Details? Follow Me.</a></h2>
                </div>
                <div id="two-c2">
                    <h1>Recent Projects</h1>
                    <div id="slide-port"><p>Stocks Studio came to us needing an online presence. We gave them just that.</p></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="footer">
	<div class="threecol">
		<div class="c1">
			<div>
				<h2><a href="#">Latest Blog Posts</a></h2>
				<!-- Example blog posts -->
				<ul>
					<li><a href="#">Lorem ipsum dolor sit amet</a></li>
					<li><a href="#">Consectetur adipiscing elit</a></li>
					<li><a href="#">Aliquam viverra bibendum varius</a></li>
					<li><a href="#">Morbi molestie justo</a></li>
					<li><a href="#">Ac tempus sollicitudin orci</a></li>
					<li><a href="#">AAAAb</a></li>
				</ul>
			</div>
		</div>
		<div class="c2">
			<div> <!-- This div gives the border -20px -->
				   <h2><a href="#">Lorem Ipsum Dolor</a></h2>
				<!-- Example blog posts -->
				<ul>
					<li><a href="#">Lorem ipsum dolor sit amet</a></li>
					<li><a href="#">Morbi molestie justo</a></li>
					<li><a href="#">Ac tempus sollicitudin orci</a></li>
				</ul>
			</div>
		</div>
		<div class="c3">
			<div> <!-- This div gives the border -20px -->
				<h2><a href="#">Sit Amet met met</a></h2>
				<!-- Example blog posts -->
				<ul>
					<li><a href="#">Lorem ipsum dolor sit amet</a></li>
					<li><a href="#">Consectetur adipiscing elit</a></li>
					<li><a href="#">Aliquam viverra bibendum varius</a></li>
					<li><a href="#">Morbi molestie justo</a></li>
				</ul>
			</div>
		</div>
    </div>
</div>
</body>
</html>

to be continued…
 
…continued.


and CSS:

Code: 
@charset "utf-8";/* CSS Document *//* Cross browser reset */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {      margin:0;     padding:0; }body {    color:#e5e5e5;    font-size:12px;    font-family:Arial, Helvetica, sans-serif;    }a img {    border-style:none;}body {    background-color:#262626;}#outer_container {    width:880px;    overflow:hidden;    background-image:url('images/body_background.png');    background-repeat:no-repeat;    margin:0 auto;}#container {    width:700px;    height:100%;    margin:0 auto;}ul,ol,li { list-style-type:upper-roman; }p { line-height:20px; }ul { line-height:20px; padding-left:21px; }a { color:#e5e5e5; text-decoration:none; font-weight:400; font-size:12px; font-family:Arial, Helvetica, sans-serif; }a h2 { color:#80a1e3; text-decoration:none; font-weight:400; font-size:18px; font-family:Cambria, Georgia, "Times New Roman", Times, serif; }a h2:hover { color:#8FB6FF; }#buttons {    width:700px;    height:80px;    margin:0 auto;}#home, #services, #portfolio, #testimonials, #contact, #blog { float:left; }a.rollover#home {    display:block;    width:106px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_home.png); }a.rollover:hover#home { background-position:0 -80px; }#home .displace { position: absolute; left:-5000px; }a.rollover#services {    display:block;    width:115px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_services.png); }a.rollover:hover#services { background-position:0 -80px; }#services .displace { position: absolute; left:-5000px; }a.rollover#portfolio {    display:block;    width:119px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_portfolio.png); }a.rollover:hover#portfolio { background-position:0 -80px; }#portfolio .displace { position: absolute; left:-5000px; }a.rollover#testimonials {    display:block;    width:155px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_testimonials.png); }a.rollover:hover#testimonials { background-position:0 -80px; }#testimonials .displace { position: absolute; left:-5000px; }a.rollover#contact {    display:block;    width:114px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_contact.png); }a.rollover:hover#contact { background-position:0 -80px; }#contact .displace { position: absolute; left:-5000px; }a.rollover#blog {    display:block;    width:91px;    height:80px;    text-decoration:none;    background:url(images/btns/btn_blog.png); }a.rollover:hover#blog { background-position:0 -80px; }#blog .displace { position: absolute; left:-5000px; }#content {    width:640px;    margin:90px auto 0;}#quotes {    width:300px;    height:35px;    background-color:#36F;    float:right;    margin:13px 30px;}#content h1 { font:400 24px Cambria, Georgia, "Times New Roman", Times, serif; color:#FFF; }#content .threecol {    width:640px;    height:100%;    margin-top:43px; /* 23 px + 20px for the margin:-20px 0; case below */    float:left;}#content .c1 {    border-left:1px solid #484848;    border-right:1px solid #484848;    padding:0 14px;    width:184px;    float:left;}#content .c2, #content .c3 {    border-right:1px solid #484848;    padding:0 14px;    width:184px;    float:left;}#content .c1 div, #content .c2 div, #content .c3 div { margin:-20px 0; position:relative; }#content .twocol {    width:640px;    height:100%;    display:block;    float:left;}#content .twocol #two-c1 {    width:401px; /* 429px - 14px(x2) padding */    min-height:100px; /* Box will go no smaller than 100px regardless of content */    height:auto !important;    height:500px; /* Maximum height the box will stretch to */    background-color:#2e2e2e;    border:1px solid #4c4c4c;    padding:13px 14px 14px 14px;    float:left;}#two-c1 .rightalign#jargon {    text-align:right;    font-weight:900;    line-height:22px;}.rightalign#technicaldetails { text-align:right; }#content .twocol #two-c2 {    width:185px;    float:left;    padding:11px 10px 14px 14px;}#slide-port {    background-image:url(images/slide_port/stocks-studio.png);    width:184px;    height:174px;    margin-top:4px;}#slide-port p { padding-top:120px; } /* Drops the text below the image */#footer {    width:100%;    background-color:#1f1f1f;    margin-top:80px;    border-top:1px solid #000;	clear:both;	overflow:hidden;	padding-bottom:40px;}#footer_content{    width:100%;    min-height:50px; /* Used by FF, IE7+ etc */    height:auto !important; /* Used by all, ignored by IE6 */    height:500px; /* Used only by IE6 as IE6 ignores !important on duplicate declerations */}/*#footer_content */.threecol {    width:640px;    margin:0 auto;    margin-top:20px;    padding:30px 0;}/*#footer_content */.c1 {    border-left:1px solid #3e3e3e;    border-right:1px solid #3e3e3e;    padding:0 14px;    width:184px;    min-height:50px; /* Used by FF, IE7+ etc */    height:auto !important; /* Used by all, ignored by IE6 */    height:500px; /* Used only by IE6 as IE6 ignores !important on duplicate declerations */    float:left;}/*#footer_content */.c2, /*#footer_content */.c3 {    border-right:1px solid #3e3e3e;    padding:0 14px;    width:184px;    min-height:50px; /* Used by FF, IE7+ etc */    height:auto !important; /* Used by all, ignored by IE6 */    height:500px; /* Used only by IE6 as IE6 ignores !important on duplicate declerations */    float:left;}/*#footer_content */.c1 div, /*#footer_content */.c2 div, /*#footer_content */.c3 div { margin:-20px 0; position:relative; }#footer h2 { font-weight:400; font-size:18px; font-family:Cambria, Georgia, "Times New Roman", Times, serif; color:#FFF; }#footer ul, #footer ol, #footer li { list-style-type:none; }#footer ul { padding:0; }


And in HTML5 they're proposing a tags around elements, eg <a href="#"><div><p>Content</p></div></a>
 
Finally, avoid using the height declaration wherever possible. That's where most of your problems have come in. The height declaration causes untold problems when content changes—only use it if you absolutely have to! I use height:…; once in my entire site's CSS.
 
Ah cool, cheers Harry! I'm in your debt.

Having used that code there it's seemingly working, certainly fixed the footer problem, but created a small one which I should be able to fix in a second, here:

6td2yb.jpg
 
Harry said:
Finally, avoid using the height declaration wherever possible. That's where most of your problems have come in. The height declaration causes untold problems when content changes—only use it if you absolutely have to! I use height:…; once in my entire site's CSS.
Click to expand...
Oh right, now that really is interesting.

I would have thought it would be best to use height, but now I know that I shall certainly stop declaring it :D

Cheers again :up:
 
The problem in your post is because of the content's height declaration ;) I've fixed it in the final CSS I posted.
 
Oh right haha, I just copied and pasted your css, maybe I did it wrong.

Anyway, it was #content .twocol { height:100%; } yeah, just took that out and worked a treat cheers :cheers:


All looks spot on, til I look in IE7 :D

Ah well, time for some debugging.
 
You must log in or register to reply here.
Back
Top