|
CSS - List Bullets Dropping Down When Assigning Height To Li In Ie
For a navigation I am using, I must use an li height to control spacing in IE6. I'm also using bullets to show a user where they are in the site by only having one bullet display at a time.
Unfortunately, the height assignment I use on my li causes IE to misplace the bullet next to its secondary nav. Below is code I'm using to troubleshoot: Code:
<ul><li><a href="#">dog</a></li>
<li><a href="#">cat</a></li>
<li class="here"><a href="#">fish</a></li>
<ul>
<li><a href="#">trout</a></li>
<li><a href="#">angel</a></li>
<li><a href="#">salmon</a></li>
</ul>
<li><a href="#">turtle</a></li>
<li><a href="#">elephant</a></li>
</ul>
Code:
li {height: 20px; list-style-type: none;}
li.here {list-style-type: disc;}
If a user is on the page fish, they will see that bullet point to page salmon. Any recommendations? Similar TutorialsI need to wrap some list around a floated div. It works OK in Moz, but in IE, strange enough, the list's bullets simply disappear below that floated div. What the hack? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.container {
margin:30px;
width:300px;
border:solid 1px #000;
text-align:justify;
padding:6px;
}
.floated{
width:100px;
height:130px;
float:left;
background-color:#0099FF;
margin:5px;
}
ul{
margin:0;
list-style-position: outside;
position:relative;
left:15px;
padding-right:15px;
}
</style>
</head>
<body>
<div class="container">
<div class="floated"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolor</span></li>
</ul>
<br>
<br>
Nam enim diam, dignissim vel pellentesque vel, aliquam eget nisi. Sed in massa sodales tortor cursus pharetra. Sed congue, urna sit amet pretium viverra, sapien diam vehicula dui,
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolo</span>r</li>
</ul>
</div>
</body>
</html>
I tried all the possible ways to obtain a list (or a list like) who must: - wrap around a floated element - have the text paragraph outside the bullet (same as list-style-position: outside does in CSS for list elements) I tried with divs, backgrounds... all the stuff. It looks like an impossible task. The only solution I have found is in the code above, but it does not work in IE (neither in 6 nor in 7). Any ideas? I have this: Code:
li {
line-height: 25px;
}
Which does sort of what I want. What I really want is for the spacing between bullets to be 25px and the line spacing within a bulletted point to be normal .. is there a way to do that? Hi, I have tried putting list-style-type: none; in various places to remove the circle bullets from the list style in my code but I must be doing something wrong. How can I remove the circle bullets from the expanding menus on this page ? Thanks Can't see that this has been addressed before, but I am having a problem with using images as bullets in a ul list. The text is aligned to the bottom of the image, such that the image looks too high up. Is there a way to sort this out? Also, while we're on the subject, the left margins of the list are completely different in IE and firefox, with IE putting a much larger margin to the left of the bullet, and less of a margin between the bullet and the list item. Is there a way to sort this out, or make the stylesheet browser-specific? (OK i'm really showing my stylesheet ignorance here!!) Code snippet is posted below. Cheers. from stylesheet: .bulletList li { margin-bottom: 1.5em; padding-left: 0.75em; list-style-image:url(../images/hsdmini.jpg); color: #547A98; } from page: <table width="100%" > <tr> <td align="left"> <ul class="bulletList"><strong> <li>Credit cards accepted</li> <li>Cheques accepted</li> <li>Delivery to europe</li> <li>40,000 products in store!</li> </strong> </ul> </td> </tr> </table> Is it possible to change the bullets of an unordered list when you hover over the <li> element using CSS? I've tried something like this.. Code:
#ulist ul{
list-style: none;
}
#ulist li a{
list-style: square;
}
the list Code: <ul id="ulist"> <li><a href="#">Element 1</a></li> <li><a href="#">Element 2</a></li> <li><a href="#">Element 3</a></li> <li><a href="#">Element 4</a></li> </ul> But that doesn't work, the reason I think is because the list-style is being applyed to the <a> and not the <li> element. If not a CSS, how would I use JavaScript to determine the <li> element and add the "square" bullet style to it? Cheers, Fozzy Hi, I am new to css and have written a code for a list menu in my page and i have added an image for instead of selecting the default bullets in css (ie. square, circle etc. so now my problem comes it looks perfect in Firefox browser but in IE 6 & 7 the position of the bullet image changes . In firefox it shows the bullet besides the text written and it is centered and perfect as i need but in IE 6 and 7 the image of the bullet moves up and sticks to the text instead of maintaining some distance with the text. i am providing u the link of my page below: r-interactive.net/clients/reed%5Fcss/ Also i am mentioning the css code which i have used for the list menu below : Css : Code: ul#listmenu {
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #959595;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
text-indent: 5px;
list-style-type: none;
list-style-image: url(../images/main_images/img_industry_bullet.gif);
list-style-position: inside;
}
ul#listmenu li {
list-style-image: url(../images/main_images/img_industry_bullet.gif);
margin-top: 0;
margin-right: 0;
margin-left: 0;
padding-top: 0.5em;
padding-right: 0;
padding-bottom: 0.5em;
padding-left: 0;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #207EC9;
clear: both;
}
Html : Code: <ul id="listmenu"> <li> Jewelry Industry</li> <li> Aluminium Industry</li> <li> Electronics Industry</li> <li> Pharmaceutical Industry</li> <li> Oil & Gas Industry</li> <li> Cosmetics Industry</li> </ul> Help is always appreciated. Okay, I tried to see if this question was already answered on the forums, but I got ADD so I gave up. I'm making a nav bar out of a list and CSS. The bar is perfect, except for the height will not extent each extremity. Here's the CSS: Code: .navigation {
width: inherit;
height: 53px;
margin: 0px;
margin-top: 63px;
background-image:url(file-bin/images/navigation_background.png);
background-repeat:repeat-x;
background-position:center;
}
.navigation ul, .navigation li {
display: inline;
list-style:none;
padding:0px;
margin:0px;
}
.navigation li a {
border-left: 1px solid #FFF;
padding-left: 20px;
padding-right: 20px;
text-align: right;
}
Here's the HTML: Code: <div class="navigation" align="right"> <ul class="navigation"> <li></li> </ul> <ul class="navigation"> <li><a href="#"><img src="file-bin/images/space.png" height="53" width="1" align="absmiddle" border="0" />Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div> Thanks for the help in advance! - Logan I have an unordered list of 4 items that I have styling to be a horizontal navigation. I have set the css of the li to have a width of 25%. This works fine when the screen is full width but as I scale the browser to have a smaller width the text inside the li wrap - as to be expected. My question is, is there a way of ensuring that all 4 li's have the same height even when the content is of different lengths (thus some of the li's content do not wrap). Also can this be done purely in CSS without the use of Jquery? Thanks in advance Over the past few days I've pulled my hair out trying to fix this. I've changed the size of the container and resized the gallery. In IE8, it drops the gallery under the left-hand size text. Every other browser it appears fine but IE it does not. You can see he wowrelief (dot) com/ev css: (URL address blocked: See forum /index_files/style.css I need to finish this for a class and I don't know how to fix it and I'm beyond frustrated. help? I'm sure some of you have seen the article on alistapart for the suckerfish dropdowns. After recently moving through this, I found a bug with mac ie where the child list is displayed to the side of and not below the major nav link. I'm not sure exactly what this might be, does anyone have any ideas on this? Here's the CSS: Code:
#nav ul {
margin: 0 0;
padding: 0 0;
list-style-type: none;
}
#nav ul li {
float: left;
position: relative;
width: 10em;
}
#nav ul li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
#nav ul li > ul {
top: auto;
left: auto;
clear: left;
}
#nav ul li:hover ul, #nav ul li.over ul {
display: block;
}
...and the html... Code: <div id="nav"><ul id="rootul"> <li><a href="#">Link One</a> <ul> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li><a href="#">Link Two </a> <ul> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li><a href="#">Link Three </a> <ul> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li><a href="#">Link Four </a> <ul> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li><a href="#">Link Five </a> <ul> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> </ul> </div> ..and finally, the javascript.. Code:
<script language="javascript" type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("rootul");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
I know that technically this could be a DHTML issue, but I feel certain it's a CSS rule that I'm not doing right. I've tested this and it works in IE 6.0 and FF 1.0. Does anyone have a browser that this does NOT work in? Thanks much! -Brian Got a problem in ie6 with divs dropping and a slight over lap in ie7. The tables are set width inside a 600px wide div but no matter what i do the columns on the right keep dropping. anyone have any ideas? how can i post screenshots when no urls allowed? I'm working on the site www rabidpursesquirrels com and any time someone resizes their browser to something smaller than full screen (or simply has a small screen display) the middle block drops to the bottom of the screen. I need to find out how to make that stop happening. I don't mind if the site is too wide then and they have to scroll left to right, this would at least fix my first problem. My 2nd problem is the margins between the center block and the sides blocks. I can't figure out where I can adjust those. As you can see currently the left seems to look ok but the right side is all screwed up. I've been through the style sheet for 4 days and can't seem to find what to adjust. I'm new to css and can 'tweek' it ok but writing it is totally out of my league. Thanks in advance, QV Hi, Is there any app or way to resize or change the position of the divs just dragging and dropping? Something like in Inkscape for resizing or moving objects. Ciao Hello, I'm afraid I'm back with more problems I have a 3 column layout. the Left column is floated left, right floated left and the middle column uses left and right margins. I then had cause to set a width on the middle column to give something with Layout for IE. When I add the width to the middle column, it looks fine in firefox but for some reason in IE, my middle div drops underneath the two floated divs, as if it is too wide. I have tried debuging by using background colours on the Divs and the width of the coloured area is the same in both browsers. It is as if there is something leaking out the sides. Even on this most basic example. Am I missing something basic? Code: <div id="wrapper" style="width:996px; background-color:#666666; margin-left:auto; margin-right:auto;"> <div id="lbar" style="float:left; width:170px; padding-left:10px; background-color:#FF0000; "> <p>left</p> </div> <div id="rbar" style="float:right; width:305px; background-color:#0033FF;"> <p>right</p> </div> <div id="middle" style="margin-left:190px; width:491px; margin-right:315px; background-color:#99CCCC;"> <p>middle</p> </div> </div> Thank you for any time taken in reading this JJ Alright guys. I'm working on a horizontally scrolling news ticker type deal. I have two divs on screen, and the rest are off screen using the overflow:hidden on the parent. The divs are set to 466px wide, float:left, and the parent is 932px wide. Since div 3 and up are all 466px, they drop down below the other two. Not a problem, since the overflow is set. However the jquery animation does not reset the reference point when it scrolls, so the divs stay in this arrangement. Is there any way to keep them all lined up next to eachother horizontally? I'm wondering if there is a CSS solution first, before I get creative with the jQuery. I could easily set it for the next two divs to display right, but there is no telling how many divs there will be and it would quickly become a nightmare trying to account for all possibilities. Here is the current CSS I'm using: Code: #test {background-color:#F1F2F2; width:932px; padding:10px; margin-top:20px;overflow:hidden; display:inline-block; height:400px;} #newswrapper {height:100px; position:relative; left:0px;} #newswrapper div {float:left; position:relative; background:#CCC; width:466px; height:400px;}
This is the first time I've ever not been able to hack around something. I am about to pull my hair out trying to figure out what i wrong with my bulleted menu in CSS. If you look at this page you will se that the arrow bullet for the list is aligning in the middle of a nested UL: http://www.porphyriafoundation.com/about-the-apf/scientific-advisory-board How on earth do I get that stupid little arrow to move up next to the parent item?! If you know the solution I will kiss you through the internet! Here is the CSS: Code: http://dev.porphyriafoundation.com/modules/system/system-menus.css?A
li.expanded (line 11)
{
list-style-type: circle;
list-style-image: url(../../misc/menu-expanded.png);
padding-top: 0.2em;
padding-right: 0.5em;
padding-bottom: 0pt;
padding-left: 0pt;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
}
ul.menu li (line 8)
{
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0.5em;
}
http://dev.porphyriafoundation.com/themes/apf_one/apf_one.css?A
#block-menu-primary-links ul.menu, #block-menu-primary-links li.leaf, #block-menu-primary-links li.collapsed, #block-menu-primary-links li, #block-menu-primary-links .item-list ul, #block-menu-primary-links .item-list ul li (line 135)
{
list-style-position: outside;
list-style-image: none;
list-style-type: none;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
background-color: #ffffff;
width: 173px;
}
#block-menu-primary-links .block-inner li.abouttheapf ul li.expanded (line 394)
{
list-style-type: circle;
list-style-image: url(../../misc/menu-expanded.png);
padding-top: 0.2em;
padding-right: 0.5em;
padding-bottom: 0pt;
padding-left: 0pt;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 16pt;
}
Hello, What is the best way to adjust the vertical spacing between bullets? I tried inserting a br tag inbetween the li tags, but that isn't "valid" XHTML. So for now I'm using the margin-bottom property... Code:
li {
margin-bottom:20px;
}
Any suggestions? Hi, Im just learning css and notice that alot of elements such as navigation can be done using bullet points. Im wanting to make the .nav div into a button so i need to to be 30 pixels high and have a have a 1pixel white line underneath it, also is there a way to stop the indent? my second question is when i add an image as a bullet point its aligned to the bottom of the text, can you change the position of it so its in the middle of it? Code: .nav {
height:30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
line-height:30px;
}
.bul-sec {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
list-style-position: outside;
list-style-image:url(images/bullets/sec.gif);
line-height:30px
}
or is there a better way to do this? Thanks! Here's a quicky before the weekend (FINALLY!!!)... Is there a way to detect if a user clicks on a bullet (or the entire LI tag)? I have this list, but I would like the browser to react differently when clicking on the LI text vs. the LI bullet icon. I've read about putting the icon in background and then moving the text, and this seems to work except for a bug concerning text wrapping... so please don't suggest that... I might be dreaming here... but the forums are usually very resourceful so why not!! Thanx a ton. Olografix Hi there, I have a menu system which uses <UL> etc, but it displays the bullet point. Is there a way to remove these bulllets? Many thanks! |
|||||||