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.
