Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Some CSS link styling help needed (menu CSS affecting other links)

T

torndownunit

macrumors regular
Original poster
Jan 4, 2009
242
0
Hey guys. This is probably a pretty simple problem, but I can't seem to figure out what's going on.

I implemented this menu: http://www.dynamicdrive.com/style/csslibrary/item/inverted-modern-bricks-menu/ into a site I am working on.

The menu itself is working great. But the other links on my page seem to be taking on it's link styling. EG the default links are styled like the links in the menu. I hope I have explained that properly.

Is there a way to adjust the code so this won't happen? I really like the look of the menu. I haven't had this problem occur with a pre-made menu like this before, so I am not sure how to fix it.

Code: 
#tabs { width:100%; font-size:105%; line-height:normal; border-bottom:1px solid #666; margin-bottom:1em; /*margin between menu and rest of page*/
	overflow:hidden; float: left; }
#tabs ul {
	margin:0;
	padding:10px 10px 0 0px;
	list-style:none;
	
	}
#tabs li {
	display:inline;
	margin:0;
	padding:0;
	}
#tabs a {
	float:left;
	background:url(../media/left.png) no-repeat left top;
	margin:0;
	padding:0 0 0 6px;
	text-decoration:none;
	}
#tabs a span {
	float:left;
	display:block;
	background:url(../media/right.png) no-repeat right top;
	padding:6px 15px 4px 6px;
	margin-right:2px;
	color:#FFF;
	}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
	}
#tabs a:hover {
	background-position:0% -42px;
	}
#tabs a:hover span {
	background-position:100% -42px;
	}
/*menu2*/
#modernbricksmenu2{
padding: 0;
width: 100%;
border-top: 5px solid #000; /*Brown color theme*/ 
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
#modernbricksmenu2 ul{
margin:0 0 0 100px;
padding: 0;
list-style: none;
}
#modernbricksmenu2 li{
display: inline;
margin: 0 4px 0 0;
padding: 0;
text-transform:uppercase;
}
#modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 15px;
background-color: #06c; /*Brown color theme*/ 
border-top: 1px solid #000;
}
#modernbricksmenu2 a:hover{
background-color: #000; /*Brown color theme*/ 
color: white;
}
#modernbricksmenu2 #current a{ /*currently selected tab*/
background-color: #000; /*Brown color theme*/ 
color: white;
border-color: #000; /*Brown color theme*/ 
}
 
The CSS looks like it's using a proper level of specificity in its selectors so as long as you aren't using those same ids anywhere else there shouldn't be an issue. You should also make sure any divs or the like are properly closed off so that the CSS styling isn't effecting tags farther down the page than you intend. That's my best guess without see the HTML. make sure to run the HTML validator to ensure tags are getting closed properly.
 
I ran it through the validation, but I mainly just see some coding errors I need to fix ( and would get to ). I can't see anything that would be causing the link problem though (keeping in mind I am a beginner).

Going to fix a couple of things, and post new html.
 
Ok, I get 4 errors running the code through the validator now. The problem is I am not sure how they apply to the problem.

here is the body of my document:

Code: 
<body>
		<div id="wrapper">
		<div id="banner"></div>
			<div id="content">
<div id="modernbricksmenu2">
<ul>
<li id="current" style="margin-left: 1px"><a href="index.html" title="Home">Home</a></li>
<li><a href="howitworks.html" title="How It Works">How It Works</a></li>
<li><a href="operation.html" title="Operation and Maintenance">Operation and Maintenance</a></li>
<li><a href="faq.html" title="F.A.Q.">F.A.Q.</a></li>	
<li><a href="contact.html" title="Contact">Contact</a></li>	
<li><a href="links.html" title="Links">Links</a></li>
</ul>
					<p><br />
					</p>
					<div align="center">
						<table width="776" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<td width="517">
									<div align="left">
										<h1>SIMPLY THE BEST...</h1>
										<div class="just">
											<p>INCINOLET electric incinerating toilet incinerates all human waste immediately to clean, germ-free ash, as little as a tablespoonful each use. Raw waste is not accumulated and is not seen. Water is not used in this toilet and nothing is drained out. INCINOLET is easy to install and can be used in any climate.</p>
										</div>
										<h2>INCINOLET GIVES YOU:</h2>
										<span class="bluehead"><span>CONVENIENCE</span></span> - Put INCINOLET wherever you need it as the main toilet in your home, cabin, houseboat or as an additional toilet in the basement, barn or poolside. INCINOLET is compact enough to go almost anywhere!
										<div class="just">
											<p><span class="bluehead">EFFICIENCY</span> - INCINOLET uses electric energy efficiently - demands power only after its use and may remain unused for months without ill effect.</p>
										</div>
										<div class="just">
											<span class="bluehead">QUALITY</span> - INCINOLET is built of stainless steel and uses highest quality controls for long life and ease of maintenance</div>
										<div class="just">
											
										</div>
									</div>
								</td>
								<td valign="top" width="149">
									<div class="img_spacer">
										<img src="media/incinolet.jpg" alt="" width="249" height="325" border="0" /></div>
								</td>
							</tr>
						</table>
					</div>
					<p></p>
					<div class="footer">
						<p>site design by side effects - all materials ©2009 Incinolet</p>
					</div>
				</div>
			
		</div>
		
	</body>

here are the errors I get:

# Error Line 70, Column 8: end tag for "div" omitted, but OMITTAG NO was specified

</body>


You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
# Info Line 20, Column 2: start tag was here

<div id="wrapper">

# Error Line 70, Column 8: XML Parsing Error: Opening and ending tag mismatch: div line 20 and body

</body>

# Error Line 72, Column 7: XML Parsing Error: Opening and ending tag mismatch: body line 19 and html

</html>


# Error Line 72, Column 7: XML Parsing Error: Premature end of data in tag html line 3

</html>
Click to expand...

p.s. I forgot to mention, I was trying to put a text link in that footer in the html when I was having problems. It's not shown there because I removed while trying to figure out the problem.
 
Yea, it looks like you're missing the closing tag for div id="modernbricksmenu2" Add a closing div tag right after the closing ul tag for the menu in there. That should help clear up the errors and help with the CSS issue at hand.
HTML: 
<div id="modernbricksmenu2">
<ul>
<li id="current" style="margin-left: 1px"><a href="index.html" title="Home">Home</a></li>
<li><a href="howitworks.html" title="How It Works">How It Works</a></li>
<li><a href="operation.html" title="Operation and Maintenance">Operation and Maintenance</a></li>
<li><a href="faq.html" title="F.A.Q.">F.A.Q.</a></li>	
<li><a href="contact.html" title="Contact">Contact</a></li>	
<li><a href="links.html" title="Links">Links</a></li>
</ul>
</div>
The last line from above is what you need to add.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back