Member Avatar for dwlamb

I am having a challenge with the spacing of breadcrumbs items in IE8. The attached pics show how the area displays in browsers. Those shots are from a brand new fresh install of Joomla 3.

65b575f43580aac9921698a85dc658f8
This is how they appear in IE 8. Notice the wrap of how Home and the arrow are not on the same line. If I am a bit deeper in the navigation, all of the links in the breadcrumbs appear not in a line.

60650e82c41a4264fa3fc132f916326c
In this shot, it displays how the breadcrumbs are supposed to appear and do appear in Chrome, Firefox, Safari and Opera

I have tried adding some margin-right or padding-right to the <li> or <a>. I also tried adding float left to see if that would work. None of these has resolved the matter. This is the css:

.breadcrumb li {
   display: inline-block;
   *display: inline;
   *zoom: 1;
   text-shadow: 0 1px 0 #fff;
}

After some research I found out those asterisks before display and zoom are hacks for Internet Explorer. The asterisk in front of display is supposed to trigger IE to ignore display: inline-block. I tried *display: inline-block and that did not effect the IE output either.

This site will be destined for mobile devices so I need a solution compatible with that standard.

Thanks for taking the time to read this.

Edited by dwlamb because: formatting
  • 2 Contributors
  • 1 Reply
  • 209 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by LastMitch
Member Avatar for LastMitch

I have tried adding some margin-right or padding-right to the <li> or <a>. I also tried adding float left to see if that would work. None of these has resolved the matter.

Add:

 text-align:center;
 float:left;

So the code should look like this:

.breadcrumb li {
display: inline-block;
text-align:center;
float:left;
text-shadow: 0 1px 0 #fff;
}
Edited by LastMitch
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.