Footer problem, please help

i develop css and xhtml. i use test different browser footer not show up on firefox and other fine
like safari, ie8, chrome work fine only firefox not work ! also u can check files and image !


href="http://cid-7f22b8a70a90b337.skydrive.live.com/self.aspx/.Public/Web-Site.zip

Hi shahramonline, Welcome to SitePoint :slight_smile:

The problem is the multiple hyphens in your html comments.

<div id="w_bottom">[COLOR=Red]<!----------open tag all bottom-------->[/COLOR]
<div id="w_icons">
<img src="images/feedback.gif" width="200" height="110" alt="what people are saying" />
<img src="images/map.gif" width="200" height="110" alt="location" />
<img src="images/phone.gif"  width="200" height="110" alt="Phone" />
</div>
</div>[COLOR=Red]<!----------Close tag all bottom-------->[/COLOR]

You should only be using two hyphens in your html comments.

<div id="w_bottom">[COLOR=DarkGreen]<!--open tag all bottom-->[/COLOR]
<div id="w_icons">
<img src="images/feedback.gif" width="200" height="110" alt="what people are saying" />
<img src="images/map.gif" width="200" height="110" alt="location" />
<img src="images/phone.gif"  width="200" height="110" alt="Phone" />
</div>
</div>[COLOR=DarkGreen]<!--Close tag all bottom-->[/COLOR]

There are several other things that need to be cleaned up in your html and css also. If I get a chance I will post back with a cleaner version of your page.

Here we go - removed all errors and validated:

http://anetizer.com/downloads/sp-a/robin-kids-corner/

.

I had something a little bit more semantic in mind. :slight_smile:

I went ahead and set up the top header links in a UL as they are obviously going to be a list of links. While in the header I went ahead and set an H1 image replacement technique for the logo image. Since the logo image is a transparent png the replacement text gets set to the same color as the header. In doing that the header now gets a 10x10 repeating image in place of the BG color so the BG color defaults to white with images off to make the text visible.

The content div will now contain it’s floats and the height gets changed to min-height with an IE6 workaround.

The lower images get set up in a UL also so they display as a list of links if images are turned off.

Test page -
http://www.css-lab.com/test/shahram/test.html

With access to all files -
http://www.css-lab.com/test/shahram/

Here is the complete code below for the sake of keeping this post meaningful should the online files get purged. :wink:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Robin's Kids' Corner</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="page">
    <div id="header">
        <h1 id="logo">
            Robin's<br />kids' corner
            <span><a href="index.html"></a></span>
        </h1>
        <ul id="nav">
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link3</a></li>
            <li><a href="#">Link4</a></li>
        </ul>    
    </div>
    
    <div id="content">
        <div id="colum1">
            <p>Column one text</p>
            <p>Column one text</p>
            <p>Column one text</p>
            <p>Column one text</p>
        </div>
        <div id="colum2">
            <p>Column two text</p>
            <p>Column two text</p>
            <p>Column two text</p>
            <p>Column two text</p>
        </div>
    </div>

    <ul id="icons">
        <li><a href="#"><img src="images/feedback.gif" width="200" height="110" alt="what people are saying"/></a></li>
        <li><a href="#"><img src="images/map.gif" width="200" height="110" alt="location"/></a></li>
        <li><a href="#"><img src="images/phone.gif" width="200" height="110" alt="Phone"/></a></li>
    </ul>

    <div id="footer">
        <p>your copyright &copy; 2010, &amp; other footer stuff here</p>
    </div>
</div><!--end page-->

</body>
</html>

style.css

body {
    font:100&#37;/1.2 arial, helvetica, sans-serif;
    background:#BDF url(images/bg.gif);
    margin:0;
    padding:0;
}
a img {
    border:none;
    vertical-align:bottom;
}
p {margin:.5em;}

/*=== Begin Page Layout ===*/
#page {
    width:900px;
    margin:20px auto;
    padding-top:10px;
    background:#FFF;
    overflow:hidden;/*margin clearance*/
}

#header {
    width: 880px;
    margin:0 auto 10px;
    height:100px;
    background:#FFF url(images/header-bg.png) repeat;
}
    h1#logo {
        position:relative;/* for AP'd bg-image span*/
        float:left;
        width:240px;
        height:75px;
        margin:0;
        padding:0 0 0 10px;
        font:30px/34px arial,helvetica,sans-serif;
        color:#690;/*same as header-bg.png to work with transparent logo.png*/
    }
    #logo span { /*Gilder/Levin image replacement*/
        position:absolute;
        left:0; top:0;
        width:239px;
        height:75px;
        background:url(images/logo.png) no-repeat 0 0;
    }
    #logo span a {
        display:block;
        width:239px;
        height:75px;
    }
    /*=== Begin Header nav ===*/
    ul#nav {
        float:right;
        width:400px;
        margin:10px 10px 0;
        padding:0;
        display:inline; /* IE6 margin bug*/
        list-style:none;
        background:#CCC;
    }
    #nav li,#nav li a {
        float:left;
    }
    #nav li a {
        height:30px;
        line-height:30px;
        padding:0 15px;
        text-decoration:none;
    } 
    #nav li a:hover {
        background:#98FB98;
        text-decoration:underline;
    }     
    .logo {
        padding:10px;
    }

/*=== Begin Content and Columns Layout ===*/
#content {
    width: 880px;
    margin:0 auto 10px;
    min-height:400px;
    overflow:hidden;/*contain floats*/
    background:#CCC;
}
* html #content{height:400px;} /* IE6 min-height*/

    #colum1 {
        float:left;
        width:430px;/*440px total with padding*/
        padding:0 5px;
        margin-top:10px;
    }
    #colum2 {
        float:right;
        width:430px;/*440px total with padding*/
        padding:0 5px;
        margin-top:10px;
    }

/*=== Begin Icon UL and Footer ===*/

ul#icons {
    width:880px;
    margin:0 auto 10px;
    padding:0;
    list-style:none;
    text-align:center;
    font-size:2px;/*consistent text nodes*/
    /*background:#444;/*just for testing*/
}
#icons li {
    display:inline;
    margin:0 2px;
    font-size:14px;
}

#footer {
    width: 880px;
    margin:10px auto;
    padding:1px 0;
    background:#CCC;
}
#footer p{
    margin:.5em 0;
    font:bold .8em/1.2 arial;
    text-align:center;
}

Many thank you for your time and helpfully ! i have other question. what different position and box for layout ?? i want more learn layout which best web site ?

i have other question. what different position and box for layout ?? i want more learn layout which best web site ?

Hi,
Glad you found it helpful!
You can learn more about box and layout properties in the SitePoint CSS Reference.

You won’t necessarily learn how to build a website there but it will teach you how css properties work. You have to learn how to use these tools first before you can build anything with them. :wink: