Question

I’m trying to keep my HTML very simple. I have a set list which declares the name of a Wizard like set of Steps…

<div>
    <ul class="wizardBar">
        <li class="step1">Step One</div>
        <li class="step2">Step Two</div>
        <li class="step3">Step Three</div>
    </ul>
</div>

And I have the following in my CSS file to format it…

.wizardbar
{
  display:table;           
  padding:0;
  margin:0;
  white-space:wrap;
  list-style-type:none;
}
* html .wizardbar {
  display:inline-block;
  width:1px;
  padding:0 2px;
}
.wizardbar li
{
  display:table-cell;
  width: 116px;
  text-align: center;
  padding-top: 36px;
}
.step1
{
  background: url('Step1.gif') no-repeat;
}
.step2
{
  background: url('Step2.gif') no-repeat;
}
.step3
{
  background: url('Step3.gif') no-repeat;
}

What I’m trying to accomplish here is something like…

Step1.gif…..Step2.gif…..Step3.gif
.STEP 1……..STEP 2……..STEP 3

Where the step name ie: “STEP 1” appears below the image for that step. Currently the text is ontop of the image. I do not want any overlap.

Thanks,
Justin

Answer 1

Add this to your css file:

.div.wizardBar li {
padding-top: 50px;
}

Fiddle with the padding-top until you get the correct distance you need.