I have a list that resembles:
<ol>
<li class="node">1</li>
<li class="node">2</li>
<li class="node">3</li>
<li class="node">4</li>
<li class="node_end">5</li>
</ol>
I am using images to replace their default bullet points in CSS. Separate images are used for the end node as well as another image for all other bullet points. The images display, however as soon as I add these images a 4 pixel padding is somehow added to the top and bottom of each list item. This extra spacing changes the height from 26 pixels high to 34 pixels high. This gap provides about an 8 pixel separation between the different bullet point images which were meant to have a 0px separation as per my design.
The CSS I made:
li {
margin: 0;
padding: 0;
border: 0;
}
li.node {
list-style-image: url('../imgs/nodes/udr.png');
}
li.node_end {
list-style-image: url('../imgs/nodes/ur.png');
}
Is there any way to remove this spacing? I have tried removing all things padding/spacing/border related to all li's, but nothing so far.
EDIT:
I do not think I am making my question clear enough, so I am posting the image of what it looks like on my end.
The joining bars as you see in the image above are supposed to be connected (as if one continuous image). Removing the special CSS images for bullet points reduces the height of each item to the height of the CSS bullet point image (as I have tested using Google Chrome's element inspecting tool).
EDIT 2:
A close example to show my problem can be found here: http://jsfiddle.net/EyVRF/1/
Garry Cairns might be onto something. I tested your code and borrowed a list style image from a website that was a good size and i see no padding that would be an issue, or at least not the type you're seeing.
http://jsfiddle.net/BYQQV/
list-style-image: url('http://www.globalindustrial.com/site/img/bullet_homecat.gif');
You may also want to consider not having to create a whole new class for the last list item. Try instead
li:last-child { list-style-image:.... }
Althouth IE is not happy with that. But for future reference.
lack of .css and html unable me to answer you.
About : Is there any way to remove this spacing? YES there is.
try this :
ol, li{list-style-position:outside;margin:0;padding:0}
or
ol, li{list-style-position:inside;margin:0;padding:0}
Let me guess ? You didn't reset your .css ?? (margin:0;padding:0)
Ok, i can see what you want .. and sadly, you wont be able to achieve what you want this way becose the 'padding in between the bullet and first character is 'browser-specific' and unmanagable through css.
You will have to use another technique : background image.
<ul>
<li class="node">1</li>
<li class="node">2</li>
<li class="node">3</li>
<li class="node">4</li>
<li class="node_end">5</li>
</ul>
ul, li {
margin: 0;
padding: 0;
}
li {
font-size:16px;
line-height:16px;
list-style-type:none;
background:red url('http://placehold.it/16x16') no-repeat scroll 0 0;
padding-left:16px;
border-bottom:1px solid blue;
}
li.node_end {
background:blue url('http://placehold.it/16x16') no-repeat scroll 0 0;
}
http://jsfiddle.net/2RtB7/1/
Carry on
PS, try to search a little more before asking for help --> CSS: Control space between bullet and <li>
Related
I have created a simple navigation bar using html and css. The issue with it is when zoomed in, the structure changes as not all the links can fit in one line. Here is the jsfiddle: http://jsfiddle.net/HamishT/b3Lw4/
Here is the code in case you are unable to access jsfiddle:
<div id="navBar">
<ul>
<li class="nav">HOME</li>
<li class="nav">PRODUCTS</li>
<li class="nav">SERVICES</li>
<li class="nav">CONTACT US</li>
<li class="nav" id="order">ORDER</li>
</ul>
</div>
#navBar {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#5a5a5a;
font-size:12px;
font-weight:bold;
background-color:#eeeeee;
padding:0.1em;
box-shadow: 5px 5px 5px #888888;
}
.nav {
list-style:none;
display:inline;
border-left:3px solid;
}
.nav a {
text-decoration:none;
color:inherit;
padding: 0 20px 5px 20px;
}
.nav a:hover{
border-bottom:3px solid;
}
#order {
float:right;
color:#E65C00;
}
I have tried various ways, none to any success. One way I am wondering about is if I can edit it so that it will flow off the page if it doesn't fit (so only part of the width of the navbar is seen at one time), but I can't seem to work my head around it. Another way I think would be to detect the screen width/zoom and change the structure completely if the available space is too small, but I am unsure if this is possible (I've looked into it, but have not found any that seem to work the way I've described.
Just in case it helps: one thing I have spotted is the floats may be preventing me from being able to fix this.
Are there any ways to fix this and if so, how? I don't mind how it works (eg. flows off the screen or zooms the whole navbar out) so long as it does work. I've been stuck on this for three days now (I'm still new to it all) so any help whatsoever would be greatly appreciated.
The problem is caused because float is considering a 100% width for the navbar. Add a width in pixels to fix the size of the navbar, like this
#navBar {
width: 550px;
}
Although this will cause elements to flow out of current window (and hence bringing the scrollbar). Your best bet in such a case is make stuff responsive and create different styles for different widths.
When you zoom into the page, the size of the viewport is decreasing.
That means you can use media queries to create proper breakpoints:
#media screen and (max-width:600px) {
#navBar {
font-size:5px;
}
}
The 600px mark works well in my test case. But you can't reproduce it via jsfiddle. 5px aren't too small since you're zoomed in. The best approach however would be using em values instead of px since they allow to change the reference font-size: body { font-size:0.9em; }. This will be inherited by any other element.
I have found a solution (it may not be of use to everyone who sees this, but is one alternative solution to the issue). I put the li element that floats right in a separate div so that when zoomed in it will not drop below the others or overlap. Instead the other li elements will drop down before they overlap, whilst still working properly.
From the HTML, the #order element (float right) is in a div before the other li elements put into a new div.
<div id="navBar">
<div>
<ul>
<li class="nav" id="order">ORDER</li>
</ul>
</div>
<div>
<ul>
<li class="nav">HOME</li>
<li class="nav">PRODUCTS</li>
<li class="nav">SERVICES</li>
<li class="nav">CONTACT US</li>
</ul>
</div>
</div>
Here's a working jsfiddle to show what I mean: http://jsfiddle.net/HamishT/3pd5Z/#base
I want to create an unordered list with list items that have images and the bullets beside them. If I create a background image as the way to achieve this the image is appearing behind the text. If I set the image as a list-style-image, it's not lining up with the text and it's taking away the bullet that I want. Here is my code for the list-style image and I was going to attach an image, but I don't have enough points yet since I'm new to achieve this. Any help would be appreciated!
Thanks!
.ul1
{
margin-left: 25px;
list-style-image: url('Images/Air Icon copy.png');
}
<div>
<ul id="Ul1">
<li class="ul1">Clean air: Our emissions are 250 percent lower.</li>
</ul>
</div>
This is what I used for the same problem you had:
list-style: none;
background: url('something.png') 0 0 no-repeat;
padding: 0 0 0 30px;
height: 30px;
Instead of using an image that wouldn't align properly i decided to use it as a background and just don't repeat it. Play around with the padding and height untill it fits how you want!
Jsfiddle if you're interested
EDIT: Just read that you wanted to keep the bullet. Take away the list-style: none and you're good to go.
Here is the another way to show the image and as well bullets.
.ul1
{
left:12px;
/* list-style-type:none;*/
}
li{position:relative;}
li.ul1:before {
content: "";
content: url(http://lorempixel.com/20/20/);
margin:10px 0;
}
Check the DEMO.
div contains single line texts as li elements
div width is determined by widest item width.
If mouse is over some item, its font style changes to bold.
If mouse is placed hover wide items, bold font causes width increase and this causes div width also
to increase.
This looks very ugly if mouse is moved in list.
How to disable this increase without using hard-coded width?
I tried overflow: hidden style as shown in code below but div width still increases.
html:
<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li>Product1</li>
<li>Product2</li>
...
css:
.site-leftpane {
background-color: #FBFBFB;
clear: left;
color: Black;
float: left;
margin: 0;
overflow: hidden;
padding-top: 1em;
}
.tree {
line-height: 1.6em;
list-style: none outside none;
margin: 0;
padding: 0;
}
.tree li a {
color: #333333;
cursor: default;
display: block;
font-family: "arial","sans-serif";
margin: 0;
}
.tree li:first-child {
font-weight: bold;
}
.tree li a:hover {
color: #E47911 !important;
font-weight: bold;
}
Update
I chaged style according to proposed answer to
.tree li a {
color: #333333;
cursor: default;
display: block;
font-family: "arial","sans-serif";
margin: 0;
}
But problem persists. Web page can used in different screen resolutions. Texts are created by customer at runtime. Right side of contains other div which automatically uses remaining space.
I do'nt knwo how to use hard-coded max-width in this case. max-width specifies maximum allowd div width. Usually in this case div width is smaller, hover causes its increase and thus max-width does not solve the issue.
I had a similar problem and found one way to fix it was by using some jQuery, simple and works:
$('.menu-item').each(function() {
$(this).css( 'width', $(this).width()+'px' );
});
Basically you have jQuery "hard-code"/set the initial width of each of your class elements that was calculated by the browser based on text length and font settings, so that when you hover over each element which say changes the font-weight of the text, then the width won't change, it will remain the same as it was initially.
Ok, this isn't a great answer, but may provide a quick fix, from which someone else could base a real answer :)
Playing around with your HTML/CSS I was able to get what you want (well, emulating a dynamic max-width) by adding duplicate entries for each <li> in the list, adding a "pad" class, which basically hides the content.
<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li>Product1</li>
<li>Product It's a product, yes.</li>
<li class="pad"><a>Product1</a></li>
<li class="pad"><a>Product It's a product, yes.</a></li>
</ul>
</div>
And in the CSS I added this to the end:
.tree li.pad {
line-height: 0;
font-weight: bold;
visibility: hidden;
}
What it basically does it add hidden entries for each of your list items, but the pad class makes the additional entries zero-height, but bold (and hence the correct width). It kind of relies on you being able to generate the HTML side, to allow adding the duplicate entries.
However, I think that this is a terrible solution, for numerous reasons (it's adding redundant data, it would mess up any non-visual browser, ...).
Try adding padding:0px and margin:0px to your :hover, also you could add a max width to your div to keep your width at a single size. This in my opinion would fix your problem.
I don't think you can be certain of the actual pixel width when your server builds your page.
The users browser does all of those calculations, and it doesn't really expose them (though client-side scripting languages & toolsets like jQuery can see the end results).
Honestly, your best bet is to either assign a fixed-width to the items, calculated well ahead of time, and accept that long text might line break. If this doesn't work for you, the other option you have is to change the hover behavior. Perhaps instead of making the text bold you could change the text/background color? This would be an alternate way to indicate the currently hovered item and it won't change the character size or spacing.
Can anyone help me with list.
I have an image:
And now I need to build list with default bulls replaced with left side arrow (but not with whole image):
How I can achive it using cross-browser css?
My HTML markup is:
<ul>
<li>Conveniently located on Adelaide St. W, one block east of the Bathurst and Adelaide intersection, just north of the Gardiner Expressway, downtown Toronto.</li>
<li>All units are located indoors, which means they are all climate controlled.</li>
<li>There is an indoor loading dock with four bays, two of which are large enough to accommodate up to 50' trailers.</li>
<li>Complimentary use of on-site dollies and pallet truck.</li>
</ul>
See this question regarding using Sprite images with list style backgrounds:
use CSS sprites for list (<li>) background image
I guess this is what you were asking for.
Check out this fiddle
Here is the code
The HTML is the same.
The CSS
ul {
list-style: disc inside none;
}
ul li:before {
position: absolute;
content: "";
left: 8px;
background: url('http://i.stack.imgur.com/KKMcz.png') no-repeat #fff;
width: 8px;
height: 14px;
}
you need to set the
background: transparent, url(/image/sprite.png) no-repeat -XXpx -XXpx;
where the -XXpx moves the position of the element. The only problem with this is you will have to make sure the padding on the li where the bullet shows is not too wide and shows only the size of the image you want.
the other option you have is to set the list-style-type: none; and then drop a div or span at the beginning of you li elements that you want to have the image. I wouldn't recommend this but it would work,
ul {
list-style-image: url(/xxx/xxx.gif);
}
Will give you the whole image, can't you just then split the image down the middle and use the left part?
Here's another method that should be cross-browser. You would need to change your sprite image, however. (I couldn't seem to open the image with Photoshop or GIMP or any thing else without it messing up, though. You would have to fix it up yourself). (fixed)
Demo
Basically it offsets the other image vertically instead of horizontally. If you have longer lists, you will have to modify how far it is offset vertically. This should work on all browsers and I tested it in IE9 with compatibility settings changed. it works even in quarks mode.
The modified image looks like this:
Heres a screenshot to make it clear. I'm trying to figure out a robust way of making the bullet images vertically aligned to my li content. As you can see my content is currently too high.
Many thanks 'over-flowers'...
http://dl.getdropbox.com/u/240752/list-example.gif
Well, some css code to see how you currently set your bullet images would be useful ;-)
Instead of actually setting the 'list-style-image' property, I've had far more consistent results with setting a background-image property for the li element. You can then control the positioning with pixel accuracy. Remember to set a suitable left-padding value to push your list item contents clear of the bullet image.
I like #bryn's answer.
One example I've used successfully:
#content ul li {
margin: 3px -20px 3px 20px;
padding: 0 0 0 0;
list-style: none;
background: url(newbullet.gif) no-repeat 0 3px;
}
The negative right margin may or may not be needed in your case.
You may need to adjust to meet your specific needs depending on your image. (My image is 14 x 15.)
You must specifically set margins and padding if you want a similar look across browsers as Firefox and IE use different defaults for displaying bullets.
You can use something like this in your css...
#content li{
list-style-image: url(../images/bullet.gif);
}
use background-image, for your li elements, add padding.
.box li{
padding-left: 20px;
background-image: url("img/list_icon.jpg");
background-repeat: no-repeat;
background-position: 0px 2px;
margin-top: 6px;
}