CSS deprecation issue???

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
nickelsto
Forum Newbie
Posts: 5
Joined: Fri Oct 29, 2004 10:40 am

CSS deprecation issue???

Post by nickelsto »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I don't know what this might be so thought it might be a deprecation issue.  But if someone could explain wtf could be happening with my css I would be greatly appreciative.  This is not the first time I am pulling my hair out over this.

I have posted my html and css below.  What happens is that characteristics I put for one element will end up being the characteristics for the other element.  For example, the first item in the li class=ucsclnk shows up fine, with background 000, color 069, etc.  But then the second on the list takes on the characteristics of the #navcontainer ul a:link, #DE1010 background, etc.  What gives?

ANY help would be very greatly appreciated.

Thanks.


[b]HTML[/b]
[syntax="html"]

<div id="navcontainer">
<ul id="navlist">
<li><a href="#" id="current">Home</a></li>
<li><a href="directors.html">Directors</a></li>
<li><a href="cpe.html">Events</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="presidents.html">Presidents</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

<div id="ucsc">
<ul class="ucsclst">
<li class="ucsclnk"><a></a></li>
<li class="ucsclnk"><a></a></li>
</ul>
</div>

CSS

Code: Select all


#navcontainer ul a:link, ul a:visited {
	color: #fff;
	border:none;
	background-color: #DE1010;
	text-decoration: none;
	line-height:3.25em;
	text-align:center;
	font-weight:bold;
	font-family:Trebuchet ms, Verdana, Arial, Helvetica, sans-serif;
}

#ucsc {
	border:2px solid red;
	padding: 5px;
	margin-bottom:5px;
	color:#00f;
	font-weight:bold;
}

ul.ucsclst {
	
	list-style-type:none;
	padding-top:5px;
}

li.ucsclnk a:link, a:visited {
	color:#069;
	text-decoration:none;
	background-color:#000;
}

li.ucsclnk a:hover {
	color:#000;
	text-decoration:underline;
	background-color:#000;
}

feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
RhapX
Forum Commoner
Posts: 30
Joined: Mon Dec 05, 2005 5:24 pm
Location: Seattle, Washington

Post by RhapX »

I am not quite sure what you're saying here. It seems to work fine from what I read. Maybe I am missing something. Here is a cleaner version of your code:

Code: Select all

<html>
<head>
    <title>nickelsto</title>
</head>
<body>
<div id="navcontainer">
    <ul>
        <li><a href="#" id="current">Home</a></li>
        <li><a href="directors.html">Directors</a></li>
        <li><a href="cpe.html">Events</a></li>
        <li><a href="links.html">Links</a></li>
        <li><a href="presidents.html">Presidents</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
<div id="ucsc">
    <ul>
        <li><a>Test</a></li>
        <li><a>Test</a></li>
    </ul>
</div> 
</body>
</html>

Code: Select all

<style type="text/css">
    #navcontainer ul li a {
        color: #fff;
        border:none;
        background-color: #DE1010;
        text-decoration: none;
        line-height:3.25em;
        text-align:center;
        font-weight:bold;
        font-family:Trebuchet ms, Verdana, Arial, Helvetica, sans-serif;
    }
    
    #ucsc {
            border:2px solid red;
            padding: 5px;
            margin-bottom:5px;
            color:#00f;
            font-weight:bold;
    }
    
    #ucsc ul {
           
            list-style-type:none;
            padding-top:5px;
    }
    
    #ucsc ul li a:link, a:visited {
            color:#069;
            text-decoration:none;
            background-color:#000;
    }
    
    #ucsc ul li a:hover {
            color:#000;
            text-decoration:underline;
            background-color:#000;
    } 
</style>
nickelsto
Forum Newbie
Posts: 5
Joined: Fri Oct 29, 2004 10:40 am

Post by nickelsto »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Thanks for cleaning up the post.  I thought I had used the [quote]code[/quote] thing but I guess not.

Anyway, thanks also for the response and attempt to help.  I discovered that the basic problem was that I was not using the full selector group.  In other words, this


[syntax="css"]#ucsc ul li a:link, #ucsc ul li a:visited {
            color:#069;
            text-decoration:none;
            background-color:#000;
    } 
instead of this

Code: Select all

#ucsc ul li a:link, a:visited {
            color:#069;
            text-decoration:none;
            background-color:#000;
    } 
Once I put full selectors on all the CSS it all worked. Beforehand I had wierd things going on.

Thanks again


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

nickelsto wrote:Thanks for cleaning up the post. I thought I had used the
code
thing but I guess not.
You did use

Code: Select all

. Unfortunately that is not the appropriate tag for what you have posted. Snippets which are primarily CSS (or what you are talking about) go in [syntax="css"]...
. Likewise, snippets which are primarily HTML (or what you are talking about) go in

Code: Select all

...
. PHP is special, it goes in[/syntax]

Code: Select all

..
.
nickelsto
Forum Newbie
Posts: 5
Joined: Fri Oct 29, 2004 10:40 am

Post by nickelsto »

whoops, ok got it. sorry about that.
Post Reply