CSS - Css Border (x-index??) Driving Me Mental! Help?

Hi everyone!

I've been struggling with a few problems with a new site I have just developed in HTML5 and CSS3...

These problems only occur in IE8 (and compatibility mode of)...I have IE9 installed and I can't reproduce any of the problems when I use compatibilty mode, however when I use IE Tester I can view the issues...which are....

1. When I click on a link in the footer or in the top of the header (home/contact) they are assigned 'visited' class but this makes them higher than the other links in the list... could this be anything to do with the 'nav' styling?

2. I can't produce bottom borders in the sub menus of the main navigation - I have tried removing padding, setting relative/absolute positioning and z-index values as has been suggested in other resources and nothing works!!!

If anyone can give me any help at all...or if you need any further information or access to my style sheets etc please let me know - I will really appreciate it!

Thanks in advance...Rachel

Hi,
I've got a strange problem, which I'm sure the answer to it is simple, but it escapes me at the moment.
I have a site we're building at: 209.200.245.223/$sitepreview/quality-edge.com/content.aspx?usertype=2&page=home
And as you can see, the background image is cut off (the colour on the left-hand side should be seen to fade out. I had to use min-height to get it to show, but I don't think that I completely understand min-height.
Mainly my problem is the footer and the background. I think I've read every footer how-to there is and I can't seem to get anything to work properly. I'm not new to CSS so this is really frustrating me.
Any help would be greatly appreciated.
Thanks,
Steph

Please visit this page -

http://www.tmhdesign3.com/real-estate-broker.asp

See the gap, about 10px, on the page just below the header? For the life of me I can't get rid of it in FF. I opened Firebug and specified a top:-10px on the content div and it closes the gap. BUT, when I open my css file on the server and chagne that spec and then open the page I still have the gap??? Thanks for any help.

Hi there.. please have a look here, someone knows how to get rid of the 20px gap between the two black boxes?

Hi -

I have a small problem with a contact form on my website not working properly and it is driving me crazy, now let me explain.

The website works fine in Firefox and Safari, and almost all the pages work fine in IE.

The only thing that isn't working is the contact page in IE. The contact page works fine in Firefox and Safari.

It's quite tricky to explain to you what I mean really, without showing you. The website is set to a certain width and I have all the margins and paddings correct, as far as I can tell anyway. The contact form is in PHP.

The website should be in the middle of the browser at about 900px wide, but when you go to the contact page the PHP code is for some reason making it align to the left, and making the horizontal menu become vertical and out of place.

If anyone on here knows about CSS and could take a look for me to see what's gone wrong, I don't think it would take to long, it's just something that I am not aware of or have overlooked in the code.

It would be greatly appreciated if you could let me know if you would like to help me out.

I'm new to this forum and I did come here looking for help but plan on sticking around so I look forward to meeting you all.

Huge thanks if anyone wants to help me, will probably only take a few minutes, I would post the link here but I don't wanna get banned as I am a new member.

Take a look at this page

http://www.gameworldx.com/test.html

I removed most of the html exept the part giving me problems, but all of the CSS is there.

You will see a blue bar(footer) and the white bar (bottom). Both of the links are blue and bold. Why? I have no idea. That is the problem. I noticed that is I remove the CSS for one div or the other, the opposite div shows correctly, but I dont know why it does that. Can anyone see any problems? It's really late, and I am tired, so its gotta be a really stupid mistake.

Thanks!

http://wrath.wr.funpic.org

Hello Devshed. I am new here and am here looking for help. Maybe I'm just tired and dumb right now to figure it out. Anyways if you would take a look at the site I pointed out you'll notice the bottom border is missing. Why?

When I removed the float:left; on the lis it is fine but when it's in there it's all screwed up.

Second thing... if you'll notice my hovers do not work in IE. Is there an alternate way for me to get them to work in IE.

Thanks a lot.

Hey, so I am a beginner in css and I can't seem to figure out this problem. I am trying to get a td to float: left, and it works just fine on firefox, but IE7 is not showing the float. Here is the code I have for it

/* Style for Entries in Category View (Cards View) */
/* -------------------------------------------------------- */
table.sobi2Listing {
}
table.sobi2Listing td {
vertical-align: top;
float: left;
height: 1%;
width: 97%;
}

/* new */
div.vcard_item {
margin: 1px 0px 2px 0;
padding: 6px;
width: 97%;
border:1px solid #dddddd;
background-color:#fbfaf2;
-moz-border-radius: 5px;

The actual page is findawebsitedesigner.info/directory-2.html
If you look at the entries, they are all floated perfectly in firefox, but not in IE7. If anybody has the fix to this I would love your help.

If it works in Netscape, it will not work in IE
If it works in IE, it will not work in Netscape.

Soo, what am I to do?

Okay, Im trying to make a table bg have an opacity of 40%. I've gone over the net to figure out the problems, knowing that filter:alpha{} is not recognized by Netscape.

So, I found some information to help overcome Netscape woes, and now the opacity isn't work in IE.

I need help before I rip all my hair out. So below is what Im working with.

Code:

<html>
<head>
<style type="text/css">
#menu {
    background-color: #FFFFFF;
	filter: alpha(opacity=40);
	filter: progid;:DXImageTransform.Microsoft.Alpha(opacity=40);
	-moz-opacity: 0.40;
	position:relative; top:0;
}
.tdbg {
	background-color: #FFFFFF;
	filter: Alpha(Opacity=40);
}
</style>
</head>
<body>
<table width="610" border="0" cellpadding="5" cellspacing="0" bgcolor="#FF0000">
  <tr> 
    <td align="center"> <table width="600" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td class="tdbg">FOO</td>
        </tr>
        <tr> 
          <td>&nbsp;</td>
        </tr>
        <tr> 
          <td><div id="menu">FOO</div></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

So, basically the top cell is "correct" in IE, but the bottom cel is not.
And opposite for Netscape (7.0+)

How can i fix it so its the same for both browsers?

Hi guys

Can anyone see why the following has a space under the nav in IE but not in Opera or FF?

http://www.mitya.co.uk/cssproblem

(CSS: http://www.mitya.co.uk/cssproblem/css/main.css )

I have been playing with it for ages and can't crack it. I've tried removing the clear, etc etc.

I'm relatively new to CSS-based design (as opposed to tables) but feel the code and my CSS are OK.

Thanks in advance

Hi,

This used to be my solution:
Code:

<table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'>

But this only works well on IE - not Mozilla

Now I want to use CSS:
Code:

	.results {
	  	border: 1px solid #CCCCCC ;
	}

Code:

<table class='results'>

---------------

The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't.

If I specify
Code:

<td class='results'>

for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping).

Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration?

Thanks a lot!

I would like to set up a table with a different border than the cells inside it. Here's my code:

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	TABLE {border: 1px solid black; border-collapse: collapse; width: 200px}
	TD {border: 1px solid #ccc}
</style>


</head>

<body>
<table>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

That's all hunky dory in (gasp!) IE, but good browsers...they only show the lighter gray color. How do I get the table border to be different?

Hi folks. I'm new to this forum, but I'm not new to CSS. I've inherited a little problem that was left behind by my client's original developer. Here is the code the makes up the header on my page:

Code:

<body>
	<div id="issingle">
	<div id="container">
		<div id="sitename">
			<a href="http://www.nectardesign.com"><img src="http://www.nectardesign.com/blog/wp-content/themes/default/nectar-product-development.gif" border="0" alt="Nectar Product Development"/></a>
		</div>
	<div id="mainmenu">
		<ul>
			<!--<li class=""><a href="http://www.nectardesign.com/blog">Home</a></li>-->

			<li class="page_item"><a href="http://www.nectardesign.com/about/">about</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/service/">service</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/category/all-products">portfolio</a></li>
			<li class="page_item current_page_item"><a href="http://www.nectardesign.com/blog/">blog</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/blog/category/news/">news</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/career/">career</a></li>

			<li class="page_item no_bar"><a href="http://www.nectardesign.com/contact/">contact</a></li>
		</ul>
	</div>

And here is the css pertaining to that code:
Code:

body {
	background:#fff;
	color:#303030;
	font: normal 12px /*Verdana,Tahoma,*/Arial, sans-serif;
	margin:0 auto;
	padding:0;
	text-align:center;
	width:850px;
}
#container {
	position: relative;
	background:url('http://www.nectardesign.com/images/headerbg.jpg') top center repeat-x;
	color:#303030;
	border:1px solid #C8C8C8;
	margin:10px;
/*	padding:10px;*/
	text-align:left;
	height:598px;

}
html>body #container {height: 1%; min-height: 598px;}
#mainmenu {
	position: absolute;
	right: 10px;
	top: 27px;
	margin-right: 5px;
}

#mainmenu li.page_item {
	float:left;
/*	height:35px;*/
	list-style:none;
	margin:0;
	padding:0;
}

#mainmenu a {
	border-right:1px solid #b0b0b0;
	color:#808080;
	display:block;
	margin: 0;
	padding: 1px 8px;
	text-transform:lowercase;
}

Basically, this page's header looks correct in Firefox and Safari, but terrible in IE 5.x (Mac). Not only do the horizontal links (About, Service, Portfolio...) not show up correctly--they're actually on the left sidebar--but the repeating image doesn't repeat like it should. It doesn't even show up at all.

Since I'm new, please don't hesitate to let me know if I'm forgetting to include any other important info.

Thank you!!
J

Hi All - I've edited the post to try and define my problem a little better. I've also updated the code so it validates.

I'm trying to convert a horrendous table layout into CSS.

What I need to have is the logo on the left, and the text on the right. The text needs to move with the browser resize - but it needs to stop moving when it gets to be 425px from the left margin. Currently, it keeps moving with the browser but it doesn't stop at the 425px mark. It drops to the bottom, and eventually if you make the window REALLY small, it drops below the logo.

I'm sure that I have just got the code all wrong. I guess what I need to know is how do I put a fixed element next to a fluid element and eliminate the drop from happening. What am I missing.

This is my current code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Argh</title>
	
<style type="text/css">	
	body {margin: 0px; padding: 0; background-color:#ffffff;}		
	#header {height: 80px; width: 100%; background-image: url(icon_bg_grad.gif); background-repeat: no-repeat; background-attachment:fixed;}
	#nav {clear: both; height: 25px; background-image: url(icon_grad2.gif); background-repeat: repeat-x; }		
</style>
	
</head>

<body>

<div id="header">
	<div style="width: 425px; float: left;">
		<img src="logo.jpg" width="220" height="66" alt="logo">	
	</div>
	<div style="float: right;">
		<p>This is annoying</p>	
	</div>
</div>
<div id="nav">
</div>

</body>
</html>

I bought a php template to put my father website together with. I had worked with html and asp and had thrown together sites quickly in the past, so I didnt think much of it... But php turns out to be a whole new animal I guess, or maybe im missing something simply in the css.

I have spent the last 4 hours looking online and asking friends, and I am no closer. I see plenty of forums with footer issues here, but none have given me any clues.

Here is the site(im new, i cant post URLs): http://aeroprepare.com

You will note that the bottom of the page has a large gray gap, between the footer content and the copywrite area. I simply want to remove this gap, shorten it, so the footer fits closer to the bottom of the page, like the copywrite section does. Sounds simple, but its driving me NUTS.

here is my CSS:
Code:

/*** CSS Resets ***/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 14px;
	font-family: inherit;
	vertical-align: baseline;
}ul {list-style: none;}table {	border-collapse: separate;	border-spacing: 0;} caption, th, td {text-align: left; font-weight: normal;}blockquote:before, blockquote:after,q:before, q:after {content: "";} blockquote, q {quotes: "" "";}

/*** Start Site CSS ***********************************************************/
html, body {height: 100%;}
body {
    font-family: Arial, Helvetica, Verdana, Times New Roman, sans-serif;
    font-size:12px;
    background-color:#fff;
}

#hm_background, #background { 
    min-height: 100%;
    height: auto !important;
    height: 100%; 
    margin-bottom:-340px;    
}

#hm_background {
    background-repeat:repeat-x;
    background-position:top;  
}

#background {
    background-repeat:repeat-x;
    background-position:top;
}

.clear {
    clear:both;
}

.clear-border {
    margin:15px 0 15px 0;
    clear:both;
    border:1px solid #dbdbdb;
}

#wrapper {
    margin:0 auto;
    width:960px;
}

#logo {
    float:left;
    margin:27px 0 0 0;
    width:284px;
    height:67px;
}

#logo_home {
    float:left;
    margin:32px 0 0 45px;
    width:212px;
    height:52px;
}

/*** navigation ***************************************************************/
#nav_wrap {
    position:relative;
    margin:25px 0 0 460px;
    padding:12px 0 0 15px;
    background-repeat:no-repeat;
    width:464px;
    height:52px;
    z-index:99;
}

#nav {
    list-style-type:none;
    margin:0;
    padding:0;
}

#nav li {
    float:left;
    margin:0;
    padding:0;
}

#nav li a {
    position: relative; 
    float: left;
    margin: 0 11px 0 0;
    padding: 0 17px 0 0;
    height: 37px;
    text-decoration: none;
    color: #fff;
    font-size:12px;  
	z-index: 2;
}

#nav li a span {
    display: block;
    line-height: 21px;
    padding: 3px 0 5px 20px;
    color: #fff;
}

#nav_hover {
	position: absolute;
    float: left;
    margin: 0 11px 0 0;
    padding: 0 17px 0 0;
    height: 28px;
	z-index: 1;
}

#nav_hover span {
    display: block;
    padding: 3px 0 5px 20px;
    line-height: 21px;
    height: 28px;
	z-index: 1;
}

/*** Dropdown ***/
#nav ul {
    position:absolute;
    display:none;
    padding:0 0 12px 0;
    width:142px;
    top:48px;
    list-style-type:none;
    z-index:99;
}

#nav li ul li {
	margin:0;
	padding:0;
}

#nav li ul a, #nav li ul a:visited {
    float:left;
    padding:4px 0 0 12px;
    width:130px;
    height:20px;
    font-weight:normal;
}

#nav ul ul{
	top:auto;
}	

#nav li ul ul {
    left:142px;
    margin:0;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
}


/*** footer *******************************************************************/
#footer_wrap, .push {
    height: 360px;
    clear: both;
}

#footer_wrap {
    background-color:#e5e5e5; /*e5e5e5*/
    border-top:1px solid #B3BCBF;
}

#footer {
    margin:0 auto;
    padding:12px 0 0 40px;
    width:920px;
}

#footer a {
    text-decoration:none;
}

.foot_clm_block {
    float:left;
    margin:25px 15px 15px 0;
    width:165px;
}

.foot_clm_heading {
    margin:0 0 5px 0;
    font-size:14px;
    text-transform:uppercase;
    color:#fff;
}

.foot_clm_block ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

.foot_clm_block ul li {
    color:#7F7F7F;
}

.foot_clm_block ul li a {
    display:block;
    padding:5px 0 0 5px;
    height:20px;
    color:#fff;   
    border-bottom:1px solid #CDCDCF;
    font-size:12px;
}

.foot_clm_block ul li a:hover {
    color:#4E4E4E;
}

#search_form_footer {
    margin:5px 0 10px 1px;
    height:24px;
    border:1px solid #fff;
    background-color:#fff;
}

#search_footer {
    float:left;
    padding:3px;
    width:120px;
    border:none;
}

#social_icons {
    margin:5px 0 0 6px;
}

#social_icons a {
    margin:0 4px 0 0;
}

#copyright_wrap {
    border-top:1px solid #f1f1f1;
    height:40px;
}

#copyright_txt {
    margin:0 auto;
    margin-top:10px;
    width:880px;
    color:#fff;
    font-size:11px;
}

#copyright_txt a {
    color:#fff;
    font-size:11px;
}

/*** home page ****************************************************************/
#hm_header {
    height:139px;
    background-repeat:no-repeat;
    background-position:top center;
    padding-top: 1px;
    padding-bottom: 1px;
}

#slider {
    margin:0 0 0 23px;
    padding:10px 0 0 33px;
    background-repeat:no-repeat;
    width:881px;
    height:298px;
}

#slider_imgs img {
    display:none;
}

#news {
    margin:15px 0 10px 25px;
    background-image:url(../images/news_back.jpg);
    background-repeat:no-repeat;
    width:911px;
    height:65px;  
    overflow:auto; /* fixes margin collapsing */
}

#news_icon {
    float:left;
    margin:17px 0 0 17px;
    background-image:url(../images/airplaneminilogo.png);
    background-repeat:no-repeat;
    width:55px;
    height:41px;     
}

#news_text {
	margin:20px 0 0 15px;
	float:left;
	font-size:20px;
	text-align:left;
	width:800px;
}

#news_text ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

#news_text a {
    text-decoration:none;
}

#three_columns {
    margin:0 0 0 25px;
    background-image:url(../images/3column_back.jpg);
    background-repeat:no-repeat;
    width:910px;
}

.three_clm_block {
    float:left;
    margin:25px 0 45px 0;
    padding:0 25px;
    width:250px;
    height:200px;
    background-image:url(../images/3column_border.jpg);
    background-repeat:no-repeat;
    background-position:top left;
}

.three_clm_circle {
    float:left;
    padding:6px 0 0 0;
    width:32px;
    height:26px;
    background-repeat:no-repeat;
    background-position:top left;
    color:#fff;
    text-align:center;
    font-size:16px;
    font-weight:bold;
}

.three_clm_title a {
    float:left;
    padding:5px 0 0 8px;
    font-size:20px;
    text-decoration:none;
}

.three_clm_text {
    padding-top:7px;
    clear:both;
    line-height:19px;
}

/*** portfolio ****************************************************************/
#port_title h1 {
    margin:15px 0;
    font-size:34px;
    font-weight:normal;
}

#port_wrap {
    padding:32px 0 0 0;    
}

.port_block {
    float:left;
    margin:0 22px 22px 0;
    padding:7px;
    background-color:#d6d9da;
    border:1px solid #a7a9a9;
    width:426px;
    height:346px;
}

.port_img {
    position: relative;
    border:1px solid #fff;
    background-color:#fff;
    width:425px;
    height:324px;
}

.port_txt {
    position: absolute;
    top: 110px;
    left: 0;
    padding:2px 0 0 10px;
    width:240px;
    height:18px;
    background-color:#fff;
}

.port_mag_img {
    position: absolute;
    top: 10px;
    left: 81px;
}

.port_txt a {
    font-weight:bold;
    text-decoration:none;
}

.port_img img {
    border:none;
}

/*** blog / static page *******************************************************/
#header {
    height:139px;
    background-repeat:no-repeat;
    background-position:top center;
    padding-top: 1px;
    padding-bottom: 1px;
}

#breadcrumb {
    padding:15px 0 0 0;
    height:25px;
    color:#fff;
    font-weight:bold;
}

#breadcrumb a {
    color:#fff;
    font-weight:bold;
    text-decoration:none;
}

/*** sidebar ***/
#sidebar {
    float:left;
    margin:25px 0 0 0;
    width:220px;
}

.sidebar_block {
    margin:0 0 35px 0;
}

.sidebar_heading {
    font-size:18px;
    border-bottom:5px solid #d6d9da;
    color:#23353e;
}

#sidebar ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

#sidebar ul li a {
    display:block;
    padding:4px 0 0 30px;
    height:21px;
    border-bottom:1px solid #d6d9da;
    text-decoration:none;
    color:#B3BCBF;
    background-image:url(../images/bullet_arrow.jpg);
    background-repeat:no-repeat;
}

#sidebar ul li ul li a {
    padding:4px 0 0 54px;
    background-image:url(../images/bullet_arrow_sub.jpg);
    background-repeat:no-repeat;
}

#sidebar a:hover {
    color:#959D9F;
}

#search_form {
    margin:5px 0 0 1px;
    width:216px;
    height:24px;
    border:1px solid #d6d9da;
    background-color:#fff;
}

#search {
    float:left;
    padding:3px;
    width:180px;
    border:none;
}

.search_btn {
    float:right;
    margin:1px 0 0 0;
    background-image:url(../images/search_icon.jpg);
    background-repeat:no-repeat;    
    background-position:center;
    border:none;
    background-color:transparent;
    cursor:pointer;
    width:25px;
    height:22px;
}

/*** content ***/
#content {
    float:left;
    margin:25px 0 0 55px;
    width:645px;
}

#contentblog {
    float:left;
    margin:25px 0 0 55px;
    width:100%;
}

#content_full {
    float:left;
    margin:25px 0 0 0;
}

.post_block {
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
    border-bottom:1px solid #d6d9da;    
}

#page_block {
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;  
}

#page_title h1 {
    margin:0 0 5px 0;
    padding:0;   
    font-size:34px;
    font-weight:normal; 
    
}

#content h1 a {
    font-size:34px;
    font-weight:normal;
}

.post_meta {
    height:20px;
    font-weight:bold;
    color:#929393;
}

.post_meta a {
    text-decoration:none;
    font-weight:bold;
    color:#929393;
}

.post_img {
    padding:7px 0;
    margin:10px 0;
    border-top:1px solid #d6d9da;   
    border-bottom:1px solid #d6d9da;
}

.post_txt {
    line-height:20px;
    color:#23353e;
}

.post_txt img {
    padding:3px;
    border:1px solid #b3b3b3;
}

.onethird {
    padding: 0 0 0 15px;
    float:left;
    width:30%;
}

.onehalf {
    padding: 0 0 0 15px;
    float:left;
    width:47%;
}

.twothirds {
    padding: 0 0 0 15px;
    float:left;
    width:64%;
}

.post_readmore {
    margin:5px 0 0 0;
}

.post_readmore a {
    text-decoration:none;
    font-weight:bold;
    color:#23353e;
}

#pagination {
    margin:15px 0;
    height:32px;
}

#pagination ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

#pagination ul li { float:left;}

#pagination ul li a {
    float:left;
    margin:0 5px 0 0;
    padding:8px 0;
    width:31px;
    height:23px;
    color:#fff;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    background-image:url(../images/pagination.jpg);
    background-repeat:no-repeat;
}

#pagination ul li a.active, #pagination ul li a:hover {
    background-image:url(../images/pagination_active.jpg);
    background-repeat:no-repeat;    
}

/*** comments *****************************************************************/
#comments {
    margin:0 0 40px 0;
}

.comm_block {
    padding:25px 0 25px 0;
    border-bottom:1px solid #e7e7e7;
}

.comm_avatar {
    float:left;
    padding:3px;
    width:50px;
    height:50px;
    background-color:#fff;
    border:1px solid #e7e7e7;
}

.comm_meta {
    float:left;
    margin: 0 0 0 20px;
    width:550px;
}

.comm_author {
    font-size:16px;
}

.comm_text {    
    float:left;
    margin: 0 0 0 20px;
    width:564px;
    line-height:18px;
}

.comm_even {
    background-color:#fff;
}

#comm_form {
    margin:20px 0;
}

/*** contact ******************************************************************/
#contact_txt {}

#google_map {
    margin:5px 0;
    border:1px solid #b3b3b3;
}

#contact_form {
    margin:20px 0;
}

.err {
    color:#BF2323;
}

/*** forms ********************************************************************/
.form_tb {
    padding:3px;
    width:400px;
    height:18px;
    border:1px solid #b3b3b3;    
    color:#254A59;
}

.form_ta {
    padding:3px;
    width:639px;
    height:150px;
    border:1px solid #b3b3b3;
    font-family:Arial, Helvetica, Verdana, sans-serif;
    font-size:12px;
    color:#254A59;
}    

.form_btn {
    padding:5px 7px;
    font-family:Arial, Helvetica, Verdana, sans-serif;
    font-size:12px;
    color:#fff;
    border:none;
    background-color:#fff;
    cursor:pointer;
    background-repeat:no-repeat;
    width:114px;
    height:33px;    
}

/*** global *******************************************************************/
ul {
    padding:0 0 0 30px;
    list-style-type:square;
}

ol {
    padding:0 0 0 30px; 
}

a {
    color:#03181F;
}

p {
    margin:0 0 10px 0;
}

h1 {
    margin:0 0 15px 0;
    font-size:34px;
    font-weight:normal; 
}

h1 a {
    text-decoration:none;
}

h2 {
    margin:0 0 7px 0;   
    font-size:24px;
    font-weight:normal; 
}

h3 {
    margin:0 0 5px 0;  
    font-size:18px;  
    font-weight:normal; 
}

h4 {
    margin:0 0 5px 0; 
    font-size:16px;   
    font-weight:bold; 
}

h5 {
    margin:0 0 3px 0;  
    font-size:14px;  
    font-weight:bold; 
}

blockquote {
    margin:20px 0 20px 30px;
    padding:0 10px;
    border-left:5px solid #dbdbdb;
}

strong {
    font-weight:bold;
}

.hidden {
    display:none;
}

.noborder {
    border:none;
}

.noimage {
    background-image:none;
}

.aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
}

.alignright {
    float: right;
}

view page source to see the home page. I dont have the footer in an incorrect div (that i can see)

Please can someone far smarter than me see whats going on here. I have taken the footer apart, edited the style sheet a 100 different gut-shot ways, tried to recreate the page, ripped apart the wrapper and other sections...

If I touch the height on the footer push, the whole footer moves to the center of the page... If I try to move around it, I get dead space between the end of the text and the beginning of the footer....

PLEASE someone show me what im missing, ive lost hair over this, and my laptop is about to find out if its impact resistant.