Ppjini Posted May 29, 2014 Share Posted May 29, 2014 (edited) Hi everyone. I have been trying to solve a problem that top navigation css affects other div menus. (margin, background color) Here my all source are: <!doctype html> <style> @charset "UTF-8"; body { font: 9pt, Helvetica, Arial, sans-serif !important; font-family: Sans-Serif; margin: 0px; padding: 0px; border:0px; color: #333; } dl, dt, dd{margin:0px; padding:0px; border:0px;} dl, dt, dd a, a:visited, a:hover, a:focus{margin:0px; padding:0px; border:0px;} div {border:0;} Img {border:0;} Img Img a:visited, Img a:hover {border:0; margin:0; padding:0;} a {margin:0; padding:0; border:0;} ul, li{list-style:none; border:0px; padding:0px; margin:0px;} ul, li a, a:visited, a:hover, a:focus{list-style:none; border:0px; padding:0px; margin:0px;} #wrapper{width:1000px; *zoom:1; margin:0px; padding:0 10px 0 10px; text-align:center;} #wrapper:after{content:""; clear:both; display:block; } #top_logo{ width:1000px; height:70px; border:#000 1px solid; text-align:center; } #top_logo ul li a, a:visited, a:hover{ position:relative; width:140; height:32px; padding:19px 430px 19px 431px; } #top_lang{ *zoom:1; position:absolute; width:1000px; top:0px; padding:0px; margin-top:2px; float:right; } #top_lang:after{content:""; clear:both; display:block;} #top_lang ul{position:relative;} #top_lang ul li{float:right;} #top_lang ul li a, a:visited{ margin:0; padding:0 1px 0 0; border:0; display:block; width:17px; height:12px; } #top_menu{width:1000px; height:50px; margin-bottom:20px; clear:both; border:1px #FF0000 solid;} #top_menu ul{position:relative;} #top_menu ul li{float:left; text-align:center;} #top_menu a, a:visited{ margin:0; padding:0; border:0; display:block; width:166px; height:32px; padding-top:18px; background-color:#345a92; color:#fff; font-size:10pt; font-weight:bold; text-decoration:none; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } #top_menu a:hover{background-color:#0575b2; font-weight:bold;} #top_menu ul li:last-child a, a:visited{ margin:0; border:0px; padding:0; width:170px; height:32px; padding-top:18px; } #top_menu ul li:last-child a:hover{ background-color:#cf4e56; } #top_menu ul li:last-child a:after{content:""; clear:both;} /* Top Menu CSS end */ </style> <!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]--> <!--[if lt IE 9]> <script src="dist/iepp.min.js"></script> <![endif]--> <body> <div id="wrapper"> <!-- top start --> <!-- language selection start --> <div id="top_logo"> <ul> <li><a href="index.php"><img src="Images/Logo_KFCSED.jpg" title="HOME" alt="to main page"></a></li> <!-- <li><img src="Images/main_slogan.jpg" id="slogan"></li> --> </ul> </div> <div id="top_menu"> <ul> <li><a href="about_us.php">About Us</a></li> <li><a href="get_involved.php">Get Involved</a></li> <li><a href="project.php">Projects</a></li> <li><a href="Partners.php">Partners</a></li> <li><a href="contact_us.php">Contact Us</a></li> <li><a href="#">DONATE</a></li> </ul> </div> <!-- top_navi menu end --> <!-- top end --> </div> </body> </html> div id "top menu" affect other divs and change all background color - top_logo, and other main contents. (I put example preview of IE8) Could you explain me why this li a, a:visited affects others? Have no idea.......and it is killing me! Thanks in advance. Edited May 29, 2014 by Ppjini Link to comment Share on other sites More sharing options...
Ingolme Posted May 29, 2014 Share Posted May 29, 2014 I can't replicate your problem in any browser. The comma separates selectors, what you have there are two separate selectors. #top_menu ul li:last-child a, a:visited {} is equivalent to #top_menu ul li:last-child a {}a:visited {} The solution: #top_menu ul li:last-child a,#top_menu ul li:last-child a:visited {} Link to comment Share on other sites More sharing options...
kelly2marie Posted May 29, 2014 Share Posted May 29, 2014 First, remove the <style> tag that you have below the doctype. Second, you are missing the opening <html> tag that should immediately follow the doctype. Some browsers may have an issue with this. Especially Internet Explorer. The barebones html document should have at least the following: <!DOCTYPE html><html><head><meta charset="charset=utf-8"><title>Title goes Here</title></head> <body> </body> </html> If you want to use an Internal Style Sheet for your CSS, do so like this: <!DOCTYPE html><html><head><meta charset="charset=utf-8"><title>Title goes Here</title> <style type="text/css"> ..... put styles here...... </style></head> . . . . . As far as the a:visited, you do not have this as specific as it needs to be, so it will affect all hyperlinks that have been visited. For instance, #top_menu a, a:visited{ is not correct. Try using this: #top_menu a, #top_menu a:link, #top_menu a:visited {....} Then add: #top_menu a:hover {...} In general, when styling hyperlinks, you must specifiy the selectors in a specific order or they will not work correctly. The order is as follows: a:link a:visited a:hover a:active just remember to make each of the above selectors specific as I explained earlier. Try these changes I mentioned, and see what happens. Link to comment Share on other sites More sharing options...
Ppjini Posted May 29, 2014 Author Share Posted May 29, 2014 Thank you Ingolme, Kelly2Marie. You guys were right! the error was because of wrong selector order! Thank you soooooooooo much for your help. )) Link to comment Share on other sites More sharing options...
kelly2marie Posted May 31, 2014 Share Posted May 31, 2014 You bet! Keep learning! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now