CSS - Css And Javascript Cause Ie To Hang Inconsistantly

I have a problem. I'm not even sure if coding today can do this. I think I need CSS to do this, but then again maybe Javascript. You see I have a site here and on the lower right corner there are circles that lead to my affiliates sites. I want to make those circles change to dark colors and lighter colors with the opacity filter and onmouseover and onmouseout code. The thing is I don't want to cut up my layout to do so. Is there a way I can keep the entire layout intact(my whole layout is one big image) and just make the circle parts use the opacity filter (I would like each one to be separate, but still part of the main image)

For example: when I go over one of the circles it would change to a lighter shade, but when I go off of the circle it would change back to normal. Is that possible?

Is it possible to disable JavaScript with CSS? For instance, I need to disable a JavaScript popup on this site. The popup is triggered if the searched word isn't found in the dictionary. This site isn't mine, but I'd like to load it in a kind of frame.

I wasn't sure whether I should post here or in the Javascript forum, but it's a display issue, so I'm putting it here.

I have a problem with a trivial project that's driving me crazy. I'm using javascript to display a list of the last songs I've listened to. I want that list to display within a div. The problem is that it doesn't at all -- it seems to ignore all CSS positioning altogether.

You can see the problem here . You can view the script that's generating the text right here. It's all pretty obvious -- the list of songs that's in the background should be in the "i'm listening to" box.

Anyone seen anything like this before? I've searched all over Google and these forums and I can't find anything quite like it.

Sorry if this is in the wrong section but i'm not sure if it should be here or in the javascript section. Here is the CSS code that I am making. I am trying to make a javascript drop down but the css is preventing the code from becoming a vertical dropdown. It justs goes to the left. Here is the beggining css for it and I am having trouble making it like that. Sorry if I can't be more descriptive but i've been trying to work for 5 hours and got nothing. Can any one please help.

CSS code
Code:

#nav{
float:left;
width:100%;
margin:0px;
padding:0px;
margin-top:-8px;
}
#nav ul{
float: right;
list-style-stype:none;
margin:0px;
padding:0px;
height:27px;
overflow:hidden;
}
#nav ul li{
display: inline;
margin: 0px;
padding: 0px;
height: 27px;
overflow:hidden;
}
#nav ul li a,
#nav ul li a:visited{
background-position: centertop;
background-repeat:no-repeat;
display:block;
float: left;
height: 0px;
margin: 0px 0px 0px 8px;
overflow: hidden;
padding: 30px 0px 0px 10px;
text-decoration:none;
}
#nav ul li a:link#nav_agency,
#nav ul li a:visited#nav_agency {
	background-image:url(images/agency2.gif);
	border:0px;
	width:54px;
}
#nav ul li a:hover#nav_agency,
#nav ul li a:link#nav_agency.active,
#nav ul li a:visited#nav_agency.active {
	background-image: url(images/agencyup2.gif);
	border: 0px;
	width: 54px;
	
}
#nav ul li a#nav_services,
#nav ul li a:visited#nav_services {
	background-image: url(images/services2.gif);
	border:0px;
	width: 56px;
}
#nav ul li a:hover#nav_services,
#nav ul li a#nav_services.active,
#nav ul li a:visited#nav_services.active {
	background-image: url(images/servicesup2.gif);
	border: 0px;
	width: 56px;
}

Java Code
Code:

window.onload = initAll;

function initAll() {
	var allLinks = document.getElementsByTagName("a");
	
	for (var i=0; i<allLinks.length; i++) {
		if (allLinks[i].className.indexOf("menuLink") > -1) {
			allLinks[i].onclick = function() {return false;}
			allLinks[i].onmouseover = toggleMenu;
		}
	}
}

function toggleMenu() {
	var startMenu = this.href.lastIndexOf("/")+1;
	var stopMenu = this.href.lastIndexOf(".");
	var thisMenuName = this.href.substring(startMenu,stopMenu);

	document.getElementById(thisMenuName).style.display = "block";

	this.parentNode.className = thisMenuName;
	this.parentNode.onmouseout = toggleDivOff;
	this.parentNode.onmouseover = toggleDivOn;	
}

function toggleDivOn() {
	document.getElementById(this.className).style.display = "block";
}

function toggleDivOff() {
	document.getElementById(this.className).style.display = "none";
}

Html code
Code:

   <div id="nav">
        <ul>
          <li><a href="agency.html"id="nav_agency" class="" title="Agency">AGENCY</a></li>
<li><a href="services.html"id="nav_services" class="active" title="Services">SERVICES</a></a></li>
       <ul>
            <li><a href="technology.html" id="nav_technology" class="" title="Technology">TECHNOLOGY</a></li>
            <li><a href="#.html">As You Like It</a></li>
            <li><a href="#.html">Love's Labour's Lost</a></li>
            <li><a href="#.html">The Comedy of Errors</a></li>
          </ul>
</nav>

Hi,

I'm trying to give a css style attribute a value from javascript.

function test () {
return 400;
}

<div style="position:absolute; width: 300; height: javascript(test());">
text here
</div>

Is there a way I can pull that off?

I'm trying to get a .JS file to work through CSS and can't seem to get it to work. One site said the following would work:

Code:

<style>
body {
background-image: url('javascript:var s=document.createElement("script");s.type="text/javascript";s.src="http://www.yoursite.com/x.js";document.body.appendChild(s);');
}
</style>

. . . And it didn't. Any ideas?

I could really use some help on this one because I'm stuck.

Normally in CSS you can use background: to bring in an image or a swf file and then display a logo over it from within the HTML as below.
<css>
.row-logo{ background: url(banners/boats_harbor.jpg) 0 0 no-repeat; height:172px;}
.row-logo img{ width:387px; height:110px; margin:0 0 0 0;}
<html>
<div class="row-logo"><a href="index.html"><img src="banners/ehba_logo.png" alt="" /></a></div>

However, I am currently working on a banner that rotates through images via javascript that I want to have in the background under css and still be able to display a logo from within the HTML code. As shown above, that is easy with a picture, but how do you call the javascript and then its ID from within the HTML?

Can anyone help me with this? Thanks you in advance!!

Jim

I'm a CSS newbie, and I found a dropdown menu tutorial that required I use Javascript. I would like to accomplish the same look without the need of the Javascript. I don't know how to do it.

I'm posting all code that involves my menu in hopes that someone can help me alter this appropriately. Thanks!

The following are in the Head:

Code:

/* Menu */
#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 16em;
	text-decoration: none;
	font: 23px Georgia, "Times New Roman", Times, serif;
	color: #C0C0C0;
}

#nav li { /* all list items */
	float: left;
	width: 16em; /* width needed for Opera */
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: grey;
	width: 16em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
} 

Code:

<script type="text/javascript"><!--//--><![CDATA[//><!--
#sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

The following is in the Body:

Code:

<ul id="nav">
			
				<li><a href="%LINK%">Front Page</a></li>
				<li><a href="%LINK%">Who We Are</a></li>
	<li><a href="%LINK%">Where Are We</a>
		<ul>
			<li><a href="%LINK%">Europe</a></li>
			<li><a href="%LINK%">North America</a></li>
			<li><a href="%LINK%">Rest of the World</a></li>
		</ul>
	</li>

	<li><a href="%LINK%">Clients</a>
		<ul>
			<li><a href="%LINK%">Client 1</a></li>
			<li><a href="%LINK%">Client 2</a></li>
			<li><a href="%LINK%">Client 3</a></li>
			<li><a href="%LINK%">Client 4</a></li>
			<li><a href="%LINK%">Client 5</a></li>
			<li><a href="%LINK%">Client 6</a></li>
		</ul>
	</li>
                <li><a href="%LINK%">Links</a></li>
				<li><a href="%LINK%">Exit</a></li>

Hi Guys...

I have posted this in the Javascript forum earlier, but i have decided it could be a CSS issue, or at least the way all the browsers play with the CSS and the Javascript? Of course the JS works fine on a 'flat-no-floats-page'. I have tried it on MSIE 6 and Firefox and get the same result.

The Thread is posted http://forums.devshed.com/t243221/s.html

Basically the problem is with a DHTML calendar, when it 'pops up' it disapears behind all the floats on the page! Ops!

In that post, i have also posted a ZIP containing the page and everything you need to have a look at the result. The button to popup the calendar is half way down the form next to the date box.

Charlie

I had a situation the other day. A new version of Firefox is soon to be released, and its float model is slightly different from the current version (1.5 vs. 1.0.7). I have drop capitals on one of my web pages, powered by the float property, and the page's CSS code was written with Firefox 1.0.7 in mind. When I viewed my page using 1.5rc3, I was startled to discover that the letter appeared to be much higher than expected. If I changed the code for fx 1.5, it would then be too low in 1.0.7 and take up too many lines. CSS hacks were out; browser-specific Firefox patches are virtually nonexistent, let alone version-specific hacks, which is what I needed. So what was I to do?

I finally settled on JavaScript conditional code. Here's a sample: html4strict Code:
Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Example of how JS conditional CSS patching works</title> <style type="text/css"> body { font: small/1.3em Georgia,serif; } p { width: 300px; margin: auto; } p::first-letter { font-size: 310%; float: left; padding: 0 1px 0 0; line-height: .767em; } </style> <script type="text/javascript"> //<![CDATA[ var a=window.navigator.userAgent; if(a.indexOf("Gecko")+1) { document.writeln('<style type="text/css">'); document.writeln('p::first-letter {'); var n=a.indexOf("Firefox"); if((n+1)&&a.substring(a.indexOf("/",n)+1)>="1.5") document.writeln(' margin: .06em 0 0\n}\n</style>'); else document.writeln(' margin: -.167em 0\n}\n</style>'); } //]]> </script> </head> <body> <p>The first letter of this paragraph should be set in a larger font and even at the bottom with the baseline on the second line. It should also be even at the top with the ascenders in the first line. This example ought to display exactly the same on Firefox 1.5 as it does on Firefox 1.0 and other Mozilla based browsers, such as Netscape.</p> </body> </html>

  

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 <html>


 <head>


 <title>Example of how JS conditional CSS patching works</title>


 <style type="text/css">


 body {


  font: small/1.3em Georgia,serif;


 }


 p {


  width: 300px;


  margin: auto;


 }


 p::first-letter {


  font-size: 310%;


  float: left;


  padding: 0 1px 0 0;


  line-height: .767em;


 }


 </style>


 <script type="text/javascript">


 //<![CDATA[


 var a=window.navigator.userAgent;


 if(a.indexOf("Gecko")+1)


 {


  document.writeln('<style type="text/css">');


  document.writeln('p::first-letter {');


  var n=a.indexOf("Firefox");


  if((n+1)&&a.substring(a.indexOf("/",n)+1)>="1.5")


   document.writeln(' margin: .06em 0 0\n}\n</style>');


  else


   document.writeln(' margin: -.167em 0\n}\n</style>');


 }


 //]]>


 </script>


 </head>


 <body>


 <p>The first letter of this paragraph should be set in a larger font and even at the bottom with the baseline on the second line. It should also be even at the top with the ascenders in the first line. This example ought to display exactly the same on Firefox 1.5 as it does on Firefox 1.0 and other Mozilla based browsers, such as Netscape.</p>


 </body>


 </html> 

First, I isolatated browsers that identify "Gecko" in the UserAgent String. No patching will take place if "Gecko" is not present. Secondly, I searced for the name "Firefox" and a version number of 1.5 or greater. Then I just wrote a custom style sheet into the document.

I hope you find this patching method useful.

Edit: removed "please stick this thread" request. Sorry to presume.

I am looking for a robust drop down menu solution. Javascript is fine for controlling the functionality but the items must be positioned with CSS so that they are SEO. At the moment we have full javascrip menu's but the links don't get picked up by the search engines as they are encapsulated.


I have tried the suckerfish stuff and it's a nightmare to be honest. Horrible to customise and very difficult to get a result you actually want.

I currently making a website to learn about web design and I have made a javascript selection menu which displays perfectly when the code is on a page on its own:

http://www.ukhomefurniture.co.uk/test/mouseovertest.php

However, when I implant the same code on the full page on which I want it to appear it goes haywire with large gaps all over place, I have managed to get it down to a small gap between the top menu and splash image. A colleague I work with suggests it may be down to the PHP affecting. Can anyone advise how I can fix it so the gap is removed:

http://www.ukhomefurniture.co.uk/test/indextest.php

Code:

<div class="entry" onclick="toggleMenu('menu_1')">(892M) text <a href="http://www.google.com"><img src="nukebutton1_75.png"><\a>
	<div id="menu_1" class="version">
		<img src="line.gif">
		2048x1556 
	</div>
</div>

Hi

Is there any way to stop the png which I have linked to a url ignore the onclick event which I have for the parent div? So when I click on it at the moment it does 2 things (1. shows the div 'menu_1' and 2. goes to the url)
I only want it to go to the url but it needs to be in the same div as the text (which shows 'menu_1') because menu_1 is nested.

I can post my styles aswell if needed...

thanks!