During the process of refining my website's banner/navbar, I encountered an unusual spacing issue between divs. To illustrate the problem, I have provided two JSFiddle links below: Link 1 | Link 2
(I utilized PHP to determine which content is displayed, hence the need for both links).
I've dedicated approximately 3 hours attempting to troubleshoot and rectify this issue in the code, but unfortunately, I haven't been successful in identifying the root cause.
A peculiar observation I made is regarding the gaps between the green and black outlined borders.
Snippet 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;
}