|
CSS - Unordered List List-style-type:none
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 Similar TutorialsSo 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... 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... */
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>
Seems like most people use unordered lists for menus. Code: <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> Others use definition lists. They claim it is less buggy with IE. Code: <dl> <dt>menu1</dt> <dt>menu2</dt> <dt>menu3</dt> </dl> Any thoughts on whether unordered lists or definition lists are best? Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag? Code: <ul> <li><span>menu1</span></li> <li><span>menu2</span></li> <li><span>menu3</span></li> </ul> Thanks 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 I'm trying to change the list style from 'disc' to 'none' for some sections of my site, and I'm running into problems. The page in question is found at luv . deepwaterchurch . com then click on "Global Partners" I'm trying to hide the discs for the lists in the twitter feed (left column) and the news feeds (inline in the main content) I've tried adding list-style:none to what I think are the appropriate elements in my stylesheet, but nothing is working. I'm sure it's a simple fix, but I can't find it. I'm hoping I can get a bit of help addressing the display of an unordered list. I'm trying to view the list horizontally, and not vertically. Here is the code, and thanks in advance. CSS -------------------------------- #pages { margin-top: 12px; float: right; margin-right: 125px; font: normal 14px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; color: #000; } #pages ul { list-style-type: none; margin: 0; padding: .5em 0; display: inline; } #pages li a { display: block; width: 1.5em; height: 1.5em; padding: 0; text-align: center; vertical-align: text-middle; text-decoration: none; } #pages a:link, #pages a:visited { margin: 0 10px 0 10px; text-decoration: none; color: #000; } #pages a:link#pagescurrent, #pages a:visited#pagescurrent { border-bottom: 1px solid #000; background: transparent; color: #000; } #pages a:hover { background-color: #949494; color: #fff; } HTML -------------------------- <div id="pages"> <ul> <li><a href="#" id="pagescurrent" title="next slide">1</a></li> <li><a href="#" title="next slide">2</a></li> <li><a href="#" title="next slide">3</a></li> <li><a href="#" title="next slide">4</a></li> </ul> </div> Here are a couple of questions, all are in reference to THIS LAYOUT 1) There seems to be an Internet Explorer issue where bullets don't always show up on list items, any ideas how to fix this? 2) It wont validate in XHTML simply because of two urls I use, anyone have any hacks as to how to fix this? 3) I've only been able to test on IE and Firefox, so if anyone is on a different browser and can let me know of any other issues it would be amazing. Thanks in advanced! Hi, I'm just diving in to CSS layout and gradually working through CSS IE bugs. I'm having so much trouble sorting this one out though! I've got a fairly standard menu using UL and LI in a left hand container. Everything displays nicely in Firefox 1.5 and looks ok - initially in IE6 until you hover over the menus. In Firefox they change background colour and font colour as I want, however in ie6 when you hover the background doesn't change colour and the menu all squishes up together! Where am I going wrong?? Here's the CSS for the elements: Code: #leftcol{
float:left;
padding: 0;
width: 170px;
background-color: #FFFFFF;
}
#SectionNav {
background-image:url(../assets/images/sectionNavBack.png);
background-repeat: no-repeat;
background-color: transparent;
width:150px;
height: 323px;
left: 0px;
top: 0px;
padding-left: 0px;
display: block;
}
#SectionNav ul{
margin-top: 0px;
padding-top: 25px;
background-color: transparent;
list-style-type: none;
font-size: 80%;
list-style-image: url(../assets/images/ballBullet.png);
display: block;
}
#SectionNav ul li a{
color: #FFFFFF;
display: block;
margin-top: -5px;
padding-botton: 10px;
margin-bottom: 10px;
text-decoration: none;
height: 21px;
background-image: url(../assets/images/SectionBtnBack.png);
font-weight: 200;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#SectionNav ul li a:hover, #SectionNav ul li a:focus {
background-color: #0000FF;
color: #FFCC00;
}
Here's the HTML: Code: <div id="leftcol"> <div id="SectionNav"> <ul> <li><a href="index.php">Home</a></li > <li><a href="#">News</a></li > <li><a href="#">Handicaps</a></li > <li><a href="#">Leaderboard</a></li > <li><a href="#">Competions</a></li > <li><a href="#">Media</a></li > <li><a href="#">Courses</a></li > <li><a href="#">Links</a></li > </ul> </div> <!--End of SectionNav--> </div> I've played around with the various margins etc but no joy. The page can be found at: http://beta.sussexeast-gs.org.uk/index.php Excuse the colours they're there to help me with layout for now. Thanks Apologies for such a novice question. I'm creating a few Ordered and Unordered Lists and some of the List Items wrap to a second or third line. My additional lines are wrapping out to the left margin of the number or bullet, rather than wrapping only to the left margin of the text in the first line. What is the command to style List Items to wrap so that the text all aligns left on the same margin, rather than aligning with the bullet or number? How do I remove the indenting that happens on a UL with CSS? I want a vertical list but I don't want it to indent as it messes up my design. Hello all- I have news headlines set up to display in a list. Each headline starts and ends with a quote. When a given head wraps, the next line begins directly under the quote mark: "This is Headline 1" "This is Headline 2 and When It Wraps, the First Line Falls under the Quote Mark" Ideally, I'd like to have the initial quote mark in each head hang out from the text, so that wrapped lines in that list item align underneath the first letter, rather than the quote mark. Is it possible to use a character, i.e., the quote mark, as a list marker? Thanks in advance... - Tom Tedeschi Hi, I am using linked-in stylesheets for my webpage and have an unordered list, which is inside a div, for the phone number and email address (which is an email link) which are in the top right corner of the page. The whole page is in a container div. I am trying to 'text-align' these two <li> elements to the right, the phone number does this but the email link just won't move to the right and is staying on the left! I have put the 'text-align: right' attribute for the 'ul' and the 'li' and the 'a' but to no avail. The weird thing is, I also have an undordered list for my navigation which is also on the same page, running horizontal on the left side of the page, but these seem to work fine for the alignment (each link is centered nicely in their boxes). Why won't the email link align right?! My stylesheet code: #garden-designer-contactbar ul { display: block; position:absolute; text-align: right; font-size: 20px; font-family: verdana, arial, helvetica, sans-serif; color: #666666; left:541px; top:0px; width:179px; height:51px; margin: 0; padding: 0; list-style-type: none; z-index:6; } #garden-designer-contactbar li { display: block; text-align: right; } #garden-designer-contactbar a { display: block; position:absolute; text-align: right; font-size: 12px; font-family: verdana, arial, helvetica, sans-serif; color: #666666; font-weight: normal; } My page code: <div id="garden-designer-contactbar"> <ul> <li>020 0000 000</li> <li><a href="mailto:email@email.co.uk?subject=Garden Design" title="email Garden Design" align="right">email@email.co.uk</a></li> </ul> </div> Does anyone know what might be going on? My container div for the whole page is set to 'text-align: left' but I tried removing that attribute and it just made other text on the page that wasn't specifically aligned, centre. And the email link seemed to stay where it was. Any help much appreciated! Hey, I've run into some trouble with a menu. Below is my CSS: css Code: Original - css Code #menu ul{ background: url(img/bg_menu.png) repeat-x #15365E; height: 28px; padding: 0 5px; } #menu ul li{ float: left; margin: 0 5px; } #menu ul li a{ color: #CCC; display: block; font-size: 0.75em; text-decoration: none; height: 28px; line-height: 28px; }
#menu ul{ background: url(img/bg_menu.png) repeat-x #15365E; height: 28px; padding: 0 5px; }
As you can see, this is a horizontal menu using an unordered list with its list items floated left. I would have used inline on the list items as I prefer it to floating in this scenario, but the links within those list items are displayed as blocks so as to allow me to properly align a background image (not included) in links of a certain class - and block elements don't go inside inline ones nicely. This is just fine in modern browsers. However, IE6 displays the links at 100% width (whereas other browsers contain the link text nicely), which ends up displaying the horizontal menu as a vertical list. I'd rather avoid assigning a width to each menu item (that does fix the problem, but it's messy and harder to update). That's the only fix I've come up with. Please let me know if you need any further information - otherwise, thank you in advance for any assistance! I am creating a website for a game (unnamed so far) the template is located at syckgamingleague(dot)com in Firefox this site looks perfect works extremely well. In Opera the navigation doesn't seem to be working like I want it. In IE it seems as if everything that should be vertically aligned to the middle doesn't appear to do that. I am just looking for a fix for the Opera navigation error currently but if you know the cause of the IE problems and would like to help that would be great. The website is located at the URI: syckgamingleague(dot)com I will include images for the display of each of the browsers mentioned above. Firefox at the above link in root folder Firefox_Polkamon.jpg Opera at the above link in root folder Opera_Polkamon.jpg IE at the above link in root folder InternetExplorer_Polkamon.jpg Sorry for no links but this forum would not allow it. Name for game isn't Polkamon it is more of a codename than anything currently game isn't named. |
|||||||