CSS Selectors problems

**be21** · Dec 1, 2008 14:03

Basically i am having trouble with selectors in my code. All the links on my page are displaying properties from other selectors even when they already have a selector of their own.

My foot navigation is displaying the properties from my logo link, like the background, width, height etc.

Can anyone point out where I went wrong.

the HTML:

HTML Code:

	<style>@import url("css/lmw-screen2.css");</style>
      
	<link rel="stylesheet" type="text/css" href="" media="print" />
	
	<title>LMW Photography | The Portfolio Of Lee Watkins</title>
</head>

<body id="lmw-portfolio">

<div id="lmw-nav-bg">&nbsp;</div>
<div id="lmw-main-nav">
	<ul id="lmw-navlist">
		<li id="portrait"><a href="index2.html">&nbsp;</a></li>
		<li id="landscape"><a href="index2.html">&nbsp;</a></li>
		<li id="abstract"><a href="index2.html">&nbsp;</a></li>
		<li id="portfolio"><a href="index2.html">&nbsp;</a></li>
		<li id="aboutme"><a href="index2.html">&nbsp;</a></li>
		<li id="contact"><a href="index2.html">&nbsp;</a></li>
	</ul>
</div>

<div id="lmw-logo-container">
	<div id="lmw-logo-link"><a href="index2.html">&nbsp;</a></div>
</div>

<div id="lmw-container">
	<h1 class="lmw-content-head"><em>LMW, Your Okanagan inspired photographer.</em><b>Do your eyes a favour, peer through LMW's digital lense</b></h1>
	
	<div id="lmw-main-content">&nbsp;
	</div>
	
	<div id="lmw-footer">
		<ul id="lmw-foot-nav">
			<li><a href="index2.html">Portrait</a></li>
			<li><a href="index2.html">Landscape</a></li>
			<li><a href="index2.html">Abstract</a></li>
			<li><a href="index2.html">Portfolio</a></li>
			<li><a href="index2.html">About Me</a></li>
			<li><a href="index2.html">Contact</a></li>
		</ul>
	</div>
</div>

</body>

</html>

the CSS:

Code:

@charset "utf-8";

#lmw-portrait {background: #000 url(../images/lmw-babyfingers.jpg) top center no-repeat;}
#lmw-landscape {background: #000 url(../images/lmw-bg-foothills.jpg) top center no-repeat;}
#lmw-abstract {background: #000 url(../images/lmw-bg-notrus.jpg) top center no-repeat;}
#lmw-portfolio {background: #000 url(../images/lmw-gravestatue.jpg) top center no-repeat;}
#lmw-aboutme {background: #000 url(../images/lmw-bg-about.jpg) top center no-repeat;}
#lmw-contact {background: #000 url(../images/lmw-bg-landscape.jpg) top center no-repeat;}



/*---------------------------------------------- Main Nav ----------------------------------------------*/
#lmw-nav-bg {
width:100&#37;;
height:35px;
background:#000;
margin:10px 0 0 0;
	
filter:alpha(opacity=65);
-moz-opacity:0.65;
-khtml-opacity: 0.65;
opacity: 0.65;
}

#lmw-main-nav {
width:850px;
margin:0 auto;
text-align:left;
position:relative;
height:35px;
top:-35px;
}

#lmw-main-nav ul {
text-align: left;
list-style-type: none;
}

#lmw-main-nav ul li {float: left;}

/*---------------------------------- Nav Portriat ----------------------------------*/
#portrait a, a:visited {
height: 35px;
width: 83px;
border:none;
display:block;
margin:0 5px 0 0;
text-decoration: none;
background: url(../images/lmw-portrait.gif) 0 0 no-repeat;
}

#portrait a:hover {
margin:-5px 5px 0 0;
border-top:solid 5px #66ffcc;
background-position: -83px 0;
}
/*---------------------------------- Nav Landscape ---------------------------------*/
#landscape a, a:visited {
height: 35px;
width: 102px;
border:none;
display:block;
margin:0 5px 0 0;
text-decoration: none;
background: url(../images/lmw-landscape.gif) 0 0 no-repeat;
}

#landscape a:hover {
margin:-5px 5px 0 0;
border-top:solid 5px #66ffcc;
background-position: -102px 0;
}
/*---------------------------------- Nav Abstract ----------------------------------*/
#abstract a, a:visited {
height: 35px;
width: 91px;
border:none;
display:block;
margin:0 5px 0 0;
text-decoration: none;
background: url(../images/lmw-abstract.gif) 0 0 no-repeat;
}

#abstract a:hover {
margin:-5px 5px 0 0;
border-top:solid 5px #66ffcc;
background-position: -91px 0;
}
/*---------------------------------- Nav Portfolio ---------------------------------*/
#portfolio a, a:visited {
height: 35px;
width: 89px;
border:none;
display:block;
margin:0 5px 0 0;
text-decoration: none;
background: url(../images/lmw-portfolio.gif) 0 0 no-repeat;
}

#portfolio a:hover {
margin:-5px 5px 0 0;
border-top:solid 5px #66ffcc;
background-position: -89px 0;
}
/*---------------------------------- Nav About Me ----------------------------------*/
#aboutme a, a:visited {
height: 35px;
width: 97px;
border:none;
display:block;
margin:0 5px 0 0;
text-decoration: none;
background: url(../images/lmw-about.gif) 0 0 no-repeat;
}

#aboutme a:hover {
margin:-5px 5px 0 0;
border-top:solid 5px #66ffcc;
background-position: -97px 0;
}
/*----------------------------------- Nav Contact ----------------------------------*/
#contact a, a:visited {
height: 35px;
width: 82px;
border:none;
display:block;
margin:0 5px 0 0;
text-decoration: none;
background: url(../images/lmw-contact.gif) 0 0 no-repeat;
}

#contact a:hover {
margin:-5px 5px 0 0;
border-top:solid 5px #66ffcc;
background-position: -82px 0;
}
/*-------------------------------------------- Main Nav End --------------------------------------------*/

/*---------------------------------------------- lmw Logo ----------------------------------------------*/
#lmw-logo-container {
width:850px;
height:158px;
margin:0 auto;
text-align:left;	
}

#lmw-logo-link {
width:246px;
height:154px;
}

#lmw-logo-link a:link, a:visited {
width:246px;
height:154px;
display:block;
border-bottom: solid 4px #ccc;
background: url(../images/lmw-logo.png) 0 0 no-repeat;
}

#lmw-logo-link a:hover {
background-position: -246px 0;
}
/*-------------------------------------------- lmw Logo End --------------------------------------------*/

/*-------------------------------------------- lmw Container -------------------------------------------*/
#lmw-container {
width:850px;
margin:55px auto 0 auto;
text-align:left;
}
/*------------------------------------------ lmw Container End -----------------------------------------*/

/*-------------------------------------------- lmw Main Head -------------------------------------------*/
.lmw-content-head em {
color:#333;
padding:5px 5px;
margin:0 10px 0 0;
background:#66ffcc;
}

.lmw-content-head b {
color:#fff;
float:left;
padding:5px 5px;
margin:-3px 10px 0 10px;
font-size:17px;
font-weight:normal;
font-style:italic;
background:#464646;
}

.lmw-content-head {
width:500px;
height:65px;
background:#fff;
padding:15px 15px 10px 15px;
border-bottom:solid 4px #ccc;

font-family: Georgia, serif;
font-size: 20px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;
}
/*------------------------------------------ lmw Main Head End -----------------------------------------*/

/*--------------------------------------------- lmw Footer ---------------------------------------------*/
#lmw-footer {
	width:850px;
}
#lmw-foot-nav {list-style-type:none;}
#lmw-foot-nav ul li {float:left;}

#lmw-foot-nav li {
	height:35px;
	border:none;
	background:none;
	text-decoration:none;
}
#lmw-foot-nav a, a:visited {
	text-decoration:none;
	color:#fff;
}
/*------------------------------------------- lmw Footer End -------------------------------------------*/

**smadeira** · Dec 2, 2008 10:25

Is the site live somehwere that we can play with it?

**Daniel0** · Dec 2, 2008 13:14

You call it <li id="portrait">, but your selector is #lmw-portrait for instance.

**be21** · Dec 2, 2008 19:02

I don't have it live anywhere sorry.

#lmw-portrait is a selector for the body tag only applying to the background of the page.

#portrait a, a:visited is only used for the navigation list.

User Tag List

Thread: CSS Selectors problems

Thread Tools

Display

CSS Selectors problems

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions