|
CSS - Problem With List Style
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>
Similar TutorialsI 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;
}
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>
This is sort of an addendum to my earlier post on CSS, but with a new problem, now the problem is with IE. I am trying to get the SuckerFish drop downs to work and have been successful in Firefox, but IE is giving me problems. The best thing to do is look at it in action: http://www.forma3.com/stuff/css/index-v1.2.html http://www.forma3.com/stuff/css/css/index-v1.2.css I am guessing it is related to the parent child relationship in IE, namely the drop down is adopting the style (float: left) that is set for the horizontal menu. I had to put in an underscore for the "#nav li" since it was causing problems in Mozilla. Unfortunately, this causes a validation error. 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 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 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 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 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> 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. 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? 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 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>
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/ 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... */
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>
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.... |
|||||||