CSS - Span Class Not Effecting Element Within Li?

Hello everyone, l just wanted to know what browsers support the following:
Code:

<style>
td.test1 {
background-color: pink;
}
td.test2{
border-style: dotted;
border-width: 10;
border-color: orange;
}
</style>

<table>
<tr><td class="test2 test1">
THIS IS A TEST .. YAYA!!
</table>

Which is 1 element, with 2 class names...
It seems to work with the latest netscape, IE, and opera, just wanted to know if this is something l should be using on my web pages, or not due to the possible compatibility issues, any help is greatly appreciated, gents

Samantha Gram.

Is there a better way to declare custom fonts than doig like such

style sheet

.bluesmall {font-family: verdana}
.bluesmall {color: blue}
.bluesmall {font-size: 10px}

/style sheet

content

<span class="bluesmall">example text</span>

Hi

I'm struggeling with the following:

I have some span elements inside a td.

If I apply padding to a span then the padding is flowing outside the td (above and below the borders of the td).

Why does that happen and is there a way to make the td to autogrow to fit all the span's inside?

Se example code below

Code:

<table border="0" cellpadding="0" cellspacing="0" align="center" style="width:300px; margin-top:50px;">
<tr>
<td style="background-color:gray; text-align:center; border:1px solid black;">
<span style="margin-right:20px;">First</span>
<span style="margin-right:20px;">1</span>
<span style="margin-right:20px;">2</span>
<span style="margin-right:20px; background-color:orange; padding:10px;">3</span>
<span style="margin-right:20px;">4</span>
<span style="margin-right:20px;">5</span>
<span style="">Last</span>
</td>
</tr>
</table>

******* UPDATE *******
I found this link today:
http://css-discuss.incutio.com/?page=FormattingContexts

which says (among other things):
*************************
Only one thing impacts the vertical space between inline elements: the line height. Normally, the line height is based upon the line height for the text in that line, or the height/padding/border/margin of any replaced items. The element on a line with the largest line height or replaced height is the one to define the vertical space that line takes up.

Height, padding, border or margins on text do not impact the line height or the container height. Instead, borders, padding and margins overlap from line to line. If you want to give an inline text element some padding and border, make sure you give it some extra line height, too, or else it will overlap with whatever else is above or below it.
*************************

So does that rule mean that I have no way to make my TD autogrow in relation to the padding applied to the SPAN in the example above?
Is there any working workarounds for this...?

Ok, i have a scenario. I need to add something to a web page without effecting the overall width of the site. Now obviously i can add a background image to the body tag and that wont effect the width but how can i do this elsewhere in the site? For example, the width of a site is 780px wide and at the bottom of the site is a footer with a 800px width image. I need that image to be there but without increasing the site size from 780 t0 800 so that it is still optimized for computers running 800x600

Cheers

Hi all,

I've got an item like this:

<div (holder)>
<div (image) style="float: left;">image</div>
text here
<div style="clear: left;"> </div>
</div>

But the trouble is that In the layout, I've got the menu floated left, too, and that 'clear: left;' seems to be clearing the left menu as well... Why?

Cheers

Hi,

My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner).

Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page.

I have tried various approaches and read up on positioning but so far have not been able to do it using css.

Any help is much appreciated.

Jim

Hi.
See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should.
Please also read some comments in the code.

Code:

<html><body><center><br><br>
Why does image not force the outermost span to be at least as high as image?<br>
If the text are long enough and gets below the bottom border of image it look good though.<br><br>
NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br>
In my real application I'm using an <a href=" ...> around the outer span in examples below.<br>

<br><br>
<table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td>
	<span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;">
		<span style="display:block; float:left">
			<img src="landscape.jpg" height="40px" width="40px" alt="" border="0">
		</span>
		
		<span style="display: block; color: white;">
			Text here. 
		</span>
	</span>
</td></tr></table>

<br><br>
<table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td>
	<span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;">
			<img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left">
			Text here.
	</span>
</td></tr></table>

</center></body></html>

I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover.

Here is an example:


Code:

<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>

.link a { some link height }

.link a span { display: none; }

.link a:hover span {
  position: abolute;
  top: (some link height * the number of links);
  background-image: (some image url)
  width: (image width)
  height: (image height)
}

Appearance:

------
Link1
Link2
Link3
Link4
-------
-------
Rollover Image to appear here
-------

The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed.
IE
------
Link1
sublink1
sublink2
Link2
Link3
Link4
-------

will break my scheme.


Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang?

If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that.

thanks.

hey,

I got a table, every <td> in the table got the css class .regular.
(<td class='regular'>).
When the user moves their mouse over a row, that row should change color. This works with the following code:
<tr onmouseover='this.className=\"hoverRow\"'>
However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this.

How can i overwrite the class of the td's by the class for the whole row?

thanks in advance

Using the following example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">

a
{
	display: block;
}

a.one.on, a:hover.one, a:hover.one.on
{
	color: red;
}

a.two.on, a:hover.two, a:hover.two.on
{
	color: orange;
}

a.three.on, a:hover.three, a:hover.three.on
{
	color: green;
}


</style>
</head>

<body>

<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>

<p>&nbsp;</p>

<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>


</body>
</html>

Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style:

Code:

a.three.on, a:hover.three, a:hover.three.on
{
	color: green;
}

(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE.

I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated!

Code:

HTML Code

<div class="menu">
    <ul>
        <li><a href="#" class="search"></a></li>
        <li><a href="#" class="battery"></a></li>
        <li><a href="#" class="cart"></a></li>
        <li><a href="#" class="contact"></a></li>
    </ul>
</div>

CSS

.search, .contact, .cart, .battery
{
    width:100px;
    height:30px;
    margin-left:-1px;
    display:block;
}

.search
{
    background-image:url(Images/search.png);
}
.contact
{
    background-image:url(Images/contact.png);
}
.cart
{
    background-image:url(Images/cart.png);
}
.battery
{
    background-image:url(Images/battery.png);
}

ul li a.search:hover
{
    background-position:0px 60px;
}


ul li a.search:hover ul li a[class=battery]
{
    background-position:0px 60px;
}

Can anyone explain the difference between the two? For example, what is the difference between:

this:
element element {}
div p { }

and this:
element > element { }
div > p { }

I don't understand it and have not found an explanation in tireless searching. Thx!

Hi,

I am currently trying to produce a website using CSS style sheets.

I have used 'span' to position and align blocks of text on the page. All looks well, but when I try and validate the page I get an error message that says the <p> and <ol> tags cannot be used within <span> tags.

Can anyone suggest anyway round this?

Many thanks x

hi,

i have a chunk of dynamic text coming in. it can have html links in it. so something like:

'blah blah blah <a href="site">link text</a> blah blah'

im trying to stylize the dynamic text with CSS. i can get the font size and everything to work but i can't get the link text to behave like i want it to.

here's what i have:

PHP Code:
//the css class
.articleDesc
{
    font-family: verdana, arial, geneva, sans serif;
    font-size: 12px;
    font-weight: none;
    text-decoration: none;
    color: #000000;
}

//trying to make all links red, doesn't work
a.articleDesc
{
    color: #FF0000;
}

//php
print '<span class="articleDesc">' . $dynText . '</span>'; 





the links just come out default, ie. blue and purple...

anyone know what's wrong here?

Hi,
Code:

<tr><td colspan="2" height="5"></td></tr>		
<tr><td width="30%" align="right">City</td><td>This is supposed to be some content</td></tr>

How do I imitate structure of the table above.

In the example below the text between <span> if too long ends up on new line below <label>
How do I make sure that it stay on right side?
Code:

<div><label>City</label><span>This is supposed to be some content when too long appears below span not below label</span></div>

Thank you.