CSS - Change Display: Value Without Javascript?

Hi all, I have a fairly complex page with quite a few nested divs, and some of these nested divs have overflow:auto assigned to them.

The problem Im having is that on pageload and when I click a link that has uses javascript to switch the visibility of some of the sub elements, it flickers the div to a different part of the page.

I know the description isnt much help, but I didnt know if this was something that others had ran into in general with gecko browsers.
I've tried assigning overflow: auto to the containing divs, and to no avail.

Anyone have any general ideas as to what it could be?

Thanks in advance

I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help!

I've been seeing people using ul and li tags to make their menus in css.

So I've started trying to do the same, here is an example.

But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working?

How can I get this to work or is there any other way to get a ul li menu to display this way?

Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either.

http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm

Hi!

Is is vicious to display a table as "display: block" to force margin-collapsing?

Otherwise there's no margin collapsing with other elements.

Thanks

I have to do a re-design project to convert a Flash website into xhtml and css only.

The reason for this is that some corporate companies have been unable to see the site at all because thier firewalls ban all Flash content.

My problem is this; the site is very contempory in design and the previous designer used Flash to create his own custom scroll bars that fit nicely with the contempory theme, but doing the same thing using CSS is impossible. I know you can kind of customise scroll bars in IE and I also know that you shouldn't.

The client wants the site re-design to resemble the Flash version as much as possible, and I don't want to faithfully re-create the site and then have these chunky out of place scroll bars in the middle of it.

Should I just propose that the layout be changed to avoid the need for scroll bars?

I have a form with a list of things. The number of things in the list is variable, depending on certain factor, different things, different numbers of things. Next to each thing is a radio button.

There is a question with two radio buttons, "yes" and "no".

When "no" is selected, I want the radio buttons to be disabled, and the color of the text to change to gray.

For the radio buttons, I have a simple JS function: javascript Code:
Original - javascript Code function enableCFFID() { document.cartform.cffid.disabled=false; } function disableCFFID() { document.cartform.cffid.disabled=true; }

  

  


 function enableCFFID()


 {


     document.cartform.cffid.disabled=false;


 }


 function disableCFFID()


 {


     document.cartform.cffid.disabled=true;


 } 

For the test that goes with each thing, obviously I don't want to have to assign unique ID (perhaps in a span tag that encloses the text). I would want a common name for all of them.

But this would mean I can't use getElementById.

What other method can I use to change the class for a group of span tags who's number is variable?

hi all,

Code:

<ul class="sessionlist">
<li class="session_event">
<label class="evinfo">
<b>available places: 1</b>
</label>
<br>
<label class="evinfo">
<b>session capacity: 1</b>
</label>
</div>
<br>
<label class="evinfo">Click to select</label>
</li>
<li class="session_event current">
<label class="evinfo">
<b>available places: 1</b>
</label>
<br>
<label class="evinfo">
<b>session capacity: 1</b>
</label>
</div>
<br>
<label class="evinfo">Click to select</label>
</li>

I have managed to get the color of the text in these labels by using:

Code:

ul.sessionlist li:hover .evinfo{
	color: #662d91 !important;
}

My question is.. how do i change the color of the text for the labels in selected_session current?


Its doing my head in and I can't figure it out...

Probably really simple for you guru's though.

Ben

ps, i know the html for this is invalid.. I've chopped out a load of code to leave only the relevant stuff and have probably missed a few things.

Question:
I have two class below. What I want is when I change the padding-top property value in div.content-full, I also want the padding-top property value in the div.content change to the same value



div.content-full
{
float:left;
width:100%;
padding-top:10px;
margin:0px;
}

div.content
{

float:left;
width:70%;
padding-top:06px;
margin:0px;

}

Can anybody help me out?

Hi,

I'm just learning css and need some help. I am attaching an html page that has a navigation bar that changes the background color of the table cell when you mouse over the text link. It works OK but I would like to have the bg color change when you mouse over the td cell. I am currently making it look like it changes the td background by adding Code:

display: block;
line-height: 32px;

to the "td.navbar a:hover" class.
Is it possible to change the td background when mousing over it using only css?

Here's the code that I have now:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-color: #000000;
}
td.navbar {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}
td.navbar a:link{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}
td.navbar a:visited{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}
td.navbar a:hover{
	background-color: #000000;
	height: 33px;
	width: 88px;
	display: block;
	line-height: 32px;
}
td.navbar a:active{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	
	}
-->
</style></head>

<body>
<table width="780" height="35" border="0" cellpadding="0" cellspacing="0" bgcolor="#000099">
  <tr>
    <td width="41">&nbsp;</td>
    <td width="2"></td>
    <td width="88" height="33" class="navbar"><div align="center"><font><a href="http://www.mysite.com/">Home</a></font></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><a href="#about">About</a></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><font><a href="inc/support.php">Support</a></font></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><font><a href="inc/contact.php">Contact</a></font></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><font><a href="inc/services.php">Services</a></font></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><font><a href="inc/shop.php">Products</a></font></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><font><a href="inc/links.php">Links</a></font></div></td>
    <td width="2">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>


</body>
</html> 

the code here works fine, except that the displayed text changes from white to black. It would be nice if each new text would start as FFFFCC and then fade to 3E3D11. Here is the script that I'm manipulating from Java Script Source:

<!-- Paste this code into the CSS section of your HTML document -->

#tic {
/* enter any styles for the ticker below */
border: .05em #CEC3AD solid;
font-size:0.85em;
padding:10px;
width:400px;
line-height:20px;
}
#tic * {
/* this will hide all children tags */
font-size: 1em;
margin:0px;
padding:0px;
display:none;
}
#tic a {
/* add more tags to this list if you wish to display them inside the children */
display:inline;
}




<!-- Paste this code into an external JavaScript file -->

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: James Crooke :: http://www.cj-design.com */

var list; // global list variable cache
var tickerObj; // global tickerObj cache
var hex = 255;

function fadeText(divId) {
if(tickerObj)
{
if(hex>0) {
hex-=5; // increase color darkness
tickerObj.style.color="rgb("+hex+","+hex+","+hex+")";
setTimeout("fadeText('" + divId + "')", fadeSpeed);
} else
hex=255; //reset hex value
}
}

function initialiseList(divId) {
tickerObj = document.getElementById(divId);
if(!tickerObj)
reportError("Could not find a div element with id \"" + divId + "\"");
list = tickerObj.childNodes;
if(list.length <= 0)
reportError("The div element \"" + divId + "\" does not have any children");
for (var i=0; i<list.length; i++) {
var node = list[i];
if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
tickerObj.removeChild(node);
}
run(divId, 0);
}

function run(divId, count) {
fadeText(divId);
list[count].style.display = "block";
if(count > 0)
list[count-1].style.display = "none";
else
list[list.length-1].style.display = "none";
count++;
if(count == list.length)
count = 0;
window.setTimeout("run('" + divId + "', " + count+ ")", interval*1000);
}
function reportError(error) {
alert("The script could not run because you have errors:\n\n" + error);
return false;
}

var interval = 7; // interval in seconds
var fadeSpeed = 40; // fade speed, the lower the speed the faster the fade. 40 is normal.





<!-- Paste this code into the HEAD section of your HTML document
Change the file name and path to match the one you created -->

<script type="text/javascript" src="yourFileName.js"></script>




<!-- Paste this code into the BODY section of your HTML document -->

<div id="tic">
<h1>Welcome to The JavaScript Source ...</h1>
<p>
The JavaScript Source is a part of Jupitermedia, in the Web Developer channel of the internet.com network.</p>
<p>
All the scripts on this site are free for personal or business use.</p>
<p>
The only requirement is that you leave the credit information inside the script.</p>

<h2>JavaScripts</h2>
<p>
JavaScript programs are contained within the HTML code of the Web page and are interpreted by the browser as it's read.</p>
<p>
JavaScript provides greater flexibility through such luxuries as being able to create windows, display moving text, sound or other multimedia elements with relative ease.</p>

<h2>Some Basics</h2>
<p>
JavaScript is not Java; it is an object-based scripting language; and it is cross-platform.
</p>
</div>

<script type="text/javascript">
<!--
initialiseList("tic");
//-->
</script>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div>

I have the task of creating a question with multiple correct answers without using form checkboxes (for reasons I won't go into here.)

I've made a simple question that works by replacing the src of a tickbox image with a ticked one when that answer is selected. It works in IE5.5 and Firefox but in IE6 the images show when the page loads, then disappear on clicking and don't come back.


Can anyone suggest why?

I've stripped out all the branding etc and put the basic page at http://www.normanlamont.com/test/mu...pages/index.htm

Here's the code that does it:
Code:

function markup(which) {
// toggle tickbox on and off until submit
if (document.getElementById('c' + which).className=="chosen") {
		document.getElementById('tick' + which).src="../q_images/tickbox_0.gif";
		document.getElementById('c' + which).className="not_chosen";
		selected[which-1]=0;
		}
	else {
		document.getElementById('c' + which).className="chosen";
		document.getElementById('tick' + which).src="../q_images/tickbox_1.gif";
		selected[which-1]=1;
		}
}

http://testarea.sensationdesigns.com/triexa/

The dropdown menu... at the top...

Okay so three main questions:

1) At 800x600, the last item shows up off the screen. Is there anyway to have it automatically not show off the screen?
2) Is it bottom to have the bounding boxes of each of the subitems be aligned to the right edge of the text rather than the left?
3) Is it possible to have the whole row clickable, rather than just the text?

I'm trying to change text-color of a <h1> tag when the mouse hovers over it. I don't want to use the :hover css comand because I need this page to work in IE5. So I was thinking of using JavaScript and onMouseOver, but then I don't know how to change the color.
Maybe if I somehow could change the style-sheet that the h1 uses, but I don't know how I would do that...
So how do I change the color of a <h1> tag using onMouseOver?