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
  • 222 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

— IE8-only wrapping usually comes from one of two things: the page is being rendered in a compatibility/IE7 mode, or the separator/arrow is inserted as a separate element that IE treats as a break. 's float idea can work, but floats change flow and require clearing (and often make responsive behavior harder). A simpler, mobile-friendly approach is to keep the list items truly inline and make the container prevent breaks.

Try this minimal, IE8-friendly pattern first:

ul.breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;    /* keep the whole breadcrumb on one line */
  overflow: hidden;       /* optional: stop horizontal overflow if needed */
}

ul.breadcrumb li {
  display: inline;        /* inline keeps items in the same line in IE8 */
}

/* add separators without extra markup so the arrow stays attached to the next item */
ul.breadcrumb li + li:before {
  content: " > ";
}

If that fixes it you can then tweak spacing/padding on the anchors. If it does not fix the issue, check these debugging steps in this order:

  1. Open IE and press F12 — check Document Mode and Browser Mode. If either is showing IE7 or "Compatibility View", fix the meta/header or server setting.
  2. Ensure a standards DOCTYPE is present so IE8 uses standards mode.
  3. Isolate the breadcrumb in a tiny static HTML file to see whether other template CSS is overriding display, white-space, or adding widths.

Notes: pseudo-element separators and white-space: nowrap are safe for IE8 standards mode. If you must support a true IE7 rendering mode, you may need the older inline-block/hasLayout hacks or floats (with clearfix), but those add complexity on small screens. For mobile, consider collapsing breadcrumbs with a media query or showing only the last crumb to save space.

Member Avatar for Member #949455

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 Member #949455
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.