Jump to content

Need a help for css: Navigation li affects other Div tags all!


Ppjini
 Share

Recommended Posts

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>
c0048768_538702c9588bb.jpg
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 by Ppjini
Link to comment
Share on other sites

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...