hello everyone, I've been trying and keep searching for solution of the following problem but still remain unsolve. I also tried to set the height value of the <li> in css to 10px but it doesn't shows exactly the same as firefox (the border thickness is slightly thicker in IE). What i'm trying to archieve is to get the result that looks exactly like firefox. But there is a huge gap between the lists in IE as shown on the screenshot attached below: Screenshot. Thank you. Code: <html> <head> <style> #navlist { font: bold 12px Verdana, sans-serif; margin: 0; padding: 0 1px 1px; background: gray; width: 13em; } #navlist li { list-style: none; border-top: 1px solid gray; text-align: left; } #navlist li a { display:block; padding: 0.25em 0.5em 0.25em 0.75em; border-left: 1em solid #AAB; background: #CCD; text-decoration: none; } #navlist a:link { color: #448; } #navlist a:visited { color: #667; } #navlist a:hover { border-color: #FE3; color: #FFF; background: #332; } </style> </head> <body> <ul id="navlist"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </body> </html> Code (markup):
Add to top(before <html> tag) <!DOCTYPE html> if do not works, add to #navlist li properties padding:0; margin:0;
Also add to css properties * { padding:0; margin:0; } On the top all css rules. Because browsers add own default values padding and margin. This hack reset them. Or use css reset with more reset properties. http://meyerweb.com/eric/tools/css/reset/ But this my recommendation. Not all use css reset.