Forum Moderators: not2easy
I'm using a background image to produce a rollover effect:
.main-content #buttons a:link, #buttons a:visited {
display: block;
border: none;
width: 117px;
height: 27px;
margin: 10px 10px 10px 10px;
font-size: 12px;
line-height: 22px;
color: #fff;
text-decoration: none;
background: #ff6600 url(./img/button-background.gif) no-repeat left top;
text-align: center;
}
.main-content #buttons a:hover {
background-color: #ff9933;
background-position: right top;
}
Which works great. Now I want to put the buttons in a list, and display one on each line with surrounding text:
.main-content ul {list-style:none; margin:0.5em 0 1.0em 0; float: left;}
.main-content ul li {margin:0 0 0.2em 2px; padding:0 0 0 12px; line-height:1.4em; font-size:120%;}
<ul>
<li>some text <a href="#">My button</a> some more text</li>
<li>some text <a href="#">My button</a> some more text</li>
</ul>
Because the buttons are block level they want to go on their own line. How do I stop them?
/Steve
<edit>Doctype</edit>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<li><span>some text</span> <a href="#">My button</a> <span>some more text</span></li>
Then, do something like:
li span,
li a {
float: left;
}
li { clear: left; }
I haven't really looked thoroughly at your issue, but that's the first thing that came to mind.
[edited by: Xapti at 8:01 pm (utc) on June 29, 2007]
