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

Discussion in 'Web Design and Development' started by torndownunit, Jun 9, 2009.

  1. torndownunit macrumors regular

    Joined:
    Jan 4, 2009
    #1
    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*/ 
    }
    
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #3
    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.
     
  4. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #4
    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:

    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.
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    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.
     
  6. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #6
    Thanks! I figured it was something pretty simple, I just couldn't spot it.
     

Share This Page