• Locked
No replies
Wed, 2013-07-31 10:21
Tojo
Tojo's picture
Offline
Regular
Last seen: 4 years 35 weeks ago
Timezone: GMT+1
Joined: 2011-10-21
Posts: 44
Points: 76

I use IE 9.
What I can't really understand is if I don't use display:block on "#nav a" declaration the
link tab is sticking out below the nav declaration.

So I hope somebody can explain why it looks as it does when I don't use display_block ?

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
       body
       {
          font-family:Arial, sans-serif;
          font-size:small;
          margin:0;
          padding:0;
       }
 
       #nav
       {
           float:left;
           width:720px;
           margin:0;
           padding:10px 0 0 46px;
           list-style:none;
           background:#FFCB2D;
       }
 
 
       #nav li
       {
          float:left;
          margin:0 1px 0 0; 
          font-family:"Lucida Grande", "sans-serif";
          font-size:80%;
       }
 
       #nav a
       {
           display:block;
           margin:0;
           padding:8px 16px;
           color:#333;
           text-decoration:none;
           border:1px solid #9B8748;
           border-bottom:none;
           background :#F9E9A9;
       }
 
   </style>
 
	<meta charset="utf-8" />
	<title>Chapter 3</title>
</head>
<body>
	<ul id="nav">
      <li id="t-intro"><a href="/">Introduction</a></li>
      <li id="t-about"><a href="about.html">About Lance</a></li>
      <li id="t-news"><a href="news.html">News &amp; Events</a></li>
      <li id="t-sponsors"><a href="sponsors.html">Sponsors</a></li>
    </ul> 
 
</body>
</html>

//Tony

Top
Tags: