Top header in css html

I am having a problem with a header that I include on my web ste. the site is www.HavenZone.com ... I was using tables to do this but I thought it might be better to use CSS to put the header file in the right format...

There are four DIV tags... The first one is the logo, the second is a small image, the third is a large image meant to span the rest of the browser and the fourth is an ad over the third div...

When I view the site in IE8 in compatibility mode it works fine but when it is not in comatibility mode the third DIV header is missing...

This is what I have in the CSS File:

      /* header */
#div-header1 {
      float:left;
      top:0px;
      left:0px;
      width:200px;
      height:160px;
}

#div-header2 {
      float:left;
      top:0px;
      left:200px;
      width:93px;
      height:160px;
}

#div-header3 {
      float:left;
      top:0px;
      left:293px;
      height:160px;
}

      /* Banner Ad */
#div-banner {
      position:absolute;
      top:50px;
      left:481px;
      width:468px;
      height:60px;
}

And the HTML of the header is attached as a snippet.. It would be great if someone could point out what I am doing wrong here. As I said the div-header1, div-header2 and div-banner work in both modes but the problem is with div-header3 how can I put that image there without using a table so it would be in an absolute place at the top with div-banner going in front of it. Thank again for any help.

<div id="div-header1" class="div-header1"><a href="/index.php"><img src="/images/HavenZone_White_200x160.jpg" width="200" height="160" border="0" /></a></div>
<div id="div-header2" class="div-header2"><a href="/index.php"><img src="/images/header2.gif" width="93" height="160" border="0" /></a></div>
<div id="div-header3" class="div-header3"><table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="100%" height="160" background="/images/top-park.gif" >&nbsp;</td>
  </tr>
</table>
</div>
<div id="div-banner" class="div-banner">
<!-- START 468x60 AdPeeps.com Code -->
<script type="text/javascript" src="http://www.havenzone.com/adpeeps/adpeeps.php?bfunction=showad&amp;uid=100000&amp;bmode=off&amp;gpos=center&amp;bzone=banners&amp;bsize=468x60&amp;btype=3&amp;bpos=default&amp;ver=2.0&amp;btotal=1&amp;btarget=_blank&amp;bborder=0">
</script>
<noscript>
<a href="http://www.havenzone.com/adpeeps/adpeeps.php?bfunction=clickad&amp;uid=100000&amp;bmode=off&amp;bzone=banners&amp;bsize=468x60&amp;btype=1&amp;bpos=default&amp;ver=2.0" target="_blank">
<img src="http://www.havenzone.com/adpeeps/adpeeps.php?bfunction=showad&amp;uid=100000&amp;bmode=off&amp;bzone=banners&amp;bsize=468x60&amp;btype=1&amp;bpos=default&amp;ver=2.0" width="468" height="60" alt="Click Here!" title="Click Here!" border="0" /></a>
</noscript>
<!-- END AdPeeps.com Code --></div>

Open in new window

Gregg BattagliaAsked:
Who is Participating?
 
Gregg BattagliaConnect With a Mentor Author Commented:
I found the problem... There is a java script on the site (adpeeps) that has a feild "tcolor" and it is getting the FFFFFF from there. This started when I upgraded to the latest version. I sent an email to the company that made the program to see what is going on. It is not a problem with my CSS file... it is their problem. Hopefuly they will fix it soon...
0
 
Gregg BattagliaAuthor Commented:
Ok, so I think I answered my own question by adding the body tag to the CSS file with as this:

body
{
background-image:url('/images/top-park.gif');
background-position:293px 0px;
background-repeat:no-repeat;
}

This seems to be working across the board... the only problem I am having now with the CSS is I noticed that when you go to the forum or the classifieds in the site and hover over a link it turns white. I can't for the life of me find where this is coming from. How can I view all of the CSS files for this? I attached the main CSS file...
@charset "utf-8";
/* CSS Document */

	/* Banner Ad */
#div-banner {
	position:absolute;
	top:50px;
	left:481px;
	width:468px;
	height:60px;
}

	/* header */
#div-header1 {
	float:left;
	top:0px;
	left:0px;
	width:200px;
	height:160px;
}

#div-header2 {
	float:left;
	top:0px;
	left:200px;
	width:93px;
	height:160px;
}

body
{
background-image:url('/images/top-park.gif');
background-position:293px 0px;
background-repeat:no-repeat;
} 

	/* General Links */
a:link {color: #003399;text-decoration: none;}
a:visited {text-decoration: none;color: #003399;}
a:hover {text-decoration: none;color: #FF0033;}
a:active {text-decoration: none;color: #003399;}

	/* Yellow at the bottom of the page */
.Yellow-Links {color: #FFFF00; font-size: 10px; font-family: "Times New Roman", Times, serif;}	 
.Yellow-Links a:link {color: #FFFF00;text-decoration: none;}
.Yellow-Links a:visited {text-decoration: none;color: #FFFF00;}
.Yellow-Links a:hover {text-decoration: none;color: #FFCC00;}
.Yellow-Links a:active {text-decoration: none;color: #66FFFF;}

	/* White links at the bottom of the page */
.bottom-links {color: #0099FF; font-size: 10px; font-family: "Times New Roman", Times, serif;}
.bottom-links a:link {text-decoration: none;color: #0099FF;}
.bottom-links a:visited {text-decoration: none;color: #0099FF;}
.bottom-links a:hover {text-decoration: none;color: #0099FF;}
.bottom-links a:active {text-decoration: none;color: #0099FF;}

	/* White text bluebackground */
.White-Text {color: #FFFFFF; font-size: 12px; font-family: "Times New Roman", Times, serif;}
.White-Text a:link {text-decoration: none;color: #FFFFFF;}
.White-Text a:visited {text-decoration: none;color: #FFFFFF;}
.White-Text a:hover {text-decoration: none;color: #CCCCCC;}
.White-Text a:active {text-decoration: none;color: #FFFFFF;}

	/* Gray text headers */
.Gray-Text {color: #999999; font-size: 10px; font-family:"Times New Roman", Times, serif;}
.Gray-Text a:link {text-decoration: none;color: #009999;}
.Gray-Text a:visited {text-decoration: none;color: #009999;}
.Gray-Text a:hover {text-decoration: none;color: #FF0033;}
.Gray-Text a:active {text-decoration: none;color: #009999;}

	/* Page Content */
.Content-Text {color: #000000; font-size: 12px; font-family: "Times New Roman", Times, serif;}
.Content-Text a:link {text-decoration: none;color: #009999;}
.Content-Text a:visited {text-decoration: none;color: #009999;}
.Content-Text a:hover {text-decoration: none;color: #FF0033;}
.Content-Text a:active {text-decoration: none;color: #009999;}

	/* Category Listing */
.Category-Text {color: #000000; font-size: 12px; font-family:Arial, Helvetica, sans-serif}
.Category-Text a:link {text-decoration: none;color: #003399;}
.Category-Text a:visited {text-decoration: none;color: #003399;}
.Category-Text a:hover {text-decoration: none;color: #FF0033;}
.Category-Text a:active {text-decoration: none;color: #003399;}

	/* Forum on Main Page */
.Forum-Text {color: #000000; font-size: 10px; font-family:Verdana, Arial, Helvetica, sans-serif}
.Forum-Text a:link {text-decoration: none;color: #003399;}
.Forum-Text a:visited {text-decoration: none;color: #003399;}
.Forum-Text a:hover {text-decoration: none;color: #FF0033;}
.Forum-Text a:active {text-decoration: none;color: #003399;}

	/* Category Leter */
.Category-Leter {color: #000000; font-size: 24px; font-family:Arial, Helvetica, sans-serif;}

	/* Lisitngs Content */
.Listings-Text {color: #000000; font-size: 12px; font-family:Arial, Helvetica, sans-serif}
.Listings-Text a:link {text-decoration: none;color: #0066CC;}
.Listings-Text a:visited {text-decoration: none;color: #0066CC;}
.Listings-Text a:hover {text-decoration: none;color: #FF0033;}
.Listings-Text a:active {text-decoration: none;color: #0066CC;}

	/* Whats New & News Content */
.WhatsNew-Date {color: #990000; font-size: 14px; font-weight:bold; font-family:Arial, Helvetica, sans-serif}
.WhatsNew-Title {color: #000099; font-size: 14px; font-weight:bold; font-family:Arial, Helvetica, sans-serif}
.WhatsNew-Details {color: #000000; font-size: 10px; font-family:Arial, Helvetica, sans-serif}
.WhatsNew-Details a:link {text-decoration: none;color: #003399;}
.WhatsNew-Details a:visited {text-decoration: none;color: #003399;}
.WhatsNew-Details a:hover {text-decoration: none;color: #FF0033;}
.WhatsNew-Details a:active {text-decoration: none;color: #003399;}
.News-Date {color: #990000; font-size: 12px; font-weight:bold; font-family:Arial, Helvetica, sans-serif}
.News-Title {color: #000099; font-size: 12px; font-weight:bold; font-family:Arial, Helvetica, sans-serif}
.News-Org {color: #999999; font-size: 10px; font-family:Arial, Helvetica, sans-serif}

	/* Main Menu Format */
ul.vbULnlvas {
  position: absolute;
  visibility: hidden;
}
.vbULnlvas {
  position: absolute;
  visibility: hidden;
  display: block;
  overflow: auto;
  font-size: 1px;
  padding: 2px;
  margin: 0px;
  border: 1px solid #16445A;
  background-color: #CDE7F3;
}
.vbULnlvas table {
  border-collapse: separate;
  border-spacing: 0px;
}
.vbULnlvas tr {
  font-size: 1px;
  cursor: pointer;
  background-color: #CDE7F3;  
}
.vbULnlvas tr.over {
  background-color: #4FA9D5;
}
.vbULnlvas td {
  border: 1px solid #CDE7F3;
  padding: 2px;
  text-align: left;
}
.vbULnlvas tr.over td {
  border-color: #1B536D;
}
.vbULnlvas td a {
  font-family: Tahoma;
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  color: #000000;
  text-decoration: none;
}
.vbULnlvas tr.over a {
  font-family: Tahoma;
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  color: #000000;
  text-decoration: none;
}
.vbULnlvas tr.popup {
  background-color: #4FA9D5;
}
.vbULnlvas tr.popup td {
  border-color: #1B536D;
}
.vbULnlvas tr.popup a {
  font-family: Tahoma;
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  color: #000000;
  text-decoration: none;
}

Open in new window

0
 
Gregg BattagliaAuthor Commented:
The visited links and hovered links turn white. I went over the CSS files and I cant find this any where... so where ever there is an <a> with no id or class this happens... any ideas?
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
HainKurtSr. System AnalystCommented:
which link are you talking about? give me an example...
0
 
Gregg BattagliaAuthor Commented:
when you go to www.havenzone.com/classifieds/index.php  ... you will notice that allof the category links turn white when you hover over them.. they use a simple <a href> with no id or class... this should not be happening. I also noticed that the main menu goes up to the top in firefox...
0
 
Gregg BattagliaAuthor Commented:
fixed the menu issue so now its only the links... an example of a link would be on the classifieds page:

<a href="-1/posts/10_Local_Specials/23_Sales/">Sales</a>

and when you move the mouse over Sales it tuns white and also when it is a visitd link it turns white... I don't know why this is happening... in the CSS file it is listed as:

        /* General Links */
a:link {color: #003399;text-decoration: none;}
a:visited {text-decoration: none;color: #003399;}
a:hover {text-decoration: none;color: #FF0033;}
a:active {text-decoration: none;color: #003399;}

Why would it turn white?
0
 
HainKurtSr. System AnalystCommented:
where is this link that you mention? I dont see any "sales" under "classified"!
0
 
Gregg BattagliaAuthor Commented:
It is the first link under the local specials category. But any of those links all do the same thing. It is white when you hover or have visited that page
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.