CSS Lists
- Started
- Last post
- 11 Responses
- scrap_paper
If anyone can offer me any advice here I would really appreciate it.
I'm having a real headache trying to get some lists to work in both IE and FF.
I have a list with graphic icons to use as bullets. I've tried either making the bullet icons backgrounds or list-style. Either way when I mess with text-indent, padding and margins and/or background-position I can not get it to work the same way in both browsers.
The main problem I'm running into is the line-indent. I need to use and negative line-indent in IE because its stupid and inserts an indent automatically but in FF using the negative indent causes a hanging first line.
Here is the code I'm working with:
<div id="paragraph2-r">
<h3>Header</h3>
<ul>
<li class="eye"><a href="#">Watch Tim on TV in an interview with the Summit of Life.</a></li>
<li class="vol"><a href="#">Listen on Tim’s interview <br />
at Mix 99.9 FM</a></li>
<li class="page"><a href="#">Read Tim’s write-up and reviews</a></li>
</ul>
</div>#paragraph2-r {
width: 200px; float: left;
}#paragraph2-r ul {
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
color:#000000;
margin-left: 0em;
padding-left: 0em;
position: relative;
}#paragraph2-r li.eye {
background-repeat: no-repeat;
background-position: 0 .1em;
list-style-position: inside;
list-style: none;
background-image: url(../../images/01jan08/eye.gif...
text-indent: -1.45em;
padding-left: 2em;
margin: 0 0 1em 0em;
}
#paragraph2-r li.vol {
background-repeat: no-repeat;
background-position: 0 .1em;
list-style-position: inside;
list-style: none;
background-image: url(../../images/01jan08/volume...
text-indent: -1.45em;
padding-left: 2em;
margin: 0 0 1em 0em;
}
#paragraph2-r li.page {
background-repeat: no-repeat;
background-position: 0 0em;
list-style-position: inside;
list-style: none;
background-image: url(../../images/01jan08/page.gi...
text-indent: -1.45em;
padding-left: 2em;
margin: 0 0 1em 0em;
}
- TheBlueOne0
Did you set up a CSS reset?
- scrap_paper0
Just on typography really. Should I set generall ul and li margin/padding to 0?
- jonatne0
i always do.. every browser handles that stuff different
- 7340
what if position was :outside; ?
- 7340
make sure youre declaring your dtd at the top and that may help with cross browser isssues. ie7 is getting better but still can display a good bit of css incorrectly... you may have to just take a hit if you cant get them to render exactly the same... sometimes it just doesn't
- scrap_paper0
Oh for the love of crap. That worked perfectly 734. Got rid of the text indent and made the position outside.
Did the reset too.
Thanks all. I think I've smacked my forehead and felt like a dummy more times working with CSS then anything else.
- 7340
i stare at css all day long. ive learned more in 3 months than ive known in 8 or 9 years in html. glad it worked... you have a link?
- Not yet. It's just on my local for now. Its a long story but I'm working in-house with one of my clients and I can't post the thing live yetscrap_paper
- damn thing live yetscrap_paper
- van_rijn0
also try to stick with px rather than em since em is relative not absolute. that could have helped as well
- 7340
yeah em's bother me because i dont like how they cascade
- van_rijn0
indeed 734. i only used the em for main content font sizes cause of obscene monitor resolutions. now i use font:100%; occasionally. but like most of the time its px
- scrap_paper0
Will do. thx