css issue

[acrikey]

Have a problem with my css, there is a footer at the bottom that wont show, is there something wrong with my code? The image is hosted in the image file and live and they are both named the same.

Code: Select all

/* CSS Basic Document */
body
{
margin:0px auto;
padding:0px;
background:url(../images/body_top_bg.jpg) left top repeat-x #161921;
}

.input_field
{
width:150px;
height:13px;
background-color:#FFFFDE;
padding-left:3px;
color:#212121;
}
.border_bottom
{
border-bottom:1px dashed #8B8C90;
}
.news_box
{
border:3px solid #FFA401;
padding:9px;
}
.footer_icon
{
margin-left:10px;
margin-right:10px;
}






/* CSS Background image Document */
.bar_left_bg
{
background:url(../images/bar_left_bg.gif) left top repeat-y;
width:11px;
}
.bar_right_bg
{
background:url(../images/bar_right_bg.gif) left top repeat-y;
width:11px;
}
.banner
{
background: url(../images/banner.jpg) left bottom no-repeat;
height:490px;
}
.footer_bot_bg
{
margin:0px auto;
padding:0px;
background:url(../images/body_bot_bg.jpg) left top repeat-x #161921;
}
.footer_bg
{
background:url(../images/footer_bg.jpg) left bottom repeat-x;
height:91px;
}

.bonus_bg
{
background:url(../images/bonus_bg.jpg) left top no-repeat;
height:180px;
}
.bonus_bg
{
background:url(../images/bonus_bg.jpg) left top no-repeat;
height:180px;
}
.download_bt
{
margin-left:52px;
margin-top:102px;
}





/* CSS Text Document */
body {
    font-family: "Humanst521 BT";
    font-size: 14px;
    font-style: normal;
    line-height: 15px;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #D0D1D3;
    text-decoration: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #FFFC00;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #FFFC00;
}
.top_menu_text {
    font-family: Humanst521 BT;
    font-size: 14px;
    font-style: Bold;
    line-height: 5px;
    font-weight: bold;
    font-variant: normal;
    text-transform: none;
    color: #FFFFFF;
    background-color:inherit;
    text-decoration: none;
}
.top_menu_text:hover
{
color:#FFC1C7;
background-color:inherit;
text-decoration:underline;
}
.more_link
{
color:#F2D85C;
background-color:inherit;
font-weight:bold;
text-decoration:none;
line-height:13px;
}
.more_link:hover
{
text-decoration:underline;
color:#F2D85C;
background-color:inherit;
}
.more_white
{
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
background-color:inherit;
}
.more_white:hover
{
text-decoration:underline;
color:#999999;
background-color:inherit;
}

.footer_link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: normal;
    line-height: 13px;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #FFFFFF;
    text-decoration: none;
    background-color:inherit;
}
.footer_link:hover
{
text-decoration:underline;
color:#999999;
background-color:inherit;
}

code in question

Code: Select all

.footer_bot_bg
{
margin:0px auto;
padding:0px;
background:url(../images/body_bot_bg.jpg) left top repeat-x #161921;
}

[pa007]

Does the footer have content in the HTML? If not you'll need to display:block and set dimensions.

Pete.

[Lchad]

Your shorthand is out of order ... that will often be the case.

Code: Select all

.footer_bot_bg
{
margin:0px auto;
padding:0px;
background:#161921 url(../images/body_bot_bg.jpg) repeat-x left top;
}

Also if there isn't any content as Pete said, you'll need a height added to make it visible.

[acrikey]

No still not working any yes the footer will have a sub menu running in it

[karinne]

Do you have a link?

[acrikey]

www.lightex.co.uk/south

The blue footer is one I put in, not from the CSS

[acrikey]

Starting to get desperate for a fix for this, I am now tearing my hair out as I have now crashed my CSS too many times. Please help anyone

[Lchad]

Tell me what part of the code is the problem please?

[Lchad]

Nevermind, I see you posted it above. I'm looking at it!

[Lchad]

Well I can't find in your html anywhere that has .footer_bot_bg attached to it.

Can you maybe make this a little easier and give me some clear idea as to what to look for ?

[acrikey]

I want to replicate the top blue bar at the bottom of the page so I can get the sub menu out of the horrible blue table and into the CSS bar

[Lchad]

This table that is holding the bottom navigation is not set too 100%(see pink code). It's set with a width of 760px so it's not allowing the navigation (which is nested inside in blue) to expand across the page.

Code: Select all

<table width="760" height="144" cellpadding="0" cellspacing="0">
              <tr>
                <td width="725" height="1" colspan="6"><br />
                          </tr>
              <tr>

                <td height="32" width="126" align="right" valign="middle" bordercolor="#FFFC01" bgcolor="#006CAC"><div align="center" class="style41"><span class="style15"><a href="project.html">Our Projects</a> </span></div></td>
                <td height="32" width="126" align="right" valign="middle" bordercolor="#FFFC01" bgcolor="#006CAC"><div align="center" class="style41"><span class="style15"><a href="kamchatka.html">Kamchatka</a></span></div></td>
                <td height="32" width="126" align="right" valign="middle" bordercolor="#FFFC01" bgcolor="#006CAC"><div align="center" class="style41"><span class="style15"><a href="davos.html">DK Ride</a></span></div></td>
                <td height="32" width="126" align="right" valign="middle" bordercolor="#FFFC01" bgcolor="#006CAC"><div align="center" class="style41"><span class="style15"><a href="runjumpfly.html">Run Jump Fly</a></span></div></td>
                <td height="32" width="126" align="right" valign="middle" bordercolor="#FFFC01" bgcolor="#006CAC"><div align="center" class="style41"><span class="style15"><a href="school.html">School Talks </a></span></div></td>
                <td height="32" width="126" align="right" valign="middle" bordercolor="#FFFC01" bgcolor="#006CAC"><div align="center" class="style41"><span class="style40"><a href="sponsors.html">Sponsors</a></span></div></td>

              </tr>
              
              
              
              <tr>
                <td height="18" colspan="6" align="center" valign="bottom" style="font-size:10px;"><p>&nbsp;</p>
                  <p>&nbsp;</p>
                  <p><span class="style9"><a href="policy.html">Privacy Policy</a> |<a href="sitemap.html">Sitemap</a></span></p></td>
              </tr>
              <tr>

                <td height="18" colspan="6" align="center" valign="bottom" style="font-size:10px;"><p class="style9">Copyright 2007 Southwell Enterprise.com, All rights reserved.</p>                  </td>
                </tr>
              <tr>
                <td height="18" colspan="6" align="center" valign="bottom" style="font-size:10px;"><span class="style39">Copyright 2007 Southwell Enterprise.com, All rights reserved.</span></td>
                </tr>
              
            </table>

[acrikey]

The mail area where the box ends is 760 pxl wide if I want to go the full length across the page I have to use the CSS as the table form would only be able to be place between the 2 T's at the base of the Company Info page.

[Lchad]

LOL What?
Why are you using tables?
Why don't you just make a footer div and insert a list <li></li>

[acrikey]

That is what I want but the footer image is lost in translation, it is in the CSS but not showing in the htlm. I have used a table to do the job temporarily and to show where the CSS should be

[acrikey]

I have done it. Wooohoooooooooooooooooooooooooooooooooooooooooooo

[acrikey]

I think