|
CSS - Spaces In Class Names
I have an asp page that displays some text which is formatted by a stylesheet. The colour of the text box depends on the text itself.
For example, the information displayed is a risk. If the risk is 'None', the box is white, if it is 'High', the box is red, etc. The class is determined programmatically, according to the actual risk. In the stylesheet I have a class called 'None', another called 'High', etc. The problem I have is that one of the risks is 'No Risk' which obviously has a space in it. The text MUST say 'No Risk' so the solution is not to have text with no space in. How do I create a class in my stylesheet called No Risk? If I type it literally, with the space, it doesn't recognise it. I have a procedure that selects the Risk from a database table. The asp page has the following line to set the class: Response.Write "<td class=" & chr(34) & Replace((rs.Fields.Item("risk").Value) , " ", "") &"2" & chr(34) & ">" & (rs.Fields.Item("risk").Value) & "</td>" Any help would be very gratefully receive it as I am rapidly running out of hair! Thank you. Similar TutorialsCan you have the a class name as follows: <tr class="row one"> . Hi, I was just wondering whether it is valid to use the following names in CSS for classes or ID's Code: .class1 .class2 #id3 #id4 Are alphanumeric names allowed? Hey, I just started learning all of this stuff, and I had a question. I'm trying to set it up so that in my CSS I have two different sets of styles for links. Technically they are the same styles, I just want this class and this other class named differently, and it wont let me. It keeps taking the second one back to default. Is there a way I can get around that and get it to work? Thanks, JennyO 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. i've been searching the web for a couple weeks trying to find a simple way to swap CSS classes onMouseOver, making a simple, and elegant Rollover button. i've found tons of examples with really complex methods, but i really need to do it with CSS classes. so i've read repeatidly that by putting the following code as your TD tag you'll be able to change class names. and it simply doesn't work at all. the code i'm having a problem with reads like this: <td class="out" onMouseOver="this.className='over'" onMouseOut="this.className='out'"> it just doesn't work. anyone at all who can give me a code that does work, i'd be more than appreciative. oh, and by the way i'm using IE 6.0.2600 Hey CSS experts, I have a weird problem with CSS in Firefox and Netscape. I am using CSS to manage my fonts using the the div class and span class strings. However, I've noticed that Firefox and Netscape insert additional spaces between some text areas. This happens when I define things both as a div class and as a span class. What makes this increasingly weird is that I can have two nearly identical lines of code and one will display extra spaces and one will not. Case in point: These are two exaple lines of code: <tr> <td><div class="navtext">130 South Main Street</div></td> </tr> and <tr> <td><div class="navtext">Saturday - 10 a.m. to 1 p.m.</div></td> </tr> The first line doesn't end up with spaces between it, but the second line doesn't. I chose these example because only a couple lines of code seperate them. I am an extreme CSS newbie and would greatly appreciate any help with this problem. Thank you in advance! Jordan Coffey P.S. Here is a link to the site so that you can see it for yourself: www.countrysidetrvl.com 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> </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;
}
I'm using a two column layout (main, sidebar), and within the main column, there is a section that breaks into two columns. I'm using this code:
Code: <div>
<p>Some main column content</p>
</div>
<div id="inner_col_wrap">
<div id="col_left">
<p class="col">Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
<div id="col_right">
<p class="col">Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
</div>
<div>
<p>Some more main column content</p>
</div>
The problem is that some of the content that follows the two column block ("Some more main column content") is pushed up into the "col_right" DIV when "col_left" and "col_right" are not equil ("col_right is shorter than "col_left", and there is space at the bottom). How to keep the conent that follows the two column block out of it? Hi I've trying to use a UL list to display a menu on my site. I'm having a problem with spacing tho. No matter what I do, there always seems to be a slight space between the LI elements. Code is as follows: PHP Code: #menu { margin: 0; padding: 0; list-style: none; } <ul id="menu"> <li><a href="thestore.php"><img src="images/menu_thestore.gif" width="195" height="36" border="0" alt="The Store" onmouseover="this.src='images/menu_thestore_over.gif'" onmouseout="this.src='images/menu_thestore.gif'" /></a></li> <li><a href="steel_toe_cards.php"><img src="images/menu_steeltoe.gif" width="195" height="36" border="0" alt="Steel Toe Cards" onmouseover="this.src='images/menu_steeltoe_over.gif'" onmouseout="this.src='images/menu_steeltoe.gif'" /></a></li> <li><a href="locations.php"><img src="images/menu_locations.gif" width="195" height="36" border="0" alt="Locations" onmouseover="this.src='images/menu_locations_over.gif'" onmouseout="this.src='images/menu_locations.gif'"/></a> </ul> Would it be something to do with the fact I'm using images as menu options?? There's always a slight space between them, and I can't figure out why! Hello, I have question regarding proper use of CSS, so I can get web site layout to display properly in both IE and Firefox. At the moment it's laid out properly in FF, but I have some problems with IE. The cells of a table "deform" while browsing in IE. This is how it looks like: URL http://i38.tinypic.com/5ffe6q.gif Here is html of the cells in question: Code: <table class="cHs" width="1000" border="0" align="center" cellpadding="0" cellspacing="0" background="pic/topcenter.jpg"> <tr> <td colspan="3" class="cHs" width="1000" height="145"><img src="pic/logo.jpg" border="0"> </td> </tr> <tr> <td class="cHs" background="pic/left.jpg" width="47" valign=top></td> <td class="cHs" align=center width="906" background="pic/backcen.gif" class=interior valign=top> <td class="cHs" background="pic/right.jpg" width="47"></td></tr><tr><th align="left" valign="top" scope="row" height=\"37\" background="pic/bottom1.gif"></th><td class="cHs" height="37" width="906" background="pic/bottom2.gif" align="center" valign="top"> </td> </tr> </table> Here is used CSS: Code:
table.cHs{ background: transparent;
border: none;
}
td.cHs { border: none;
}
Does anybody see a problem? Thanks in advance. is there a way using css to control how much space is below and above a form button, because I have a lot of form buttons and the space between them is killing my design. Thanks Howdy, Does anybody have, or has anyone ever seen a table for any form of database with CSS color names and/or hex codes in it? I'm sure some web design sites have something like it, but I could be wrong. If I don't get a reply in a couple of days, I'll go ahead and make my own and make it publically available (most likely in Access format). Thanks in advance. -colin I'm new to CSS, so I apologize if this is quite elementary. www.thinkblue2008.com Among the obvious stylistic things I'm working on, I need to get the deadspace areas figured out first. Basically, how can I a) get the columns to automatically extend (ie, white down to the footer) b) get rid of the space between Thanks, in advance, for your time and patience. Hello everyone, I have this issue where Firefox keeps making unwanted spaces between the headers/dividers of my content. My page is located at: hainescityhighschool(dot)com/development/beta (please view in both IE and Firefox to get the idea) I can't post links because of my user status but that should be a valid URL. Anyways, Firefox 3.0 is the version I'm having problems with. I haven't tested it in other versions. Where it says welcome, I want the divider image to be almost directly underneath it, and in IE it works. Only firefox seems to have an issue. Any ideas? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <table cellpadding=0 cellspacing=0 border=0 style="margin:0;padding:0;"> <tr style="margin:0;padding:0;"> <td style="border:1px solid black;width:120px;height:90px;text-align:center;margin:0;padding:0;"> <img src="http://www.gamertagpics.com/filesave/k/Ku/s_Kurow_Shinobi.jpg" style="margin:0;padding:0;height:100px;"> </td> </tr> </table> </body> </html> I made it as simple as could be. 1 table, with 1 row, with 1 cloumn with 1 image. EVERYTHING has a margin of 0 and padding of 0. Why is there still a space below the image? Please tell me how to remove this space. In both FF and IE, my site http://niosis.awardspace.com/polend.html doesn't display right. Look at the link below to see exactly how it is supposed to look. Here is how it is supposed to look: http://niosis.awardspace.com/tempsliced.html but of course that uses tables so I'm fixing it, and as you could see in the previous link having problems doing so. and if you think it looks bad in Firefox, just open up internet explorer and take a look at it. ewww.... Anyways, thanks in advance to anyone who can help me. The XHTML Validates strictly. |
|||||||