CSS - Problem With Switching Css Class Names

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.

Hey,
I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble.

my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css

Thanks.

I'm switching my font sizes from px to em (e.g. 10px to 1em) so people can resize the font using their browser settings. However, it's not working. The content on the page remains the same in IE.

Should just switching from one to the other work? I can't seem to find any other styles that are conflicting with it.

Code:

#centerCol p, #centerCol select, #centerCol textarea, #centerCol form, #centerCol td, #centerCol th, #centerCol input, #centerColTop p, #centerColSecondaryTop p {
	color: #333;
	font-size: 1em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

Hello,

I have created a design in photoshop which has been sliced into a number of smaller images.

I am then trying to reapply the design as a series of background <td></td> elements, using an external css. The style is:

Code:

td.tablebackground 
{ 
background-image:url('/media/headerarea/topnav_search.jpg');
background-repeat:no-repeat; 
width:40; 
height:10 
}

This works fine in IE6 but doesn't show in Firefox.

Can anybody please suggest a way around this?

I have also tried defining a class to attach to an <img> tag but this always places a border around the image even if border=0. The external css for this is:

Code:

img.tablebackground
{ 
background-image:url('/media/headerarea_red/topnav_search_red.jpg');
background-repeat:no-repeat; 
width:40; 
height:10 ;
border-style:none; // also tried border:0;
}

Many Thanks, J

I'm used to using PHP includes and the like to make my pages. I like having header, footer, and navbar files so I can edit things once across a site.

I just took some advice about ditching tables and using CSS for layout. It works fine if I just layout a single page but when I try touse includes everything is all over the place. Still a table-like headache.

I'm sticking with it but I thought that CSS would allow me to put everything where i want it, maybe just beginner's problems but I try to put things exactly where I want them or use percentages, nothing works in IE & Netscape at the same time.

Any advice on the best layout practices?

I understand how to write a print.css style sheet, but I am unclear on how to use it. I want to have a link on my page that says "Printer Friendly Version" that displays the printer friendly version and lets them hit the print button on the browser to print it. I think this is the most common way to print a web page, right?

So I am displaying to the screen first and the printer if they hit the button. So how do I get the print.css formatting to display instead of the screen version? Obviously I want a single markup file for both purposes.

Hi,

I had designed and coded my page, tried to keep all standards, ran it through the W3C HTML and CSS validators - everything seemed alright. Everything since I switched to Firefox.

Not a big mess, but if you want it perfect you want it for all browsers. Well we know that life is not easy if you try to satisfy all of them, but how come that even minor things are different?

Maybe I'm too stupid not to see the point, I hope someone can help - here's the piece of simple code that behaves different in both browsers:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1">
<title>
CSS Test Page
</title>

<style type="text/css">
BODY {
BACKGROUND: #5A656B none;
COLOR: #5A656B;
}

.BigBox {
BACKGROUND: #FFF none;
COLOR: #000;
HEIGHT:40px;
FONT-SIZE: 12px;
}

.SmallBox {
position:absolute;
BACKGROUND: #CAA none;
COLOR: #FFF;
}
</style>
</head>

<body>
<div class=BigBox>
Text in BigBox
<div class=SmallBox>
Some Text in the SmallBox
</div>
</div>
</body>

</html>


I don't want to start a religious discussion - I just want to have my site displayed in both browsers as it was intended to do.

Any help?
Thanks in advance, Damianos

Hi Guys,

Basically I'm having trouble with getting the 'Content' div layer to wrap around the switching div layers.

The grey background colour represents the 'Content' div layer which wraps around the button menu OK but doesn't wrap around the layers which switch.

The bodged way of doing it is to have a fixed height but then it leaves a blank area underneath the divs that are short of text...If you get what I mean?

Code:

<div id="content_test">
	<div id="rollovercontentwrapper">

		<div id="tabwrapper">
			<ul id="tabmenu">
				<li><p><a href="#" onClick="javascript:showTabContentOne('TabContentOne')">Summary</p></a></li>
				<li><p><a href="#" onClick="javascript:showTabContentTwo('TabContentTwo')">Benefits</p></a></li>
			</ul><!--TABMENU-->
		</div><!--TABWRAPPER-->

		<div id="TabContentOne" class="TabContentOne" style="visibility: hidden">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus risus, 
						porttitor non aliquam non, scelerisque vitae turpis. Duis venenatis nisl lectus, 
						et aliquam eros. Nam commodo, ligula sed ultrices vehicula, justo augue ultricies 
						urna, sed rhoncus nisi dui sed risus. Nullam commodo risus nec justo sagittis eu 
						cursus nisi interdum.</p>
						<br>
						<p>In hac habitasse platea dictumst. Sed vulputate auctor cursus. Morbi ac 
						ullamcorper dui. In sem velit, pulvinar sit amet cursus id, vulputate fringilla 
						erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 
						cubilia Curae; Sed lorem urna, imperdiet eget fringilla eget, molestie nec justo. 
						Fusce diam nulla, fringilla a sodales at, rhoncus vitae massa. Donec tincidunt, 
						leo quis fermentum venenatis, purus elit tincidunt ipsum, vitae sollicitudin nulla 
						orci nec arcu. Sed non neque neque, ac pharetra lectus. Donec a massa mauris. Sed 
						vel magna eget tellus commodo placerat in quis risus. Aenean velit lectus, aliquam 
						quis dictum ac, pellentesque sed diam.</p>
		</div><!--TabContentOne-->
		<div id="TabContentTwo" class="TabContentTwo" style="visibility: hidden">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus risus, 
						porttitor non aliquam non, scelerisque vitae turpis. Duis venenatis nisl lectus, 
						et aliquam eros. Nam commodo, ligula sed ultrices vehicula, justo augue ultricies 
						urna, sed rhoncus nisi dui sed risus. Nullam commodo risus nec justo sagittis eu 
						cursus nisi interdum.</p>
		</div><!--TabContentTwo-->

	</div><!--ROLLOVERCONTENTWRAPPER-->
</div>	<!----CONTENT_TEST---->

<div id="onebyone" style="visibility:hidden;">
<img src="onebyonepixel.gif" onLoad="javascript:showTabContentOne('TabContentOne')" width="1" height="1">
</div>

Code:

div#rollovercontentwrapper {
	float: left;
	width: 630px;
	background-color: #E9E9E8
}

div#tabwrapper {
	width: 630px;
}

ul#tabmenu {
	display: block;
	float: left;
	width: 630px;
	list-style-type: none;
	border-bottom: 1px solid #0048A7;
}

ul#tabmenu li {
	display: block;
	float: left;
	background-color: #E9E9E8;
}

ul#tabmenu li a {
	display: block;
	float: left;
	padding: 10px;
	background-color: #E9E9E8;
	border-top: 1px dashed #0048A7;
	border-right: 1px dashed #0048A7;
}

ul#tabmenu li a:focus {
	display: block;
	float: left;
	padding: 10px;
	background-color: #3383CD;
	border-top: 1px dashed #0048A7;
	border-right: 1px dashed #0048A7;
}

#TabContentOne {
	float: left;
	position: absolute;
	top: 350px;
	width: 628px;
	z-index: 1;
	padding-top: 10px;
	padding-bottom: 10px;
}

#TabContentTwo {
	float: left;
	position: absolute;
	top: 350px;
	width: 628px;
	z-index: 1;
	padding-top: 10px;
	padding-bottom: 10px;
}

div#onebyone {
	float: left;
}

div#content_test {
	float: left;
	width: 900px;
	padding: 20px;
	background-color: #CCCCCC;
}

Can anybody help me out on this?

Many thanks,

Mark

hi all ...

i am trying to hide the link of "Price" and "Broker" from the class "CONTENT" ... however it doesnt work with it .

What wrong with my code? i am a new css learner ... sorry for troublesome ...
CHEER



<html>
<head>
<title>Stock</title>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<style>
.CONTENT:link {display : none ! important;}
</style>
</head>
<body>
<tr class="MarkColor3" valign="top">
<td class="CONTENT" valign="top" width="35">
1234</td>
<td class="CONTENT" valign="top" width="140">
XXX Cop. Limited
</td>
<td class="CONTENT" valign="top" width="55">
5.050</td>
<td class="CONTENT" valign="top" width="58">
<img src="../images/index_up.gif" />0.075</td>
<td class="CONTENT" valign="top" width="58">
<img src="../images/index_up.gif" />1.508%</td>
<td class="CONTENT" valign="top" width="69">
707,730,172</td>
<td class="CONTENT" valign="top" width="198">
&nbsp;|&nbsp;<a href="../a.html">Price</a>&nbsp;|&nbsp; <a href="../b.html">Broker</a>&nbsp;|&nbsp;
</td>
</tr>
</body>
</html>

Hi, I'm using a regular drop-down manu for a CSS change. I can easily get regular links to work, but the drop-down menu will only work in Mozilla. In IE, if I add a 'submit' or 'change' button, the page is reloaded to the home page, and I don't want to make a million different menus, one for each page. Anyone know how to fix it?

Here's the page's URL, and the code I use for the drop-down.
http://www.pokevista.com/home.shtml

<form name="change" method="change" action="http://www.pokevista.com/home.shtml?"><select>
<option>Style Switch:</option>
<option value="#"onClick="setActiveStyleSheet('nav1'); return false;" style="background-color: rgb(0, 33, 87); color: rgb(125, 167, 217);">Winter</option>
<option value="#"onClick="setActiveStyleSheet('nav2'); return false;" style="background-color: rgb(101, 189, 96); color: rgb(0, 94, 15);">Spring</option>
<option value="#"onClick="setActiveStyleSheet('nav3'); return false;" style="background-color: rgb(240, 112, 0); color: rgb(255, 255, 0);">Summer</option>

<option value="#"onClick="setActiveStyleSheet('nav4'); return false;" style="background-color: rgb(153, 37, 7); color: rgb(255, 185, 0);">Autumn</option>
</select></form>

{yes, I'm 15 and a Pokemon fan. Bite me. ^__^;}

Hi,
what I'd like to do is have a few style sheets, then have a dropdown box where the user can select a theme and it will switch the style sheet in the link rel= according to which theme they chose. This should be pretty simple but I'm not much of a programmer. Can anyone help me out with the code for this?

Thanks

I have a personal website that has 13 different styles - easily switchable through a drop-down menu. Is it possible to insert background music (bgsound=) in CSS and make it work with the switching I have?

Here is the URL: http://brandon.ennis.tv/home.shtml

Hey Guys,

I have been working on a template type site where each visitor will be able to click an Href to select a style for the page. I found this code at another site and it works awesome on my local host, but when I upload the files, it doesnt inherit a default style.

Here is the Java in my header:

Code:

<script>
var StyleFile = "style" + document.cookie.charAt(6) + ".css";
document.writeln('<link rel="stylesheet" type="text/css" href="' + StyleFile + '">');
</script>
<SCRIPT type="text/javascript" id="wa_u" ></SCRIPT><SCRIPT type="text/javascript" src="/tracking.js"></SCRIPT>

And here are the links in my page:

Code:

<b>Select Page Style:</b> 
<a href="javascript: document.cookie='style=1'; window.location.reload();">Red</a> |
<a href="javascript: document.cookie='style=2'; window.location.reload();">Blue</a> |
<a href="javascript: document.cookie='style=3'; window.location.reload();">Green</a> | 
<a href="javascript: document.cookie='style=4'; window.location.reload();">Yellow</a> |
<a href="javascript: document.cookie='style=5'; window.location.reload();">Earth</a> |
<a href="javascript: document.cookie='style=6'; window.location.reload();">Black</a>

Any ideas how to have a default style on the page before the user switches? I want to stick with java if possible rather than PHP or some other language.

Please let me know.

Thanks

I'm in need of a method to change an image to different images in the same spot when the user hovers over their respective text links.

So far I have only found methods that work with only 2 different images or they just change upon hovering over the image itself and not text located elsewhere.

THanks.

Hey guys.

I'm still learning css so excuse some crude styles.

I don't know how to explain this so grap IE 6 and click here. Scroll down the links on the left until you get to the last one "Printable Pics." As you can see for some reason the last two links jump down the page and a big blank spot appears in it's place when you hover your mouse over it.

It doesn't do that in firefox or opera so I don't know whats' going on.

Heres my CSS:

Code:

body {
  text-align: center;
  height: 100%;
  background-image: url(images/bg_title.gif);
}

img {
  border: none;
}

#wrapper {
  width: 780px;
  height: 100%;
  margin: 0 auto;
  text-align: left;
  position: relative;
  background-color: #FFFF7D;
  color: #000000;
  border: solid 2px #0000ff;
}

#header {
  width: 780px;
  height: 143px;
  margin-bottom: 3px;
}
#headerImage {
  width:200px;
  float: left;
  margin-right: 2px;
}
#headerImage img {
  margin: 0px;
}

#headerLogo {
  width: 577px;
  float: left;
  margin: 0px;
}

#headerLogo img {
  margin: 0px;
}

#navagation {
  width: 204px;
  margin-bottom: 1px;
  float: left;
  margin-right: 1px;
}

.navIcon {
  float: left;
  margin-right: 2px;
  margin-bottom: 1px;
  padding: 0px;
}
.navButton {
  float: left;
  margin-bottom:1px;
  padding: 0px;
}

a.navButton:link {
  border: none;
}
a.navButton:visited {
  border: none;
}
a.navButton:hover {
  border: 1px solid #000000;
}

#mainContentArea {
  float: left;
  width: 570px;
  height: 711px;
  border: solid 1px #000000;
  background-color: #ffffff;
  margin-bottom: 3px;
}

#footer {
  height: 1px;
  margin-top: -1px;
  clear: both;
  overflow: hidden;
}

Thanks in advance!

-Tim