|
CSS - List Style - Need Help
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? Similar TutorialsI 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 Hi, 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 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 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;
}
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 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... 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! 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. 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/ 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. 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>
Is it possible to adjust the alignment of list-style-image's? In IE, the image ends up being too high, but it's centered properly in Firefox. Example: URL Here is some code below. How do I write it, that only the title is bold and not the description? Code: <html>
<head>
<style type="text/css">
.selected {font-weight: bold; }
</style>
</head>
<body>
<ul>
<li class="selected">Title</li>
<ul>
<li>description 1</li>
<li>description 2</li>
<li>description 3</li>
</ul>
</ul>
</body>
</html>
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... */
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'm having a "can't think" day. How would I get rid of the space(s) between the image icon and the <li> folder or file name on my test website? On the left-hand side of my test website, there is a directory tree listing. You'll see that php files are indicated with an php file icon for example. I don't want that much space between the file name and the file icon. Test website: www seemyinvestments dot com On this page: http://www.prioritypie.f2s.com/tremaer/_location/location.htm I have a rollover menu (courtesy of Bon Rouge's tutorial) that nicely runs in a line when viewed in FF, but in IE it reverts to a vertical list. Is there a way to stop this? And why doesn't the background for the containing div show up in FF when it does in IE? I had hoped a glass of red wine would help.... Hello, I am not sure if this is even possible but is there a way to apply css styles to a specific number of list items sequentially? For example, lets say I have a menu made from an unordered list. There are 5 <li> tags, and I want to make the first 3 have red text, but I want the last two to have white text. I can't assign specific classes because I am using a CMS and it writes the code for me. (I wish I didn't have to use a CMS but I have no choice). Is this possible? Thanks in advance! |
|||||||