?
Solved

Internet Explorer not displaying empty div border

Posted on 2009-02-19
3
Medium Priority
?
1,187 Views
Last Modified: 2013-11-19
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
Comment
Question by:Spiderstave
  • 2
3 Comments
 
LVL 3

Accepted Solution

by:
Earshel earned 1000 total points
ID: 23688754
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
 

Author Comment

by:Spiderstave
ID: 23688873
Great, that did it! Thank you for your help!
0
 
LVL 3

Expert Comment

by:Earshel
ID: 23688891
You're welcome. Good luck on the rest of the project ;).
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question