Jump to content

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


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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...