An example of an automatically centered navigation bar and related issues DIV+CSS_CSS/HTML

This is a navigation bar I just made. In order to center the four LINKs, I made it like this, but after finishing it, I found a lot of problems. I will write it down and share it with everyone!

First of all, let’s take a look at this navigation bar!

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>test zishu</title> <style> /*zishu.cn*/ *{ margin:0; padding:0;} body{ font-size:12px; font-family:Verdana, "宋体", Arial; margin:100px 0;} a:link,a:visited{color:#000; text-decoration: none;} a:hover,a:active{color:#000;text-decoration: none;background-color: #FEFC6E;} #nav{height:24px; border-bottom:1px solid #D28A05; border-top:1px solid #D28A05;background-image: url(http://www.zishu.cn/attachments/month_0609/j2006912180.jpg);background-color: #FF9900; text-align:center;} #nav li{ display:inline;border-right:1px solid #C97802;border-left:1px solid #C97802;margin-right:-1px; padding:6px 15px 5px 15px; line-height:25px; border-bottom:0px none; border-top:0px none;} #nav li a{margin:1px;} p{ margin:50px 0; text-align:center; } </style> <div id="nav"> <ul> <li><a href="http://www.kijiji.cn" target="_blank">Homepage</a></li> <li><a href="http://www.kijiji.cn/fabu" target="_blank">Publish information</a></li> <li><a href="http://www.kijiji.cn/wo/xxgl" title="在这里可以管理已经发布的信息和个人资料" target="_blank">My Customer Collection</a></li> <li><a href="http://blog.kijiji.com.cn/help/" target="_blank">Help</a></li> </ul> </div> <p><a href="http://www.zishu.cn" target="_blank">www.zishu.cn Zishu</a> 2006-09-11 early morning</p>
[Ctrl+A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

Question:
1. The space bug appears in my FIREFOX. I don’t know why. If the LI points are not written on the same line, a problem will arise. You can try it by running the code above!

2. The small difference between IE and FIREFOX (see the picture below). If you didn’t notice this small difference, you would not write padding: 6px 15px 5px 15px; in CSS, and you would never do it. Connect the vertical line in the middle to the upper and lower lines! (There are even smaller differences between IE6 and IE7);


3. Is the line #nav li a{margin:1px;} useless? If you think so, just delete it and try it, see if it works!

4. The page will wrap when zoomed to a certain hour. Use min-width in FIREFOX to solve the problem, but min-width is not recognized in IE, so you can only use: expression((documentElement.clientWidt..... Here’s the solution! I didn’t add it to the above code. If you don’t want to break the line, just change the #nav line above to:

Program code

Copy code The code is as follows:

#nav{height:24px; border-bottom:1px solid #D28A05; border-top:1px solid #D28A05;background-image: url(nav_bg.jpg);background-color: #FF9900; text-align:center;min-width:400px;width: expression((documentElement.clientWidth < 400) ? "400px" : "auto" );}

Basically, there are many problems in this field. It is recommended to do it yourself, so that you will find a lot of problems!
Also: this blog will be ugly in FIREFOX, so just make do with it. Take a look!
One more thing: there will inevitably be problems with what I wrote. If there are any, I will be very happy if you point them out!