CSS - Can I Set Control All Colors Of A Select Element?

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.

I am using a table bg mouseover CSS effect. In FireFox and my dreamweaver workspace, the page looks fine. However in IE, the section where I used the CSS effect has a slightly different color.



What could be the cause of this?

Thanks.

wait, i just figured out that its the image that is a different color...

so my new question is, why?

Hello all

I need help please :-)

I have a website I am making that will have various boxes and each box has to have a different link color and hover over color. My issue is that teh css does not work in terms of making all the links display the correct color as outlined in the css file. here is my css file maybe someone can tell me what is wrong (I will comment in the file also whats not working

Code:

<style type="text/css">

body {
 background-image: url(./images/pgbg.gif);
    color: #000000;
/*the below link attributes does not work */
   visited: color:#000000; text-decoration: none;
   link: color:#000000; text-decoration: none;
   focus: color:#000000; text-decoration: none;
   active: color:#000000; text-decoration: none;
   hover: color: #CC0000;
}

 .header{
background-image: url(./images/header.png);
background-color:#E6E6E6;
position:absolute;
width: 900px;
height: 100px;
left: 50px;
top: 5px;
}

.navbox1{
/*General Links Navbox*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 115px;
padding-left: 5px;
/*the below link attributes does not work */
 visited: color:#E6E6E6; text-decoration: none;
 link: color:#E6E6E6; text-decoration: none;
 focus: color:#E6E6E6; text-decoration: none;
 active: color:#E6E6E6; text-decoration: none;
 hover: color: #CC0000;
}

.navbox2{
/*Users Links Navbox*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 310px;
padding-left: 5px;
/*the below link attributes does not work */
 visited: color:#E6E6E6; text-decoration: none;
 link: color:#E6E6E6; text-decoration: none;
 focus: color:#E6E6E6; text-decoration: none;
 active: color:#E6E6E6; text-decoration: none;
 hover: color: #CC0000;
}

.loginbox{
/*Login Box*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 400px;
padding-left: 5px;
}

.content{
background-color:#E6E6E6;
position:absolute;
width: 700px;
height: 455px;
left: 250px;
top: 115px;
padding-left: 10px
}

.footer{
position:absolute;
width: 700px;
left: 100px;
top: 585px;
color: #D6E7D3;
}

</style>

I'm trying to get some simple css formatting to work and it works the way I want but not in explorer, it won't show my color/border/image anything attributes until I literally highlight the content via the mouse. And not always. Of course, it works fine in firefox and the css validates so.....please glance over it and see if you can find any errors. thanks!

here's the url
http://www.emotika.com/testing/test.htm

here's the source

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=iso-8859-1"><title>Untitled Document</title>

<style type="text/css">
<!--
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8em;

}

.arrows{
	margin: 0px 0px 2px 5px;
}

.headingrule{
	
	margin-right: 3em;
	margin-left: 1em;
	background-image: url(images/gradient.jpg);
	background-repeat: repeat-x;
}


#maincontent{
	margin-top: 1em;
	margin-bottom: 1em;
	margin-right: 200px;
}

.maincontentbox{
	background-color: #F0F0F0;
	border: 1px solid #CCCCCC;
	margin-left: 3em;
	margin-right: 3em;
	margin-top: 1em;
	margin-bottom: 1em;
	padding: 4px 8px;
}
#rightcontent{
	position: absolute;
	width: 200px;
	top: 1em;
	right: 0px;
	padding: 5px;
	border: 1px solid #CCCCCC;
}

#footer{
	background-color: #F0F0F0;
	clear: both;
	}

#wrapper {
	position: relative;
	width: 100%;
	margin: 0px;
}

-->
</style>
</head>

<body>

<div id="wrapper">
	
	<div id="maincontent">
		
		<div class="headingrule">
			<img class="arrows" src="images/arrows.gif">
			WELCOME...
		</div>
		
		<div class="maincontentbox">
			<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eros purus, suscipit porttitor, 
			dictum vel, congue id, eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
			inceptos hymenaeos. Nam dolor sapien, luctus ut, sollicitudin in, interdum in, mauris. Donec tempor. 
			Vivamus non dolor. Nam mollis, sem et ornare sollicitudin, felis eros imperdiet velit, et sollicitudin 
			metus arcu et lectus.  
			</p>
		</div>
	
		<div class="headingrule">
			<img class="arrows" src="images/arrows.gif">
			WEEKLY SPECIALS...
		</div>
		
		<div class="maincontentbox">
		 	<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eros purus, suscipit porttitor, 
			dictum vel, congue id, eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
			inceptos hymenaeos. Nam dolor sapien, luctus ut, sollicitudin in, interdum in, mauris. Donec tempor. 
			Vivamus non dolor. Nam mollis, sem et ornare sollicitudin, felis eros imperdiet velit, et sollicitudin 
			metus arcu et lectus.  
			</p>
		</div>
	
	<!--End Main Content Div-->
	</div>
	
	<!-- Absolutely Positioned Right Div {{ Removed from Document Flow }} -->
	<div id="rightcontent"> 
		
			CONTACT INFO
		
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
        <ul>
           	<li><a href="#">Link 1</a></li>
           	<li><a href="#">Link 2</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
	    <p> </p>
	</div>
	
	<!-- Footer Div Stretches Total Width -->
	<div id="footer">
			here's the footer
	</div>
<!--End Wrapper Div -->
</div>

</body></html>

hello everyone,

I can't get colors to show in firefox for the life of me. I have this used by a javascript mutliple times and need different colors. Help please, let me know if you need more info.

Code:

.signalButton{	
	width:80px;
	height:4;
	background-color: #0066FF;
}	

Thank You,
Wasim

Hey all. I am attempting to create a memberlist type page for my website that has a list on the left and when clicked it shows the members information on the right. I have the positioning down and everything but the problem I am running into is how it displays in IE and Firefox. In Firefox my list looks exactly how I would like it to and works fine. In IE however, the png images i used for the "Memberlist Title" and the bottom rounded edges image appear a different color than the list items... . Also, when clicked the list item stays highlighted with the rollover color and I cant figure out why.
Here is my css its at bestinefight.net/memberlist.php
Code:

/* Memberlist */
#navcontainer { 
width: 210px;
margin-left:109px;
}

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
width: 200px;
background-color: #4B4535;
padding: 0px 0px 0px 10px;
border: 0;
}

#navcontainer a:link, #navlist a:visited
{
font-size:10px;
color: #dbdfaa;
text-decoration: none;
border: 0;
padding: 0px 0px 0px 10px;
outline:none;
}

#navcontainer a:hover, #navlist a:active
{
font-size:10px;
background-color: #8B8063;
color: #dbdfaa;
border: 0;
text-decoration:none;
outline:none;
}

#profile_holder {
background-image:url(profile.png);
background-position:top;
background-repeat:no-repeat;
width:300px;
height:200px;
float:right;
margin-right:30px;
}

#profile {
width:260px;
height:180px;
margin: 40px auto;
}

#memberlist {
width:250px;
height:300px;
float:left;
}

#memberlist_title {
background-image:url(memberlist.png);
width:228px;
height:31px;
margin-left:100px;
}

#memberlist_bottom {
background-image:url(memberlist_bot.png);
height:21px;
width:210px;
margin-left:109px;
}

Here is the code for my page.

Code:

<div id="memberlist"><div id="memberlist_title"></div><div id="navcontainer">
<ul id="navlist">
<li><a href="#">Aslad</a></li>
<li><a href="#">Bilos</a></li>

<li><a href="javascript:ajaxpage('memberlist/Boustij.php', 'profile');">Boustij</a></li>
<li><a href="#">Brak</a></li>
<li><a href="#">Cydian</a></li>
<li><a href="#">Diablo</a></li>
<li><a href="#">Equilibruim</a></li>
<li><a href="#">Cydian</a></li>
<li><a href="#">Faller</a></li>
<li><a href="#">GoOsE</a></li>
<li><a href="#">Melik</a></li>

<li><a href="javascript:ajaxpage('memberlist/Mika.php', 'profile');">Mika</a></li>
<li><a href="#">Nekos</a></li>
<li><a href="#">Normanalata</a></li>
<li><a href="#">O'rian</a></li>
<li><a href="#">Pooga</a></li>
<li><a href="#">Romu'lis</a></li>
<li><a href="#">Sena</a></li>
<li><a href="#">Tepor</a></li>
</ul>

</div>
<div id="memberlist_bottom"></div>
</div>
<div id="profile_holder"><div id="profile"></div></div>

I'd like to be able to make some links on my page one color and others a different color so they show up appropriately on different backgrounds. how would i go about doing this?

thanks

Excuse me but i am a little thick on this one: How do I create different colored link style for say a:

1. navigation bar
2. footer bar
3. main body

Does making classes make sense in this situation

doug

Suppose I have the following:

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" xml:lang="en" lang="en">
  <head>
    <title>My site</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      #outer_div { 
        width: 800px;
        height: 300px;
        background-color: red; }
      .interior { background-color: #ffffff; }
    </style>
  </head>
  <body>
    <div id="outer_div">
      <div class="interior">
        <p>Hello I am some text. </p>
        <p>How are you today?</p>
        <p>Would you like some waffles?</p>
      </div>
    </div>
  </body>
</html>

The way this appears in FireFox (I haven't tested in other browsers yet) is that the 3 lines print on a white background that spans the width of the browser and then sits on top of the red background.

The way that I would like it to appear is for the white background to extend only as far as the longest line. Also, I can't assume that it will only be paragraph tags, it may be links, images, headers, lists, well anything.

My question is how can I achieve this? Basically I don't want the inner div to automatically be as wide as the outer div but only as wide as it needs to be.

Hey everyone. I posted this in another forum, but we were unable to get the issue resolved, so I thought I would try posting here.

I am having trouble getting some colors to work on my pages with CSS. I went through and made an index.html, in which I setup all my layout, graphics, colors, etc. I then took that and turned it into header.php and footer.php, with a new index.php file.

My problem is that now when I upload up index.php to the server and go to view it, all the text formatting and layout of the page works fine, but the background, heading, link, etc. colors are just showing up as the defaults. The colors that I am working with are not from the websafe pallet, but I think that they are supported by most browsers (519A00, 5B4C34, 33435A, E5EDF9). Now that I think about it, it cant be browser support because it all works just fine in the index.html file.

The link to the previous forum post is here There was a rather long discussion on possible causes there, but we never found a solution. I would really appreciate any help you may be able to offer.

Thanks in advance,

-Jonathan

I see that CSS3 will finally have support for this, but I thought I'd stumbled upon support in CSS1 or CSS2(.1) also. I even printed it out, though I can't find it now.
Does anyone know how to alternate row colors in CSS2.1 without resorting to tr.row1 and tr.row2 or scripting?

Hi,

Using CSS how can I set an individual bit of text to have a different link color then the rest of the links on my website?

Thanks

I have a CSS that manages my site, but I've got a list of links that are dynamicly created with php/mysql. I have two lists that I would like to use non-CSS colors for their links.

Is there a way to override the CSS to force certain colors on the links? I've tried using the normal <p> or style settings, but the main links portion of the CSS always takes precedence and I can't seem to make it work for me.

A little background for you...the lists are as follows:
1 - a list of currently open jobs in the company
2 - a list of all jobs in the company

Both lists are also links to the job descriptions. List 1 is created based on whether the database has the job flagged as open, so its never static. List 2 is not static either because it lists the jobs in the database.

Greetings all.

I am building a site which displays data in tables, with different background colors and different text colors. I am using CSS for everything, and it's working out great. Very happy with it so far.

What I want to do, and can't seem to figure out, is link / visited colors. In each line of data, some of the columns are links. I want to set the link text color to the same as the non-link text color.

I can override the text color easily enough. If I want a row to be white on red, I do that by saying: <tr style="background-color: #f00; color: #fff" >. I cannot figure out how to change a link color. The cells in the row that are links, I want to make them white on red also. Not just the default link color for the page.

Any help would, of course, be greatly appreciated.

Thanks,
Tom

I need to make a list of these movies in CSS, and I'm a bit of a noob.:
Pulp Fiction
The Matrix
Lost In Translation
V for Vendetta
Fight Club

It needs to have the following:
*** a separate CSS document to be the style sheet
*** horizontal lines and blank lines between items as described above
*** assorted colors for different pieces of information
*** class selectors to cause some pieces of information to be Underlined and/or in large type
*** the enlarged first-letter effect
*** a horiziontal line in an in-line style as described above
*** an assortment of generic fonts

Can someone help me out with this? I know its easy but I'm struggling with CSS.

Thanks!