Home/ Questions/Q 9077951
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T19:30:03+00:00

I have a Div bar with a white background in which my breadcrumb lives.

  • 0

I have a Div bar with a white background in which my breadcrumb lives.

Here you can see a screenshot:

enter image description here

How can i align the text vertically?

Here is my CSS:

/*  Breadcrumb  */
#breadcrumb {
    position: relative;
    background: white;
    padding: 4px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    behavior: url(/scripts/PIE.htc);
    font-size: .9em;
    color: #526472;
}
#breadcrumb ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#breadcrumb li {
    float: left;
    padding-left: 5px;
}
#breadcrumb a {
    padding-right: 10px;
    background: url(../images/div_breadcrumb.gif) no-repeat right center;
    color: #526472;
    margin-right: 5px;
}

And my HTML:

<div id="breadcrumb" class="clearfix">
    <ul>
        <li style="white-space: nowrap;"> 
            <a style="white-space: nowrap;" href="">Home</a> 
        </li>
        <li style="white-space: nowrap;"> 
            Visual collaboration solutions 
        </li>
    </ul>
    <div id="shareThis" class="fl_right"> Share: </div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Due to incomplete code, it’s a bit hard to tell, but I’m guessing that you’re either missing some markup, or that there are other styles messing with your breadcrumbs.

    The following works just fine to display items in a horizontal row (your styles, my HTML).

    <html>
<head>
    <style>
        #breadcrumb         { position: relative; background: white; padding: 4px; border-radius:2px; -moz-border-radius: 2px;  -webkit-border-radius: 2px; behavior: url(/scripts/PIE.htc); font-size: .9em; color: #526472;}
        #breadcrumb ul      { margin: 0; padding: 0; list-style: none;  }
        #breadcrumb li      { float: left; padding-left: 25px;}
        #breadcrumb a       { padding-right: 10px; background: url(../images/div_breadcrumb.gif) no-repeat right center; color: #526472; margin-right: 5px;}
    </style>

</head>
<body>
<div id="breadcrumb" class="clearfix">
         <ul>
             <li>Home Visual collaboration solutions</li>
             <li>La</li>
             <li>Ti</li>
             <li>Da</li>
         </ul>
    </div>
</body>
</html>

    If you are using ul and li tags properly, you might try using Firebug or the Chrome developer tools to detect whether or not other styles are being applied.

    • 0