adworldmedia
asked on
CSS hanging indent problems
I've written some basic CSS for a list, with a background image.
But the text's hanging indent is off. I want all the wrapping text to be flush with the text above it...
But the text's hanging indent is off. I want all the wrapping text to be flush with the text above it...
.moduletableheadbox {
width: 309px;
}
.moduletableheadbox h3 {
background-image: url(/images/box/bg_left_small_header.gif);
height: 31px;
width: 309px;
color: #FFF;
position: relative;
top: 0px;
clip: rect(auto,auto,auto,auto);
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-indent: 12px;
}
.moduletableheadbox ul.latestnewsheadbox {
background-image: url(/images/box/bg_left_small_content.gif);
color: #FFF;
list-style-type:disc;
list-style-position:inside;
margin-top: 0px;
margin-right: 0px;
padding-bottom:15px;
font-size: 15px;
text-indent: 15px;
margin-left:0px;
padding-left:0px;
}
.moduletableheadbox a.latestnewsheadbox {
color: #FFF;
}
<div class="moduletableheadbox">
<h3>Recent Features</h3>
<ul class="latestnewsheadbox">
<li class="latestnewsheadbox"> <a href="/news/3-newsflash/1603-teaser-one-sheet-for-pulidos-the-graves.html" class="latestnewsheadbox"> Teaser One Sheet For Pulido's 'The Graves'</a> </li>
<li class="latestnewsheadbox"> <a href="/news/3-newsflash/1604-an-exclusive-look-at-horrorfests-autopsy.html" class="latestnewsheadbox"> An Exclusive Look at Horrorfest's 'Autopsy'</a> </li>
<li class="latestnewsheadbox"> <a href="/news/3-newsflash/1605-domestic-trailer-and-new-stills-from-sauna.html" class="latestnewsheadbox"> Domestic Trailer and New Stills From 'Sauna'</a> </li>
<li class="latestnewsheadbox"> <a href="/news/3-newsflash/1606-the-thing-prequel-script-getting-rewritten.html" class="latestnewsheadbox"> 'The Thing' Prequel Script Getting Rewritten!</a> </li>
<li class="latestnewsheadbox"> <a href="/news/3-newsflash/1607-weird-al-yankovic-the-guest-of-the-newman-hour.html" class="latestnewsheadbox"> Weird Al Yankovic the Guest of The Newman Hour</a> </li>
<li class="latestnewsheadbox"> <a href="/news/3-newsflash/1608-dino-madness-in-the-land-that-time-forgot.html" class="latestnewsheadbox"> Dino-Madness in 'The Land That Time Forgot'</a> </li>
<li class="latestnewsheadbox"> <a href="/news/3-newsflash/1609-reminder-horrorhound-weekend-mask-fest-this-weekend.html" class="latestnewsheadbox"> Reminder: HorrorHound Weekend, Mask-Fest THIS Weekend!</a> </li>
<li class="latestnewsheadbox"> <a href="/news/3-newsflash/1610-canadian-supermodel-cast-in-new-moon.html" class="latestnewsheadbox"> Canadian Supermodel Cast in 'New Moon'</a> </li>
<li class="latestnewsheadbox"> <a href="/news/3-newsflash/1611-bryan-singer-official-takes-on-the-prisoners.html" class="latestnewsheadbox"> Bryan Singer Official Takes on 'The Prisoners'</a> </li>
<li class="latestnewsheadbox"> <a href="/news/3-newsflash/1612-tv-full-casting-for-vampire-diaries-pilot.html" class="latestnewsheadbox"> TV: Full Casting For 'Vampire Diaries' Pilot</a> </li>
</ul>
</div>
csstextindent.jpg
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
.moduletableheadbox ul.latestnewsheadbox
add:
list-style: none;
and add:
.moduletableheadbox ul.latestnewsheadbox li
{
margin: 0;
padding: 0;
}