CSS - Id Name Already Defined

Is it possible to define a style class and then reference that in another user defined class so that you don't have to have 12 classes with only very minor differences?

Hi,

For SEO reasons I'm trying to add an < H1 > tag around some text and have that text appear as the other text in a paragrah.

The problem is any text I put in the h1 tags don't seem to wrap in IE or NS. Instead, if it needs to wrap it puts it on the next line.

For example, if I had something that looked like:

The quick brown fox
jumped over the fence
and ate the cat

And I surround "brown fox jumped" in h1 tags, in IE and NS it would look like:

The quick
brown fox jumped over
the fence and ate the cat

Does that make sense? Any solution to that? The style I'm using is simply

Code:

h1
{	
	position:relative; 	
	font: 12px/14px Verdana;
	display:inline;
	margin:0;
}

TIA!

Hi,

I've been running into a specific issue in projects for months now, and it's beginning to drive me nuts. I'm sure there must be a way to do what I'm trying to do.

The situation will usually be something like this:

I'll have a vertical menu in list form. All of the menu items are to be 150 pixels wide with a background image, and that background image will change when the link is hovered over. The links themselves, though, are not all the same text and therefore not the same width. I cannot get CSS to implement a width to links, and when using CSS like the below, that's a necessity to get the same width background hover image on each link.

CSS/HTML:
css Code:
Original - css Code <style type="text/css"> ul{} ul li{ background: url(someimage.gif) no-repeat #FFF; width: 150px; } ul li a:hover, ul li.active a:hover { background: url(someimage_over.gif) } </style> <ul> <li><a href="#">Link One</a></li> <li><a href="#">Link Number Two</a></li> <li><a href="#">Link Three</a></li> <li><a href="#">Link Number Four (4)</a></li> </ul>

  

  


 <style type="text/css">


 ul{}


  


 ul li{


 background: url(someimage.gif) no-repeat #FFF;


 width: 150px;


 }


  


 ul li a:hover, ul li.active a:hover  {


 background: url(someimage_over.gif)


 }


 </style>


  


 <ul>


 <li><a href="#">Link One</a></li>


 <li><a href="#">Link Number Two</a></li>


 <li><a href="#">Link Three</a></li>


 <li><a href="#">Link Number Four (4)</a></li>


 </ul> 

I hope that illustrates what I'm trying to get across, but maybe not. Basically, I need a way to use CSS to change the background of multiple areas of the same width within which the <a> sizes may not be the same.

I'm having trouble explaining this. Let me know if you need it further explained.. otherwise, I'd greatly appreciate any input. Thanks in advance!

For reasons of compliance with the SEC, I can't use cascading style sheets, but rather, I have to generate style attributes for each individual element (e.g. Code:

<p style="width:436pt; margin:0pt; padding:6pt 0pt 0pt 20pt; 
          font-family:serif; font-weight:normal; color:#000000; 
          font-size:10pt; text-align:left; font-style:normal; 
          line-height:12pt; background-color:#FFFFFF;" >text </p>

don't get me started on how rediculous this is). Its stupid, but it works.

What I can't figure out is how to apply something like
Code:

<style type="text/css" media="print">
  hr {visibility:hidden}
</style>

to <hr style" ??? "/>

any suggestions would be much appreciated

-LG

Hi

I have this small problem with one of my sites when viewed in IE *surprise surprise*

Let's say I have a div called "foo". I specify a width and set a padding of 10px.
Code:

<style>
.foo {
    width: 100px;
    padding: 10px;
}
</style>
<div class="foo">Bar</div>

Firefox, Opera and Mozilla interprets this as an element which's "text area" is 100px and there's an additional 10px on both sides. So the actual width of the div is 120px.
IE doesn't interpret it like that. If I set widht=100px, then the actual width is 100px regardless if I have paddings or not.

Now these different types of interprations are causing me a head ache. Is there any "trick" to make the div to be equally wide in all browsers? If not, I guess the only option is to use tables


- Kimppa