View Single Post - [SOLVED] using background images in a list

marisa · #1 (**permalink**) Nov 28th, 2007, 12:26

Hi,
I have a problem with a list I have created! Basically I have a form and in the header there are images which are used to indicate the users progress through the form. The are not links. However, there seems to be some padding or margin to the left which I can't get rid of and it makes the last image fall below the rest! Any help would be much apreciated as I am close to tears here!!

Code: Select all

#wrapper-main {padding:0; margin:0 auto; width:645px;}
#headermain {width:100%; background-image:url(images/isa-header.jpg); background-repeat: no-repeat; height:109px; padding:0; margin:0;}

#maincontent{padding:20px 30px 0px 30px; background-image:url(images/isa-body.gif); background-repeat: repeat-y; font-family: Verdana, Helvetica, sans-serif; font-size: 11px; }
#footer {padding:0; margin:0; background-image:url(images/isa-footer.gif); background-repeat: no-repeat; height:31px; clear:both;}
#footer p{font-size:11px; margin:3px;}
span { display:none; }

.navcontainer
{
    width:645px;
    list-style-type: none;
}

.navcontainer ul
{

list-style-type: none;
padding-top:0px;
}





li.about-you-selected{
    float: left;
    display: inline;
    padding-left:10px; /* the width reserved for the background image */
    background: url(images/about-you-over.jpg) no-repeat 0px 10px;
    width:117px;
    height:50px;
}

li.about-you{
float: left;
display: inline;
width:117px;
height:40px;
padding-left:10px; /* the width reserved for the background image */
background: url(images/about-you-over.jpg) no-repeat 0px 10px; 
}

li.your-isa-selected{
    float: left;
    display: inline;
    padding-left: 10px; /* the width reserved for the background image */
    background: url(images/your-isa-over.jpg) no-repeat 0px 10px;
    width:108px;
    height:50px;
}

li.your-isa{
float: left;
display: inline;
padding-left: 10px; /* the width reserved for the background image */
background: url(images/your-isa.jpg) no-repeat 0px 10px; 
width:108px;
height:40px;
}

li.payment-details-selected{
    float: left;
    display: inline;
    padding-left: 10px; /* the width reserved for the background image */
    background: url(images/pay-details-over.jpg) no-repeat 0px 10px;
    width:147px;
    height:50px;
}

li.payment-details{
float: left;
display: inline;
padding-left: 10px; /* the width reserved for the background image */
background: url(images/pay-details.jpg) no-repeat 0px 10px; 
width:147px;
height:40px;
}
li.legals-selected{
    float: left;
    display: inline;
    padding-left: 10px; /* the width reserved for the background image */
    background: url(images/legal-over.jpg) no-repeat 0px 10px;
    width:98px;
    height:50px;
}

li.legals{
float: left;
display: inline;
padding-left: 10px; /* the width reserved for the background image */
background: url(images/legal.jpg) no-repeat 0px 10px; 
width:98px;
height:40px;
}

li.summary-selected{
    float: left;
    display: inline;
    padding-left: 10px; /* the width reserved for the background image */
    background: url(images/summary-over.jpg) no-repeat 0px 10px;
    width:116px;
    height:50px;
}

li.summary{
float: left;
display: inline;
padding-left: 10px; /* the width reserved for the background image */
background: url(images/summary.jpg) no-repeat 0px 10px; 
width:116px;
height:40px;
}

HTML: Select all

<div id="wrapper-main">
<div id="headermain">
<div class="navcontainer">
    <ul class="navlist">
        <li class="about-you-selected"><span>You are on Step 1 - About you</span></li>
        <li class="your-isa-selected"><span>Your isa</span></li>
        <li class="payment-details-selected"><span>Payment details</span></li>
        <li class="legals-selected"><span>legals</span></li>
        <li class="summary-selected"><span>summary</span></li>
    </ul>
</div>

</div>

<div id="maincontent">

 <form>
    
 </form>

</div>

<!--end of maincontent-->

<div id="footer"></div>
</div><!--end of wrappermain-->
</body>
</html>