CSS - Programmaticly Changing Style's

hello, Im running a website that uses the hover css style to change the button from a darker colored text to a lighter colored text (two different images) but when I go to the web page and hover over it it disappears, only for a second but its still annoying, and then replaces it with the new image. is there any way to get rid of this brief disappearance?

Hi,

First post to what looks like a great forum!

OK, little problem and I wonder whether anyone can help. I have a page with three frames, two (top and bottom) on the left and one large delivery frame.

At one stage, I want to open an external page in the main frame but change its style sheet to my own one. I know I can do this using my browser's own style sheet capability, but I need to do this for everyone who visits.

Its a long story, but there are no copyright problems as I do own the copyright to the other site, I just don't have a programmer to change the dynamically generated webpages at the moment.

Many thanks,

Rohan

Hi All,

I am building a site that has the following structure for the navigation;

Code:

<div id="navigation">
    <ul id="navlist">
      <li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
      <li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
      <li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
        <ul>
          <li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
          <li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
          <li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
          <li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
          <li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
        </ul>
      </li>
      <li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
      <li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
    </ul>
  </div>

The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;.

Edit: Just noticed that I can't link to the full site that I have uploaded for preview.

What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another?

Your help would be much appreciated!

I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule:
Code:

 .textarea-box {
	color: #990000;
	background-color: #fff;
	width: 375px;
	height: 200px;
	border: #000 solid 1px;
	} 

...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule?
Thanks for help with this.
j9

I have a menu bar made up of <a href> elements that have a hover style of: PHP Code:
#mainMenu a:hover {
    color:#000000;
    background-color: #66c74c;
    padding: 1px 4px 1px 4px;
    margin: 1px 1px 1px 1px;
} 



This will provide a green colored rollover visual as the user moves their mouse over the menu bar.

I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code:
//--- Simplify setup by creating an array of the menus and hilight ID's ---
    var menus = ["menu1","menu2","menu3","menu4","menu5",
                "menu6","menu7","menu8","menu9","menu10"];
    
    function J_hiliteMenu(menu) {
        //--- first make sure all the menu are hidden and unhilited ---
        for(i=0; i < menus.length; i++) {
            if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position
            var obj = document.getElementById(menus[i]);
            if (obj == null) continue;             // if menu is not available skip it
            obj.style.color = "#ffffff";
            obj.style.backgroundColor = "#234fd7";
        }
        //--- hilite the menu we're interested in ---
        var obj = document.getElementById(menu);
        obj.style.color = "#000000";
        obj.style.backgroundColor = "#f8f400";
    } 



Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript?

Thanks!

on my site I have a list with the UL Class of threads.

I am not good with CSS at all I have this

Code:

#threads {
  padding:0;
  margin:0;
  } 
#threads li {
	list-style:none;
	border-bottom:1px dotted #ccc;
	display:block;
	padding:2px 0px 2px 13px;
	background:url(images/sub.png) no-repeat 0 0px;
	}

not doing what I want, my site is mypricesavings(dot)com you can see the list on the homepage under Recent Activity, I'd like to make it so that the avatars line up on top of each other and a line between each one like the featured section located on this site, however, without the scrolling.

http://demo.colorlabsproject.com/?theme=arthemia-premium

thank you for attempting

Hello,

In the css below, why I can't set it on the same time?
Code:

    background: #FFF url(../images/main_bottom.gif) no-repeat  bottom ;
    background: #FFF url(../images/main_top.gif) no-repeat  top ;

I did a web page for a company and it looks fine in ie7 where I tested it.

The problem is when viewed in IE6 its like it ignores the sizes I put in.

The box appears too big in IE6 and is the propr size in IE7.
Is there any way to fix it so it would look the same in IE6 as IE7?

I was reading a tutorial were they always style both <tr> & <td> with the same thing... Is this needed? Or do you just need to style <tr>?

Code:

table.navigation tbody tr.odd {
	background: #252525;
	color: #fff;
	}
table.navigation tbody tr.odd td {
	background: #252525;
	color: #fff;
	}

How would you go about creating a navbar like the one Red cross uses on the left side for generic website mapping? Red Cross Example

Is this pure css with dual images? Or is this done with some effect with other forms of CSS (or even DHTML?)

I have setup a style for the <A> Tag which will be used throughout the site.

Code:

a {
	cursor:pointer;
	color: #8E9300;
	text-decoration: underline;
}

I have one div on one of the pages that contains some links, on this one div I would like to redefine the <a> tag or override it but not affect the <a> tags on the rest of the site.

How can I do this? Thanks.

Hi,

I have a style for <a> like the following
Code:

a.navselect:hover,a.navselect:link,a.navselect:visited { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; text-decoration: none; text-align: center }

Then i use it as
Code:

<a class="navselect" href="https://swww.go.trade.com/NASApp/MarketTabCtx/MarketTabServlet">Markets</a>

but if i have 20 links i have write my class 20 times like above.

Can i put a <div> statement around all my links and some how define <a> for my div so that all <a> with in that div get that style

Can anybody solve the mystery of what's going on on this page?:

http://www.j-archive.com/showscores.php?game_id=3346

The "Jeopardy! Round" score table and the "Double Jeopardy! Round" score table should look exactly the same, but on my browsers (Chrome 4 and IE6) the "Double Jeopardy! Round" table has a wider td for the first row. It's as if it's "inherited" the width of the tds that follow it (or perhaps came before it?)...

I've checked over the markup and the CSS several times and I can't find any errors that would cause this. What's going on?

Thanks--

hi, how do I style a drop box so it is flat not sunk in?

I have not done much web designing lately and have forgoten a number of things. Right now i cannot remember if it is possible to specify link styles for a specific class for a cell in a table. I have this code for the entire page:

a:link,a:active,a:visited,a:hover { color : #FFFFFF; text-decoration: underline; }

However, I want to have it different in only a specific cell of a table. Is there a way to put it in the following code?

td.newshead { background-color: #013501; border-style: solid; border-color: #FFFFFF; border-bottom-width: 1px; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; font-family: verdana; font size: 125%; font-variant: small-caps; font-weight: bold; color: #FFFFFF; text-align: center; }


I can't do something like making another link class like this either

a.class:link,a.class:active,a.class:visited,a.class:hover { color : #013501; text-decoration: underline; }

I have the information comming from another page and I am not able to the <a class="class" href="url">. I need to put it in the style for the cell. Anyone able to help me out here?