• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1192
  • Last Modified:

Internet Explorer not displaying empty div border

Hello,

I'm creating a full CSS horizontal menu, which is online here:

http://www.outshinehosting.com/form/menu.html

The design calls for a two pixel dividing line between each menu item. The dividing line is two colors, dark blue 1px and light blue 1px. I achieved this by creating two classes that each have one side of the border turned on at 1px with the appropriate color, then placing two divs that call each class after each menu item. It works great on Firefox and Safari, but the border won't show up in IE. If I place anything inside of the divs the border does display in IE, but I need them to be empty. Does anyone know why this is happening and how I might resolve it? My markup is below.

Thank you!
.div1{
border-right: 1px solid #006192;
display: inline;
padding: 5px 0;
}
 
.div2{
border-left: 1px solid #3a91ca;
display: inline;
padding: 5px 0;
}
 
<div id="navcontainer">
    <ul id="navlist">
        <li><a href="#">Item one</a></li><div class="div1"></div><div class="div2"></div>
        <li><a href="#" class="current">Item two</a></li><div class="div1"></div><div class="div2"></div>
        <li><a href="#">Item three</a></li><div class="div1"></div><div class="div2"></div>
        <li><a href="#">Item four</a></li><div class="div1"></div><div class="div2"> </div>
        <li><a href="#">Item five</a></li>
    </ul>
</div>

Open in new window

0
Spiderstave
Asked:
Spiderstave
  • 2
1 Solution
 
EarshelCommented:
I was able to solve this problem by using non breaking spaces in the empty divs. It renders correctly in FF and IE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Test</title>
 
<style>
 
html,body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
 
#navcontainer ul
{
background: #7ccbf3 url(navigation-bg.png) repeat-y center;
padding: 5px 0;
margin: 0;
list-style-type: none;
color: #FFF;
width: 100%;
text-align: center;
margin-left: 3px;
}
 
li { display: inline; }
 
li a
{
text-decoration: none;
color: #FFF;
padding: 5px 12px 5px 13px;
margin-left: -3px;
font-weight: bold;
}
 
li a:hover
{
background: url(nav-over-bg.png) repeat-x center;
color: #00689c;
}
 
li a.current
{
background: url(nav-current-bg.png) repeat-x center;
color: #00689c;
padding: 5px 12px 5px 13px;
margin-left: -3px;
font-weight: bold;
}
 
.div1{
border-right: 1px solid #006192;
display: inline;
padding: 5px 0;
}
 
.div2{
border-left: 1px solid #3a91ca;
display: inline;
padding: 5px 0;
}
 
</style>
 
</head>
 
<body>
 
 
<br><br>
 
<div id="navcontainer">
    <ul id="navlist">
        <li><a href="#">Item one</a></li><div class="div1">&nbsp;</div><div class="div2">&nbsp;</div>
        <li><a href="#" class="current">Item two</a></li><div class="div1">&nbsp;</div><div class="div2">&nbsp;</div>
        <li><a href="#">Item three</a></li><div class="div1">&nbsp;</div><div class="div2">&nbsp;</div>
        <li><a href="#">Item four</a></li><div class="div1">&nbsp;</div><div class="div2">&nbsp;</div>
        <li><a href="#">Item five</a></li>
    </ul>
</div>
 
<br><br>
 
</body>
</html>

Open in new window

0
 
SpiderstaveAuthor Commented:
Great, that did it! Thank you for your help!
0
 
EarshelCommented:
You're welcome. Good luck on the rest of the project ;).
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now