css issue

acrikey · #1 Jul 21st, 2007, 21:07

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 · #2 Jul 21st, 2007, 21:12

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

Pete.

Lchad · #3 Jul 21st, 2007, 22:20

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 · #4 Jul 23rd, 2007, 14:34

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

karinne · #5 Jul 23rd, 2007, 14:58

Do you have a link?

acrikey · #6 Jul 24th, 2007, 08:25

www.lightex.co.uk/south

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

acrikey · #7 Jul 25th, 2007, 15:26

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 · #8 Jul 25th, 2007, 15:36

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

Lchad · #9 Jul 25th, 2007, 15:37

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

Lchad · #10 Jul 25th, 2007, 15:47

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 · #11 Jul 25th, 2007, 16:28

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 · #12 Jul 25th, 2007, 16:50

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 · #13 Jul 25th, 2007, 17:43

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 · #14 Jul 25th, 2007, 18:03

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

acrikey · #15 Jul 25th, 2007, 18:11

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 · #16 Jul 25th, 2007, 18:37

I have done it. Wooohoooooooooooooooooooooooooooooooooooooooooooo

acrikey · #17 Jul 25th, 2007, 18:37

I think

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
JS issue	acrikey	JavaScript Forum	6	Jul 25th, 2007 17:45
Issue in IE6	aholmes	Web Page Design	7	Jul 13th, 2007 10:00
CSS issue in IE7	bluetech	Web Page Design	6	Jul 3rd, 2007 15:36
Help Odd Issue?	drappendix	Web Page Design	8	Aug 9th, 2006 17:53
IE issue	Pheonix	Web Page Design	2	Dec 2nd, 2005 21:58

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
css issue