SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict trigger's Avatar
    Join Date
    Jun 2003
    Location
    Eagan
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Word wrapping in an unordered list?

    I'm in the middle of redesigning my site...

    http://www.nasi.com/IBM_totalStorage.php

    but I seem to be having a problem with the word wrapping on this left-hand list. I'm stumped. The text does wrap, just not before some of the text gets hidden... any ideas of what's going wrong with this?

    I've tried messing with the overflow: property and making the ul tag for the "leftlist" less than 100% to try to fix the nasty word wraps I get on my unordered list items.

    [css]
    ul#leftlist{
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    font-size: 80%;
    letter-spacing: .05em;
    }
    ul#leftlist li{
    display: block;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    }
    ul#leftlist li.first{
    font-size: 110%;
    font-weight: 900;
    color: #FFFFFF;
    background-color: #0D2B88;
    text-align: center;
    padding: 0.5em 0.15em;
    width: 100%;
    }
    ul#leftlist li a{
    display: block;
    width: 100%;
    padding: 0.5em 1em 0.5em 1.5em;
    background: #FFFFFF;
    border-top: 1px solid #ffe;
    border-right: 1px solid #aaab9c;
    border-bottom: 1px solid #ccc;
    border-left: 8px solid #FBF3C5;
    text-decoration: none;
    color: #0D2B88;
    }
    [/css]
    any help or ideas would be greatly appreciated...

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've only had a quick look but the problem stems from the fact that you have a 100% width on the leftlist a element but you have also adding padding that makes the element too wide.

    You could drop the 100% width but then IE doesn't make the whole cell active or you could remove the padding to a parent element if possible.

    Alternatively you could drop the width:100% and add position relative instead which will make the whole list active on rollover. However this will change the stacking context and the list will stay on top when you resize the screen. (You could then try and adjust the z-indexes of the other items to reverse this but may prove difficult.)

    Code:
    ul#leftlist li a{
    position:relative;
    display: block;
    padding: 0.5em 1em 0.5em 1.5em;
    etc......
    I'm sure if you mess around with the above then you should be able to work out a solution. The easiest solution would be to remove the padding to a parent element somehow but you'll have to play around with it a bit.)

    Paul

    BTW your page is too wide in mozilla which is probably from the same problem where you have added borders/padding to 100% elements making them too big.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •