CSS - Need A Roll Over Type Thing

I moved internal css to an external file and then linked the page to that file and lost my hand cursor on links. How do i get it back. Right now the arrow cursor remains when links are rolled over. Can be viewed at.

kopertone.com/newsite/index1.html

Also, in fire fox, I want dotted lines under my text links when rolled over, but not image links; how do I remove the dotted lines under my image links? Thanks!

and that thing is of course to cause trouble becasue it can't stay compliant, now as much as I would love to just dismiss IE entirly and focus on happier browsers like Firefox and Opera, It seems that the normal human world loves their IE 6 and even IE 5 so I have this
Here now you'll note that if you are looking through both browsers that a php script tacks on an additional stylesheet according to the browser (assuming the script is working) but they both use the same base layout, now with the exception of mabye.. two lines the css is right now basically identical... So I am left to ask. What is it in the base css (layout.css) that is causing all the rucus, I know that IE can't read the display: hidden; but I figured it could atleast read some of the other stuff, any help on the debug? thanks fullphaser

Say my page has this layout

<div class="newsheader"><a class="white" href="...">devshed.com</a></div>

and my sheet looks like this,

div.newsheader { font-family: Verdana;
color: white;
background-color: #EFBE56;
}
a:link {color: #C6930A;}
a.white: link {
font-family:Verdana;
color: white;
}

Couldn't the same be accomplished by

div.newsheader a {color: white}
and
<div class="newsheader"><a href="...">Devshed.com</a></div>

Notice I don't have to declare a class for the anchor tag. If I have a lot of these to change it could be a big time saver. But, which is better for CSS compatability, code readability, and possible future changes. Maybe its all about my personal preferences.

Thanks

new to the world of css and now working on a shell for a website I'm doing.

here is the css
PHP Code:
 html, body{ 
 margin:0; 
 padding:0; 
 }
 
h1, h2, h3, h4, h5, h6 {
 color: #bf9060;
}

img {
    padding-bottom: 2px;
}
 
#pagewidth{ 
 width:100%; 
  min-width: 500px; 
  
} 
 
#header{ 
 height:88px; 
 width:100%; 
 background:#ccae8f; 
 background-image: 
 url("/images/pillowback3.jpg");
 background-repeat: repeat-x;
 }
#navcontainer
{
margin: 0;
padding: 0;
height: 25px;
width: 100%;
}

#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;

}

#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer ul li a
{
background: #ffffff;
width: 125px;
height: 18px;
border: 1px solid #ccae8f;
padding: 0;
margin: 0;
color: #000000;
text-decoration: none;
display: block;
text-align: center;
font: normal 14px/22px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover
{
color: #ffffff;
background: #806c59;
}

#navcontainer a:active
{
background: #806c59;
color: #ffffff;
}

#navcontainer li#active a
{
background: #c60;
border: 1px solid #c60;
color: #fff;
} 





and the list
PHP Code:
<div id="navcontainer">
            <ul id="navlist">
            <li><a href="/pillows.php" title="Everything you need for your pillow needs">Home</a></li>
            <li><a href="/build/index.php" title="Start here for the Best Pillows the net has to offer">Build</a></li>
            <li><a href="/samples/index.php" title="Pick up to 8 samples ">Samples</a></li>
            <li><a href="/products/index.php" title="See our full line of Products">Products</a></li>
            <li><a href="/about/index.php" title="Meet our staff. How PillowWorks works.">About</a></li>
            <li><a href="/contact/index.php" title="Contact us for any reason">Contact</a></li>
            </ul>
            </div> 





as you can see i'm using px to style the size of the elements, but that isn't very liquid

This is, without a doubt, the weirdest think I've ever seen when dealing with IE and CSS. Have a look at this webpage in IE and Firefox:

http://atlbloggers.net

Looks fine in FF, no? But in IE, there's this giant white 'box' floating over the content in my #textarea tag. As near as I can tell, its being caused by this CSS:

Code:

#pageContainer
{
	border-color: #418ade;
	background-color: #fff;
}

specifically, the background-color item. Comment that out, the site looks fine in IE. Add it back in, it breaks in IE again. I'd like to be able to set the bg color on the pagContainer tag cause I want to set a different background color for the body...

Has anyone ever seen anything like this? Is it something I'm doing wrong? Please, HELP!!!!!

Hi all,

http://www.jaysonsgroup.com/zpip2/z.html
- please see the bottom four links (home, glossary, contact, credits)

The HTML is as follows:

Code:

	<div class="centerlinks">

		<table align='center'>
		<tr>
		<td>
                     <ul>
                     <li><a href='#'>Home</a></li>
                     <li><a href='#'>Glossary</a></li>
                     <li><a href='#'>Contact</a></li>
                     <li><a href='#'>Credits</a></li>
                     </ul>
	         </td>
		</tr>
		</table>

	</div>

The CSS:

Code:

	.centerlinks {
		float: left;
		width: 550px;
		text-align: center;
	}

	.centerlinks ul {
		list-style-type: none;
	}

	.centerlinks li {
		float: left;
		padding-left: 10px;
		padding-right: 10px;
	}

As you can see, what I want is a simple UL list that is horizontal, plain text, and centers within the 550px div that surrounds it , even if I add a fifth <li> link in the future.

On Internet Explorer, the <table align='center'> hacks fixes the problem. But it doesn't work on Firefox. Any ideas how I can center this?

(I know I can use padding-left or margin-left but then this isnt a good solution when more menu items are added to that list)


Thanks in advance!!

Is there away, using CSS techniques, to have "hots pots" on an area (that perhaps has a background image), where mousing over them "turns on" a (smaller) image at that spot, and when the mouse has moved out of the area, the image "turns off"? Sort of like a large image with "secret" hot-spots that reveals secret images when you mouse over them? Sorry about all the "quotes"...

<div type="test">
I am interested in the type attribute. The reason is this...

I have a Janus GridEx on my asp.net form and I want to add some css styles to it. There is no ID defined, nor a class of which I can inherit. I can't modify the code for this tag so I was hoping I could use the type attribute to identify this div in my css....

This is the code for the DIV I'm talking about:
Code:

<div type="4" style="position:relative;padding:0px 0px;width:100%;overflow-x:auto;overflow-y:auto;">

Anyone has any experience with this?

Thanks!

If i want to use the strict DTD, is there an alternative to the target attribute on the <a> link which you are no longer allowed to use?

Hello.

I'm trying to do this:
Code:

input, textarea, select { COLOR: #000000; FONT-FAMILY: Verdana, Arial, 
helvetica; FONT-SIZE: 10px! important; border: 1px #000000 solid;
} 

input[type=radio] {COLOR: #000000; FONT-FAMILY: Verdana, Arial, 
helvetica; FONT-SIZE: 10px! important; border: 0px #000000 solid;} 

input[type=checkbox] {COLOR: #000000; FONT-FAMILY: Verdana, Arial, 
helvetica; FONT-SIZE: 10px! important; border: 0px #000000 solid;} 

But my checkboxes and radiobuttons still has a black border. WHY!?

I include two diffrent css-files in my webpage. And "input, textarea, select" is set again in the second css-file. The reason for that system is that the second css-file is diffrent depending on what design the user has chosen... Is that a problem?

Hello,

I have a perl script, and would normally do this with tables, but since tables are such a BAD THING &trade; I've been trying to this with CSS, and I've spent too long on it thus far, so I'm looking for a bit of an assist
Code:

+----+-------------+--------------+
| id | date 1      | date 2       |   
|    |             |              |
+----+-------------+--------------+

what's the best way to accomplish this?
--Ax

Hi,

I am trying to have different type of lists on the same page by using different CSS. Basically I want to define a general list to be used through out the whole website, and another list to be used only within a box. I wish that the list in the box does not contain the bullets. However setting the list-style-type: none; is not working as sugested in the following link: http://css.maxdesign.com.au/listutorial/02.htm

Here is my code: Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <style>

      ul{
        list-style-type: none;
        padding: 0;
        margin: 0;
      }

      li {
        background-image: url(bullet.png);
        background-repeat: no-repeat;
        background-position: 0 .8em;
        padding-left: 1em;
        line-height: 14pt;
      }

      div.box{

        border: 1px solid red;
      }

      div.box ul{
        list-style-type: none;
      }

    </style>
  </head>
  <body>

    <ul>
      <li><a href="#">Milk</a></li>
      <li><a href="#">Eggs</a></li>
      <li><a href="#">Cheese</a></li>
      <li><a href="#">Vegetables</a></li>
      <li><a href="#">Fruit</a></li>
    </ul>

    <div class="box">
      <ul>
        <li><a href="#">Milk</a></li>
        <li><a href="#">Eggs</a></li>
        <li><a href="#">Cheese</a></li>
        <li><a href="#">Vegetables</a></li>
        <li><a href="#">Fruit</a></li>
      </ul>
    </div>

  </body>
</html>

Thanks for any sugestions, best regards,
Sim085

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

I've tried several differnt doc types, but all of them prevent my left menu items' text to change colors when you hover over the text.

Is this common? Is it my code?

You'll also notice the 2 pages below have some general layout css issues, like too much white space above the grey line AND though they both use the same right bar (I uses a PHP include) the format is different in both. The green line is the toughest...it won't extend the height of the page.

Any ideas?

I attached my style sheet as well. thanks.

http://bowtree.org/latest/luminaries.php
http://bowtree.org/latest/index.php

I am having no luck using this rule to set text with-in the body tags correctly.

body{font-family: sans-serif; font-size: 11px; color: #CC0000}

This line will set the color and family of the text but it doesnt effect the typeface's size or any other parameters either. I have tried both pt's and px's but no luck. When I use the <span> configuration for text all is fine. But when I use a rule as above something doesn't work.

Any ideas?

Thanks