In refining the banner/navbar of my website I discovered some strange spacing between divs. Here are two links showing my problem in JSFiddle. Link 1 | Link 2
(I am using php to determine what content to show so I needed two to demonstrate the issue for both possibilities).
I have spent about 3 hours fiddling with code trying to find out what is happening and how to fix it, but to no avail. I can't seem to identify what is causing the problem.
EDIT: What I find strange is the gaps between the green and the black outlined border.
My code (from JSFiddle):
Link 1 HTML:
<div id="banner"><div id="bannerleft"></div><div id="bannercenter"><div id="nav_content"><ul><li><div><a href="../">Home</a></div></li><li>|</li><li><div><a href="forum">Forums</a></div></li><li>|</li><li><div><a href="market">Market</a></div></li></ul></div></div><div id="bannerright"><div id=accountcontent> <span><a href="login">Login</a> | <a href="register">Register</a></span></div></div></div>Link 1 CSS:
#banner { height: 30px; width: 100%; display: table; margin-bottom: 20px;}#bannerleft { display: table-cell; text-align: left; outline-color: black; outline-style: dashed; width: 33.33%;}#bannercenter { display: table-cell; text-align: center; outline-color: black; outline-style: dashed; padding: 0px; height:30px; width: 33.33%;}#nav_content { height: 30px; margin: 0 auto; padding: 0px; outline-color: green; outline-style: dashed;}#nav_content ul { height: 30px; margin: 0 auto; padding: 0px;}#nav_content ul li { display: inline-block; list-style: none; line-height: 30px;}#nav_content ul li div { height: 30px;}#bannerright { display: table-cell; text-align: center; outline-color: black; outline-style: dashed; padding: 0px; height:30px; width: 33.33%;}#accountcontent { outline-color: green; outline-style: dashed; height:30px;}Link 2 HTML:
<div id="banner"><div id="bannerleft"></div><div id="bannercenter"><div id="nav_content"><ul><li><div><a href="../">Home</a></div></li><li>|</li><li><div><a href="forum">Forums</a></div></li><li>|</li><li><div><a href="market">Market</a></div></li></ul></div></div><div id="bannerright"><div id=accountcontent><a href="account"><img id="avatarsmall" src=""/>AccountName</a></div></div></div>Link 2 CSS:
#banner { height: 30px; width: 100%; display: table; margin-bottom: 20px;}#bannerleft { display: table-cell; text-align: left; outline-color: black; outline-style: dashed; width: 33.33%;}#bannercenter { display: table-cell; text-align: center; outline-color: black; outline-style: dashed; padding: 0px; height:30px; width: 33.33%;}#nav_content { height: 30px; margin: 0 auto; padding: 0px; outline-color: green; outline-style: dashed;}#nav_content ul { height: 30px; margin: 0 auto; padding: 0px;}#nav_content ul li { display: inline-block; list-style: none; line-height: 30px;}#nav_content ul li div { height: 30px;}#bannerright { display: table-cell; text-align: center; outline-color: black; outline-style: dashed; padding: 0px; height:30px; width: 33.33%;}#accountcontent { outline-color: green; outline-style: dashed; height:30px;}#avatarsmall { height: 30px; width: 30px; padding: 0px; margin: 0px;}
