List gradient (two background colors?)

Question

Currently, on my site, I use a background-image with an exact height so that the text (which is also an exact height) fits in on each "line" in the background-image - unfortunately it doesn't work too good. Whenever Japanese characters are in the list it will "bump" the line, so the background-image loops onto a new "line" and shows about 3px of the other color in the image. I wonder if there is an easier and more "proper" way to do this?

Here's the current CSS:

div.list{
background-image:url('static/div.png');
margin:25px -25px 5px -25px; /* Just for some space around the list and some removement of the content-padding I have on the site */
}

div.listCaption{
color:#F57F37;
background-color:#D9D9D9; /* So that the listcaption doesn't look like a list-item */
margin-left:-25px; /* This just removes some of the content-padding I have on the site */
padding-left:25px; /* Makes the background for the caption gray */
padding-top:16px; /* Since I have a PHP loop within the list div, I have to make some space between the two lists I have to make it look better */
}

Answer 1

In your case there is a simple solution (3px is a small height):
in your css:

• add 'repeat-x', so that background will not repeat vertically when text is resized

• add 'background color' property that is equal to one of your gradient color

Answer 2

One simple option is to turn off the vertical repeat on your background image, and set the background color of the list item to be the same as the bottom color on your image. Then you could set up your CSS to look like this:

div.list {
    background: url("static/div.png") repeat-x left top #fff; /* example color */
    margin:25px -25px 5px -25px;
}

You could also make your background image taller, so you could extend your gradient to avoid a large solid band at the bottom of the list items when their height is forced to expand.

---

EDIT: The PNG in your comment clears things up a bit.

I'm not entirely sure how you have your HTML set up, but you could simplify the whole thing by using an ordered list and pure CSS.

<h3>Latest Submissions</h3> <!-- or whatever your title element is -->
<ul>
    <li>Lorem Ipsum</li>
    <li class="stripe">Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li class="stripe">Lorem Ipsum</li>
</ul>

Then you could use styles along these lines:

li {
    display: block;
    background: #999;
    padding: 3px;
}

.stripe {
    background: #ddd;
}

Add the strip class to every other list item using your PHP script. What this does makes each list item a block element, and applies a different background if it's one of the stripe rows. Any extra content in a list item will simply cause it to expand vertically, pushing the next one down, but the background colors will stay with the correct elements.

---

EDIT 2: Outputting the list in PHP

Let's assume that you have an array of values that you're iterating through, called $myarray. We can loop through this array and apply the stripe class to even list items like this:

for($i = 0; $i < len($myarray); i++) {
    $output = "<li";

    if($i % 2 == 0) {
        $output .= ' class="stripe"'
    }

    $output .= ">" . $myarray[$i] . "</li>";
}

Make sure that this output is contained within the ul, so you'll want to do something like this:

<ul>
    <?php //Put your loop here ?>
</ul>

Answer 3

Just to be complete: Almost all current browsers (surprisingly enough even IE6) support CSS background gradients.

http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/