CSS - Overwritting Inline Style

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!

Hello everyone,

I'm working on this page http://jordanmeeter.com/photos/sets/ and I want to get the set description inline with the <h2>. I can just baaaaarely remember how to do it, but everything I'm trying doesn't work. Can someone help me out?

Thanks,
Jordan

This is bugging me to death. I cannot get these to top elements to display inline.
If anyone could take a look in firebug to see element and related css applied and tell me whats wrong.
The page is:
http://travelmagoo.com/index.php?option=com_resource&controller=article&article=384&category_id=201&Itemid=0

at the top header there is a title and to the right there is an image. I would like the image and title to be on the same line but everything i do will not let me do this.
any ideas?

I need to style all images within a div. For example, I want to do something like this:
<div style="img{border: 0;}">
<img src="" />
<img src="" />
<img src="" />
</div>

But that does not seem to work. Is it this possible with css?
It is for an ebay template, so I don't think I can reference a separate stylesheet.

thanks.
Charley

Hi there...

Simply enough, I'd like to get my column widths (for the "menu" and "content" div's) appearing in IE5+ as they do in Firefox.

URL: http://www.cbaa.org.au/3cfor_web/ejournal_header.html
CSS: http://www.cbaa.org.au/3cfor_web/layout2.css

I've tried this technique: http://glish.com/css/hacks.asp but I'm not sure what I'm doing wrong.

Any help greatly appreciated.

I'm having trouble getting the following to work

im = image

Code:

im im <div id = "controlText">Variable Length Text</div> im im

my style info

Code:

#controlText{
position:inline;
text-align:center
width:200px
}

I know that once I turn the div into an inline element I throw away the width which is what my problem seems to be.

What is happening is you click forward (these are calendar controls) one month and then the text is short and your mouse is now over the year forward button which you then accidently click. I want the div or whichever tag to alwasy have the same width no matter what the text.

Is there any other way to get this to work than multiple floated divs?

Got a quick question from a newbie. Thanks to a kind member, I've just been assisted in creating my first HTML5/CSS 3.0 page. It has a footer that extends vertically with content.

I have several pages that will be updated that will be changed frequently. In my world of tables, I would simply create an inline frame to display them, and have ease of quick editing. The questions I have are

1) is there a CSS alternative to have mulitlple links display different content in a particular frame or div?

2) With either that alternative OR inline frames, is there a way to make it dynamic, meaning instead of scrolling, it extends downward and pushes the footer down as content grows?

3) if so, how would I accomplish this?

The Problem: I want my logo (a gif image) to justify to the left but padding centers it.

Is there a way to NOT pad one "cell" in an inline navigation bar using css without affecting the rest which follow (which are padded)?

Please email me for urls to see exactly what I'm working with.

Many thanks in advance!

I have 4 or 5 form controls that I want in a horizontal line. Each form control has a label above it, and I'm using <br>s to position the form control below the label.

I thought that wrapping each "label<br>form control" with a <span> would turn the whole thing into an inline block, where the next <span> would line up next to it, like the next <td> in a <tr>.
Code:

<div id=secondline>
  <span id=ed>
    <b>Event Definition</b>:<br>
    <textarea name=inject cols=45 rows=6></textarea>
  </span>
  <span id=after>
    <b>After</b><br>
    <select name=next size=8 multiple>
      <option value=0>0
      ...
      <option value=100>100
    </select>
  </span>
</div>

but, alas, it doesn't work like that.

How can I get Code:

<tr>
  <td>label<br>form_control</td>
  <td>label<br>form_control</td>
</tr>

behavior without using tables?

I've found a number of great examples of how to do tabs with CSS (http://unraveled.com/projects/css_tabs/ being the one I'm working off of), but they all link to various other HTML pages. Does anyone know of a reasonably simple way to do them inline? (think www.johnkerry.com) I'm sure there's javascript involved, but does anyone know of a good resource on how to accomlish something like this?

Sometimes CSS makes me want to tear my hair out.

I'm trying to make a custom form input that is a combination of a regular select drop down and a multiple select. I have the javascript all sorted out and my input works like a charm. I can't figure out any way to make it display like a <select> does though.

I thought I could simply do this: <ul style="display: inline">
According to w3schools, this will tell the element to display without a line break before or afterward. Much to my despair, it's not that simple.

Here's an example:
Code:

<div>
This is some text
<select name="test">
<option value="">Click to expand</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<input type="submit" value="Submit" />
</div>

<hr />

<div>
This is some text
<ul name="test" style="display: inline;">
<li>Click to expand</li>

<ul style="display: none;">
<li value="1">One</li>
<li value="2">Two</li>
</ul>

</ul>
<input type="submit" value="Submit" />
</div>

Notice how the regular old html input sits nicely inline with the text before it and the submit button after it?

Notice how the ul doesn't, despite the fact it's set to display inline? Anybody have any suggestions?

Hi, i have to display a list of links horizontally, wrapped in a <ul> tag. For seo reasons now these links have to be wrapped in <h2> tags. In IE6 + IE7 this causes a linebreak and the links are displayed in a vertical list.
sth like

#myId LI {
display:inline-block;
}
#myId LI H2{
display:inline-block;
}

solves the problem for Firefox but not for IEs. Do you know a solution? Would be highly appreciated!

here the html

<ul id='myId'>
<li><h2><a htref=...>somewhere</a></h2></li>
<li><h2><a htref=...>somewhere</a></h2></li>
</ul>


OK Found out a
float:left in the li
was missing

I am new to this forum and need some help!

I am creating a page and the sidebar has links. I have a graphic link that I DO NOT want highlighted. I have tried everything I can think of, but I don't think I am able to apply the link styling as an inline style, or am I wrong. Any help would be appreciated!

http://annesweb.com/abramoff/

What is the difference between inline styles and id's? Are there places where you should use one and not the other?

Sorry if this has already been answered but I couldn't find anything in a search.