CSS Forum

**chrisj** · 01:31 AM

I'm using this code and css:

Code:

<style type="text/css">
ul.table {
    width:202px;
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    border: solid #000;
    border-width: 0 1px 1px 0;
}
.table li.lt {
    float:left;
    border: solid #000;
    border-width: 1px 0 0 1px;
}
.table li.rt {
    float:right;
    border: solid #000;
    border-width: 1px 0 0 1px;
}
.table li div {
    width: 100px;
    text-align: center;
    color: #000;
    font-size: 12px;
    padding: .4em 0;
}
</style>
 
</head>
<body>
    <ul class="table">
        <li class="lt"><div>Type</div></li>
        <li class="rt"><div>Number</div></li>
        <li class="lt"><div>TEST</div></li>
        <li class="rt"><div>HELLO</div></li>
        <li class="lt"><div>Type</div></li>
        <li class="rt"><div>Number</div></li>
        <li class="lt"><div>TEST</div></li>
        <li class="rt"><div>HELLO</div></li>
    </ul>
</body>
</html>

How can I make these wider?:

Code:

      <li class="lt"><div>Type</div></li>
        <li class="rt"><div>Number</div></li>
        <li class="lt"><div>TEST</div></li>
        <li class="rt"><div>HELLO</div></li>
        <li class="lt"><div>Type</div></li>
        <li class="rt"><div>Number</div></li>
        <li class="lt"><div>TEST</div></li>
        <li class="rt"><div>HELLO</div></li>

thanks

**chrishirst** · 10-27-2009, 04:38 AM

add a width to them.

**chrisj** · 10-27-2009, 10:24 AM

Thanks for the reply, I'm trying to make them wider, but when I add anything larger than width: 100px, they get all distorted. So some additional help would be appreciated.

Code:

ul.table {
    width:202px;
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    border: solid #000;
    border-width: 0 1px 1px 0;
}
.table li.lt {
    float:left;
    width:100px;
    border: solid #000;
    border-width: 1px 0 0 1px;
}
.table li.rt {
    float:right;
     width:100px;
    border: solid #000;
    border-width: 1px 0 0 1px;
}
.table li div {
    width: 100px;
    text-align: center;
    color: #000;
    font-size: 12px;
    padding: .4em 0;
}

**chrishirst** · 10-27-2009, 03:39 PM

explain "distorted"

and in what browser(s)?

**airforce1** · 10-28-2009, 09:50 AM

I think 'table' is a reserved word and could be used in a class definition.