This is I just made a navigation bar, in order to let the four link center, I did so, but after the completion of a lot of problems found, write to share with you!
First, let's take a look at this navigation bar!
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <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, "Song Body", 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> </pead> <body> <ul><li> Home </li><li> release information </li><li> My guest </li><li> help </li></ul> <p>www.zishu.cn 2006-09-11 early morning </p> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
questions:
1, the space bug appeared in my Firefox, do not know why, if the Li is not written in the same line, the problem is out, you can run the code in the top to try!
2, IE and Firefox small difference (see), if you do not find this small difference, you will not be written in CSS padding:6px 15px 5px 15px; Will never put the middle of the vertical line and up and down two lines together! (There are even smaller differences between IE6 and IE7);
3, #nav Li a{margin:1px;} Is this line useless or not? If you think so, you just have to try it out, and see if you can!
4, the page in the zoom to a certain hour will fold line, Firefox with min-width solution, and IE in min-width do not know, so only use: expression (Documentelement.clientwidt ... To solve it! I do not add in the above code, if you do not want to fold the line to the top #nav this line to change:
Program code
Copy CodeThe 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 on this line many problems, suggest self-made, so you will find a lot of problems!
In addition: This blog will be very difficult to see in Firefox, you have to look at it!
In addition: I write inevitably have the problem, if really have, you point out, I will be very happy!
