[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Top header in css html

Posted on 2009-12-28
8
Medium Priority
?
231 Views
Last Modified: 2012-05-08
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

0
Comment
Question by:Gregg Battaglia
  • 6
  • 2
8 Comments
 

Author Comment

by:Gregg Battaglia
ID: 26130241
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
 

Author Comment

by:Gregg Battaglia
ID: 26130339
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
 
LVL 61

Expert Comment

by:HainKurt
ID: 26130367
which link are you talking about? give me an example...
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:Gregg Battaglia
ID: 26130383
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
 

Author Comment

by:Gregg Battaglia
ID: 26130430
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
 
LVL 61

Expert Comment

by:HainKurt
ID: 26130494
where is this link that you mention? I dont see any "sales" under "classified"!
0
 

Author Comment

by:Gregg Battaglia
ID: 26132638
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
 

Accepted Solution

by:
Gregg Battaglia earned 0 total points
ID: 26135330
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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question