|
CSS - List-style-type Not Working!
Hello all,
I'm modifying Cory LaViska's PHP_File_Tree cascading style sheet, default.css, to remove the round bullets from the LI tags. Browsed through the forums to find a solution to my problem with no luck. Please, take a look at my test website: www seemyinvestments dot com There, you can see what I'm talking about. The webpage lists a directory tree on the left-hand side, and I want to get rid of the bullets (the little dark dots). I've tried a number of ways of implementing 'list-style-type: none;' (You'll see one attempt below labelled 'not working!') Doesn't work for Firfox or IE. Any suggestions? Thanks. Code:
/* PHP File Tree Default Theme
By Cory LaViska (http://abeautifulsite.net/)
Featuring the Silk Icon Set from famfamfam (http://www.famfamfam.com/lab/icons/silk/)
*/
.php-file-tree {
font-family: Georgia;
font-size: 12px;
letter-spacing: 1px;
line-height: 1.5;
}
.php-file-tree A {
color: #000000;
text-decoration: none;
}
.php-file-tree A:hover {
color: #666666;
}
.php-file-tree .open {
font-style: italic;
}
.php-file-tree .closed {
font-style: normal;
}
.php-file-tree .pft-directory {
list-style-image: url(images/directory.png);
}
.php-file-tree .pft-directory-empty {
list-style-image: url(images/directory_empty.png);
}
/* Default file */
.php-file-tree LI.pft-file { list-style-image: url(images/file.png); }
/* Additional file types */
.php-file-tree LI.ext-3gp { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-afp { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-afpa { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-asp { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-aspx { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-avi { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-bat { list-style-image: url(images/application.png); }
.php-file-tree LI.ext-bmp { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-c { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-cfm { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-cgi { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-com { list-style-image: url(images/application.png); }
.php-file-tree LI.ext-cpp { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-css { list-style-image: url(images/css.png); }
.php-file-tree LI.ext-doc { list-style-image: url(images/doc.png); }
.php-file-tree LI.ext-exe { list-style-image: url(images/application.png); }
.php-file-tree LI.ext-gif { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-fla { list-style-image: url(images/flash.png); }
.php-file-tree LI.ext-h { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-htm { list-style-image: url(images/html.png); }
.php-file-tree LI.ext-html { list-style-image: url(images/html.png); }
.php-file-tree LI.ext-jar { list-style-image: url(images/java.png); }
.php-file-tree LI.ext-jpg { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-jpeg { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-js { list-style-image: url(images/script.png); }
.php-file-tree LI.ext-lasso { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-log { list-style-image: url(images/txt.png); }
.php-file-tree LI.ext-m4p { list-style-image: url(images/music.png); }
.php-file-tree LI.ext-mov { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-mp3 { list-style-image: url(images/music.png); }
.php-file-tree LI.ext-mp4 { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-mpg { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-mpeg { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-ogg { list-style-image: url(images/music.png); }
.php-file-tree LI.ext-pcx { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-pdf { list-style-image: url(images/pdf.png); }
not working! ---> .php-file-tree LI.ext-php { list-style-image: url(images/php.png); list-style-type: none; }
.php-file-tree LI.ext-png { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-ppt { list-style-image: url(images/ppt.png); }
.php-file-tree LI.ext-psd { list-style-image: url(images/psd.png); }
.php-file-tree LI.ext-pl { list-style-image: url(images/script.png); }
.php-file-tree LI.ext-py { list-style-image: url(images/script.png); }
.php-file-tree LI.ext-rb { list-style-image: url(images/ruby.png); }
.php-file-tree LI.ext-rbx { list-style-image: url(images/ruby.png); }
.php-file-tree LI.ext-rhtml { list-style-image: url(images/ruby.png); }
.php-file-tree LI.ext-rpm { list-style-image: url(images/linux.png); }
.php-file-tree LI.ext-ruby { list-style-image: url(images/ruby.png); }
.php-file-tree LI.ext-sql { list-style-image: url(images/db.png); }
.php-file-tree LI.ext-swf { list-style-image: url(images/flash.png); }
.php-file-tree LI.ext-tif { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-tiff { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-txt { list-style-image: url(images/txt.png); }
.php-file-tree LI.ext-vb { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-wav { list-style-image: url(images/music.png); }
.php-file-tree LI.ext-wmv { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-xls { list-style-image: url(images/xls.png); }
.php-file-tree LI.ext-xml { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-zip { list-style-image: url(images/zip.png); }
/* You can add millions of these... */
Similar TutorialsHi, Have an unordered list which I use as a menu. I have set the list-style-type property to none because I don't want any bullets or anything. When I look at the menu within a bordered div, it seems like there is a margin to the left of the <ul>. Eventhough there are no bullets in the <ul>, the <li> are still placed at the same location from the left. How can I left adjust the unordered list so that there are no visible margin at the left side? /Hubba Bubba So far I've been unable to find the answer to this question despite numerous Google searches, and am sincerely hoping someone here can give me the definitive answer. I have an unordered list which requires use of the decimal-leading-zero list style type. However, I need to start the number at 00 instead of 01. In HTML the way you do this is to put inside the UL tag start="0", but this is not validatable, and actually deprecated. How can I begin a list with 00 rather than 01 for the decimal-leading-zero list-style-type? TIA for all help and advice. Please look at this page - http://www.tmhdesign2.com The list nav up at the top I have a bg image for the a tag and want to not display the bullet for the <li> but list-style-top:none does not work... I was just testing some possible layouts for my navigation.. and I came across an inconsistency that I've never encountered befo Code:
#menu #nav{
padding:0px;
list-style-type:none;
margin: 0px 0px 15px 0px;
background-color:#FFF;
}
#nav li{
float:left;
/*display:inline;*/
margin-left:5px;
margin-right:5px;
}
So basically, in Fx 1.0.7 when I comment out the display:inline the bullets are shown again (despite the declaration being uncommented) In IE 6.0 there isn't an issue. Is this descrepancy another time where Fx revets to what it assumes as the correct way to handle the code? Or am I just missing out on something here. This is one of Many issues I have with fire fox, Basically I want a list of hyperlinks with no bullets. Normally I would set list-style-type = "none" for the <uL> tag and that would be it. In fire fox, the list disappears. Also it appears that FF has issues with hyperlink in a list because even with out the style type set, the list disapears. CSS Code:
a:link {
font-family: "Bradley Hand ITC", "Monotype Corsiva";
color: #999999;
}
ul{
margin:10px;
padding: 10px;
list-style-type: none;
}
li
{
font-family: "Bradley Hand ITC", "Monotype Corsiva";
color: #999999;
}
html Code:
<div id="projects">
<h1>Projects</h1>
<P>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul></p>
</div>
Hi All: When i use <ul><li> and <li> is set to "list-style-type: none;" IE and Firefox renders it differently. Does anybody know a work-around for this? The good example of this and the CSS code is at following holzgreen.com/list-test/ HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>List Test 1</title> <meta name="Description" content="x.x.x. CHANGE .x.x.x"> <meta name="KeyWords" content="x.x.x. CHANGE .x.x.x"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META name="Publisher" content="Firework Studio"> <META name="revisit-after" content="15 days"> <META name="robots" content="index, follow"> <META name="Robots" content="All"> <link href="000-style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style1 { font-family: "Courier New", Courier, monospace } --> </style> </head> <body> <div #none> <ol> <li>List item - 1</li> <li>List item - 2 <ol> <li>LI - 2.1</li> <li>LI - 2.2</li> </ol> </li> <li>List item - 3</li> <li>List item - 4</li> </ol> </div> </body> </html> CSS: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; border: 1px solid #000000; margin: 0em; padding: 0em; } #none ol { background: #BB0000; list-style-position: inside; margin: 0em; padding-left: 1em; /* Moves the Whole List */ } #none ol ol{ background: #BB00BB; list-style-position: inside; margin-left: 0em; padding-left: 3em; /* Moves the Nested List */ } #none ol li { background: #BBBB00; font-size: .8em; margin-left: 0em; list-style-type: none; } #none ol ol li { background: #00BBBB; font-size: 1em; list-style-type: lower-alpha; margin-left: 0em; list-style-type: none; } Thanks for your interest I have a list that I've created with the list-style-type being an image. For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly? Below is the code. The cell that these lists sit in has has an id of 'cellid'. Code:
#cellid {
margin: 0 0;
padding: 0 0;
}
#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}
#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}
The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space? Thanks, Brian For reasons of compliance with the SEC, I can't use cascading style sheets, but rather, I have to generate style attributes for each individual element (e.g.
Code:
<p style="width:436pt; margin:0pt; padding:6pt 0pt 0pt 20pt;
font-family:serif; font-weight:normal; color:#000000;
font-size:10pt; text-align:left; font-style:normal;
line-height:12pt; background-color:#FFFFFF;" >text </p>
don't get me started on how rediculous this is). Its stupid, but it works. What I can't figure out is how to apply something like Code: <style type="text/css" media="print">
hr {visibility:hidden}
</style>
to <hr style" ??? "/> any suggestions would be much appreciated -LG i have a list (menu) and i have created an image as a list-style-image but what i want to do is to decrease the gap between it and the actual writing. i dont want to use the "position:inside" as it makes the text move to right when i hover over the list/link. Code:
#submenu li{ padding-left:0em; margin-left:0em;}
#submenu a { margin-left:1em; }
#submenu li {border-bottom:1px solid black; }
#submenu li:hover {list-style-image:url(images/site/rightarrow.gif); list-style-position:outside; }
ok i would like to have on my nested list 1.1 and 1.2 instead of 1? ie Code: 1. hhh 1.1 jjj 1.2 kkk 2. kkk 2.1 kkkk etc but currently if i have the list-style-type as decimal the inner list comes out as just 1,2,3 etc... is it even possible to do this? Hi there, I have a list which I want to display the sub items without any left spacing.. so they are listed directly beneath the parent item. It works fine in IE, but not in FF or Opera. This is what I have: Code:
<ul id="treemenu1" class="treeview" style=" padding-top: 3px; padding-bottom: 3px; list-style: none; margin-left: 10px; padding-left: 0px;" >
<li style="list-style: none;">
<img src="images/arrow.gif" border="0" >
<a class="nav_main" href="#"><strong>Parent Item</strong></a>
</li>
<ul style="list-style: none;">
<li style="border-bottom: 1px dashed #444444; padding-top: 3px; padding-bottom: 3px; list-style: none; margin-left: 0px; "><a class="nav_sub" href="page"><img src="images/arrow.gif" border="0" >Sub Item</a></li>
etc...
I have tried use margin-left: 0px but that still doesn't work. Any ideas what I'm doing wrong? I am trying to use ul list to organize my images. Here is how it should look like. IMAGE IMAGE IMAGE text text text But instead, I get IMAGEtext IMAGEtext IMAGEtext Code:
<style>
/**************************************************************
Thumbnail Lists
**************************************************************/
ul.thumbs,
ul.thumbs li {
margin: 0;
padding: 0;
}
ul.thumbs li {
margin: 0 0 15px 0 !important;
margin: 0;
padding: 0px;
list-style: none;
}
ul.thumbs li.pagination {
margin: 10px;
padding: 0px;
list-style: none;
display:block;
}
a.thumb img {
border: 5px solid #ccc;
}
a:hover.thumb img {
background: #8EB4C6;
border: 5px solid #000;
}
a:hover.thumb {
background: none;
}
a.thumb span {
width: 100%;
display: block;
margin-top: -5px !important;
margin-top: -2px;
}
</style>
<ul class="thumbs">
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/8P5B7K8M_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=13" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/7K4V6F7H_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=12" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/0C7O9X0A_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=11" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/1Q8B0L1N_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=10" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li class="pagination">1. </li>
</ul>
I have the ul style specifically assigned where I want, but another style is overriding it. I'm using the same script on a different site and it works fine. The style sheets for the two sites are similar, but there are a few minor differences. But I don't really want to make big changes that would affect other pages in the site. Here's the style that I suspect is overriding the one I want to use: ul {margin: 0px; padding: 0px} ul li {margin: 0px 0px 0px 8px; padding: 3px 0px 0px 10px; background-image:url(../arrow.gif); background-repeat:no-repeat; background-position: 0px 7px; list-style-image:url(../spacer.gif)} ul ul li {margin: 0px 0px 0px 8px; padding: 3px 0px 0px 10px; background-image:url(../reddot.gif); background-repeat:no-repeat; background-position: 0px 7px; list-style-image:url(../spacer.gif)} And here's the style I've applied to that one section of the page: ul.list_specials li { list-style-type:none; } Unfortunately, I'm too new to the boards and can't put links in my posts yet. Otherwise I could send links from the two different sites. What am I doing wrong? Thanks, Ann I dont get what is my list styles for the footer content section. listed items dont appear listed and I could not vertically center the div. Footer content section is right above the copyright notice. http://www.aslanyurek.com/rtt/ Code:
/* content footer.css */
#fcontent{
height:80px;
width:790px;
background-color:#999999;
}
#fcontent .help{
float: left;
height: 60px;
width: 300px;
vertical-align:middle;
background-color:#FFFFCC;
}
#fcontent .catalog{
float: left;
height: 60px;
width: 300px;
vertical-align:middle;
margin-left:10px;
background-color:#F0FFCC;
}
#fcontent li {
float:left;
list-style-type:square inside;
margin-left:25px;
}
#fcontent li a {
display:block;
}
Hello, I have the ff: style Code:
.most_popular_content { background-color:#cdd6ea; }
ol { margin:0px 10px 0px 20px; padding:0px 0px 0px 9px; }
li { list-style-image:url(raquo.gif); padding-bottom:10px; padding-left:2px; padding-top:10px; }
and have this html Code:
<div class="most_popular_content">
<ol>
<li>sdfsdf</li>
<li>sdfsdf</li>
<li>sdfsdf</li>
<li>sdfsd</li>
</ol>
</div>
Now my problem is in IE. The above code will correclt display in Mozilla and even on the dreamweaver design. On IE the list-style image is displayed on top of the text, it's something that my text is align in bottom while the image is on top. On Mozilla everything works fine since the image and texts are all align. Please help! Can someone explain why the first example here does not work while the second does? Thanks. .top_anchor_links li { list-style-image: url(../img/li_star_white_bg.gif); } li.top_anchor_links { list-style-image: url(../img/li_star_white_bg.gif); } <ul> <li class="top_anchor_links">list 1</li> <li class="top_anchor_links">list 2</li> <li class="top_anchor_links">list 3</li> <li class="top_anchor_links">list 4</li> </ul> I can not figure out how to remove the padding and margin around the triangle image so it is not indented, I would also like it if the gap between the image and the text was smaller. Can anyone suggest what I change or add to my code to do this. I am also wanting to know how I get the triangle to be part of the link, so clicking the triangle or thetext will open the sub menu. Code:
<!DOCTYPE HTML>
<html><head><title>working submenus</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
ul.catMenuItem { margin: 0px auto; list-style-type: none; /*margin-left: -25px;*/
background: url("triangle_right.png") no-repeat 0px 5px transparent; /*adjust 2px & 5px until it looks correct */
display: block;
padding: 0px 4px 0px 15px; /*adjust until you have enough left padding to account for your bullet */
/* list-style-image: url('triangle_right.png'); */
}
/* list-style-image:url('triangle_down.png'); */
ul.catMenuItem li a { text-decoration: none; padding: 0; margin: 0; }
ul.catMenuItem li.catSubMenu { display: none; padding-left: 30px; margin: 0; }
--></style>
<script type='text/javascript'><!--
var prevCat;
function menu(newCat) {
if (prevCat) prevCat.style.display = 'none';
newCat.style.display = 'block';
prevCat = newCat;
}
onload = function() {
var menus = document.getElementsByTagName('ul');
for (var a=0,x=menus.length; a<x; a++) {
if (menus[a].className === 'catMenuItem') {
menus[a].getElementsByTagName('li')[0].getElementsByTagName('a')[0].onclick = function() {
menu(this.parentNode.parentNode.getElementsByTagName('li')[1]);
}
menus[a].getElementsByTagName('li')[1].style.display = 'none';
}
}
}
--></script>
</head><body>
<ul class="catMenuItem">
<li class="catMenuTitle"><a href="#">Menu 1</a></li>
<li class="catSubMenu">
Content 1.1<br>
Content 1.2<br>
<br>
</li>
</ul>
<ul class="catMenuItem">
<li class="catMenuTitle"><a href="#">Menu 2</a></li>
<li class="catSubMenu">
Content 2.1<br>
Content 2.2<br>
<br>
</li>
</ul>
<ul class="catMenuItem">
<li class="catMenuTitle"><a href="#">Menu 3</a></li>
<li class="catSubMenu">
Content 3.1<br>
Content 3.2<br>
<br>
</li>
</ul>
</body></html>
on my site i have a few drop down boxes, ive used css to change the textboxes and submit buttons, but is there a way to change the arrows/buttons on a drop down list? I have two problems with template I am creating. I could not center the page whatever I tried and for some reason list-style do not appear correct. edit: Actually just realized list styles does not appear at all. http://efetuncel.win.aplus.net/ryt/new/ |
|||||||