CSS Forum

**Kaiman** · 01:04 AM

Hi everyone,

I have a CSS problem that is driving me nuts! I just created this great looking menu using CSS and background images and inserted into the code under the header in the website. All looks good but unfortunately it covers up the table below it which contains a javascript date script and the website address. It seems to work fine in IE 6 and Opera 8 but Netscape 7 and Firefox 1.6 don't display the date and website address divs/table below the menu. I have made sure the path the javascript is correct and it is, but this doesn't seem to be the problem since the two divs below the menu just seem to dissapear all together.

Any ideas why this is happening? Your help would be greatly appreciated. I have posted the code below.

Thanks,

Kaiman

--------------
CSS code
--------------

Code:

#masthead{
	background-image:url(../graphics/backgroundtop2.gif);
	background-repeat:repeat-x;
	padding: 10px 0px 0px 0px;
	border-top: 5px solid #333366;
	border-bottom: 1px solid #81898E;
	width: 100%;
}

#nav {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-top: 1px solid #000000;
	border-bottom: 2px solid #330000;
	background-color: #990000; 
	background-image:url(../graphics/red_navigation_background1.gif);
	background-repeat: repeat-x;
	background-position: top left;
}

#nav li {
	float: left;
	margin: 0;
	padding: 0 1px 0 0;
	list-style: none;
	background-image:url(../graphics/red_navigation_list_background1.gif);
	background-repeat: no-repeat; 
	background-position: top right;
}

#nav a {
	float: left;
	padding: 7px 13px;
	text-decoration: none;
	color: #FFFFFF;
}

#nav a:hover, #nav a.active {
	color: #FFFFFF;
	background-color: #990000;
	background-image:url(../graphics/red_navigation_hover_background1.gif);
	background-repeat: repeat-x;
	background-position: bottom left;
}

#nav a.active {
	font-weight: bold;
	background-color: #990000;
	background-image:url(../graphics/red_navigation_hover_background1.gif);
	background-repeat: repeat-x;
	background-position: bottom left;
}

li#home-tab a {
	margin-left: 10px;
	background-image:url(../graphics/red_navigation_list_background1.gif);
	background-repeat: no-repeat;
	background-position: top left;
}


#titlenav{
padding: 1px 0px 1px 11px;
color: #81898E;
}

div.title
	{
	width: 780px;
	color: #999999;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 130%;
}

----------------
HTML Code
----------------

Code:

div id="masthead"> 
<img src="graphics/pansophicsbanner23.gif" alt="Pansophics Sales Management Seminars" width="800" height="75" title="Pansophics Sales Management Seminars"/>
<!-- end banner logo -->
<!-- begin navigation -->
<ul id="nav">
	<li id="home-tab"><a href="index.htm" class="active">Home</a></li>
	<li id="about-tab"><a href="about.htm">About</a></li>
	<li id="faq-tab"><a href="faq.htm">Faq</a></li>
	<li id="seminars-tab"><a href="seminars.htm">Seminars</a></li>
	<li id="registration-tab"><a href="registration/schedule.htm">Registration</a></li>
	<li id="contact-tab"><a href="contactus.htm">Contact</a></li>
	<li id="sitemap.htm"><a href="#">Sitemap</a></li>
</ul>
<div class="title">
<div id="titlenav">
<table width="100%"  border="0" cellpadding="0">
 	<tr>
    <td width="50%">www.Pansophics.com</td>
	<td width="50%"><div align="right">
	<script type='text/javascript' src='scripts/date.js'></script>
</div></td>
	</tr>
</table>
</div>
</div>
</div>

**DianeD** · 09-08-2005, 10:43 AM

Hello,
Well, I'm not javascript expert, but I played around with this and I don't believe it's the CSS, I think it's where you put the javascript in the HTML code - I used a date javascript within the html, and it worked fine within the code you provided. What I found was that I put the

<script language="JavaScript"> into the <head> section (altho I had all the javascript here and not in a .js file,

and in the body was the:

<script language="JavaScript">
document.write(doClock("W0",",%20","M0","%20","D0" ,",%20","Y0"));
</script>

Where it actually placed the date within your html document. Since you have the source file for the javascript code being called from html - wouldn't you still have to do a "document.write..." within the html page?

If I'm wrong, I'd certainly like to know the answer to this, too.

Just my 2 cents, but I may be wrong,
DianeD

**Kaiman** · 12:13 PM

DianeD,

Thanks for your reply. I don't believe the problem is in the javascript though but rather in the CSS. I typically will call scripts like this externally and there is no need for the document.write function to get them to work. Browsers will usually treat it as a link and reference the script. I will play around with calling the script a couple of different ways and see if I can find anything. Like I said though, it was working fine in Firefox/Netscape until I created the new menu. I think the problem lies in the fact that the menu/navigation may be covering the divs below it, but am not sure why?? If anyone else can give me any clues, or point out something that I missed it would be greatly appreciated.

Thanks,

Kaiman

Website Design and Hosting - Glenwood Springs, CO

**Kaiman** · 09-09-2005, 02:56 PM

Anybody else have any ideas on this problem?

Thanks,

Kaiman

**metho** · 09-10-2005, 11:38 PM

#titlenav{
padding: 1px 0px 1px 11px;
color: #81898E;
clear: both;
}

**Kaiman** · 09-13-2005, 01:20 PM

metho,

Good call on that one! The clear:both worked perfectly. I should have seen something that obvious from the beginning, instead of wasting my time thinking it was the javascript. Its the little things though, the little things...

.

Thanks much for your help,

Kaiman