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;
}
Related
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.
I am using custom bullet points on a website.
Now this site will also be available in Arabic.
.post ul li{
color: #555555;
background: url(images/ico-bullet_round.gif) no-repeat !important;
background-position: 300px 6px !important;
padding-right: 15px !important;
padding-left:0 !important;
direction:rtl;
}
However with direction:rtl; I am unable to have all the bullet points on the right side. Some are more indented than others.
Please see a screenshot showing the problem.
Any suggestions on how to simply align all bullet points on the right?
UPDATE: Please see this screenshot with background-position set to 0 6px. It has something to do with direction:rtl; but I can't figure it out.
Is there any reason why not simply list-style-image, which is designed specifically for custom bullets?
ul { margin: 0 20px; padding: 0; }
ul li {
margin: 0; padding: 0;
list-style: disc url(images/ico-bullet_round.gif);
direction:rtl;
}
works for me, assuming you do mean the right-hand side when you say “right side”. You could have them on the left as well if you wanted by putting the rtl on a child div inside the li, but that'd look a bit strange for Arabic, I think.
I had the same problem and got over it by using:
ul{direction:rtl;}
li{direction:rtl; margin-right:20px;}
The functioning attribute is using: margin-right:20px while using direction :rtl
Thanks
One solution could be to put background-position like this:
background-position: 100% 6px !important;
I supppose that the direction: rtl, does not influence in backgrounds.
Trying using • at the beginning of the sentence, while aligning everything to the right. That way you can get something like this:
مرحبا •
Try ::before and ::after in css styling and your rtl file and use JavaScript to release css effect.
Example:
this is (RTL list but bullets are not suitable
Here are you Css code for before RTL.
ul.points li:before{content:"\f0c8";font-family:fontawesome;color:#135588;margin-right:7px;font-size:.75em}
Then After i made RTL file i used this code :
ul.points li:after{content:"\f0c8";font-family:fontawesome;color:#135588;margin-right:7px;font-size:.75em}
but look for this image ( it has bullets before and after ( hence your turn to remover it using javascript (add class and remove class) to Css:
this is (after) rtl css style
I wish this helps noting that it's my first comment in stack ever!
Try background-position: right;
Worked for me.
I have an ordered list that I am trying to mark up the HTML can be seen below:
<ol class="main tags">
<li class="main">Gump...</li>
<li>We ar...</li>
<li>We a...</li>
</ol>
The CSS looks like this:
ol.tags {
list-style: decimal none outside;
}
ol.tags li {
background: transparent url(../images/tag.jpg) no-repeat;
height: 80px;
margin: 0px 0px 0px 0px;
padding: 16px 0px 0px 60px;
}
And the result looks like this:
http://gumpshen.com/images/temp/Gumpshen_OL.png
I want to have the numbers appear cenetered inside the white "tabs", can anyone help please?
Hey Burt, what Sortiris is pointing out is where your order list has a kind of running repeating background see an good explanation here : http://codeasily.com/css/style-ordered-list
I have tried to do what you are talking about but I fear it may not be possible, without custom numbers or markers.
You are on the right track however but I would make the ol list style inside, then you still have to figure out a way to push the order list number away from the list content.
It looks like you will want to add your own counter to your list.
you can use the
background: transparent url(../images/tag.jpg) no-repeat; for ol.tags, not for ol.tags li
One option might be to make your white square image larger, so it's as tall as the height you want your li's to be. Then make it the background of the ol instead of the li, and make it repeat in the y-direction.
Another option would be to switch the ol to have a style of inside as mentioned before, and then stick a span inside your li with some padding-left to position it where you want.
Edit: by making the white square image larger, I mean adding transparent "padding", or something that matches the background of the page. So the image has larger dimensions, but the white area remains the same.
Sorted it here is what I done:
First I added a span tag around the content:
<ol class="main tags">
<li class="main"><span>Gumpshen was founded by Brendan Rice who has over 10 years experience in web development.</span></li>
<li><span>We are web design & development studio who are passionate about what we do.</span></li>
<li><span>We are based in Belfast, Northern Ireland and but don't let that put you off if you are not from Northern Ireland we would still love to help.</span></li>
</ol>
The I was moved the decimals to inside as suggested by joelt (thanks Joe) and was finally able to shift stuff around using minus margins on the span tags:
ol.tags {
list-style: decimal none inside;
}
ol.tags li {
background: transparent url(../images/tag.jpg) no-repeat;
height: 80px;
margin: 0px 0px 0px 0px;
padding: 26px 0px 0px 20px;
}
ol.tags li span {
margin: -24px 0px 0px 50px;
display: block;
}
I'm trying to find a good why to display my Icons.
I want to use a CSS and not an img tab.
My code:
<span id="Span1" class="iconPrinter"></span>
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 8px;}
or
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; width:16px;}
It works fine on FF but on IE6 I can't see the Icons, only if I insert a span in the span.
When I use a div or display:block; it work fine, but I need it to be inline.
Thanks
The simplest way I found to insert an inline tag like span what will work with IE6 is:
(for 16px icon)
<span id="Span1" class="iconPrinter"> </span>
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; font-size:16px;}
IE6 probably won't show the inline element with padding if it has no content. Try adding into the span;
<span id="Span1" class="iconPrinter">& nbsp;</span>
(Note that there is an extra space in the as the code coloring mangles it otherwise)
On the other hand, in order to give the span a width, you could also try using
.iconPrinter { display: inline-block; }
In order to get around FF2 issues with inline-block I found a suggestion online which worked for my setup. Now for my setup I have a text which also has padding-left and a background-image set to the left side of the text. I needed the whole span to fire an event when clicked, which just wasn't happening when I used display block in IE6 or IE7.
I came here and it was suggested to use inline-block which fixed my issues, but left me with FF2 compatibility issues. I then found this solution.
display: -moz-inline-box;
display: inline-block;
Having both display calls doesn't seem to have any adverse effects in any of the browsers I tested IE6,7,8, FF2, 3.
What is your purpose with the icons? Do you just want to show the icons, why not use the "img"-tagg. If you should be able to click them wrap them in an "a"-tagg.
ie6 has a bug with vertical-padding on inline elements. You could also use divs and float them.
What is inside of the span? Anything?
Try adding:
#iconPrinter{
background:url(../images/BWIcons.gif) no-repeat 0 0;
padding: 8px;
text-indent: -100000px;
overflow: hidden;
}
And if the span is just there for the icon, add some kind of html special character. This may force IE to acknowledge that something is there, and it's more accessible for those without CSS or with screen readers, something like:
<span id="iconPrinter">⎙</span>
Try to give css height to the span class. Something like
.iconPrinter{
background:url(../images/BWIcons.gif)
no-repeat 0 0;
width:16px;
height: 16px;
}
I realize this is an older post, but I came across this question while searching and thought that this might help others. I was using CSS background images for links and also had trouble with IE6 and IE7.
Here's the HTML:
Edit Admin
Delete Admin
Here's my css for browsers other than IE6 and IE7.
.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
height: 16px;
width: 16px;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 0px;
float: none;
display: -moz-inline-box; /* For FF 2 */
display: inline-block;
text-indent: -9999px;
overflow: hidden;
}
Here's the additional css that I conditionally add only for IE6 and IE7:
.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
display: block;
float: left;
}
Use padding and add a zoom: 1 in your css class
<span id="Span1" class="iconPrinter"></span>
.iconPrinter {background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; height: 15px; zoom: 1 }
I've styled some unordered HTML lists and their heading to look like this in Firefox:
alt text http://img24.imageshack.us/img24/711/screenshot001nij.png
Unfortunately, in IE7, they look like this:
alt text http://img11.imageshack.us/img11/8343/screenshot002e.png
The relevant HTML is
<div class="list-column">
<h4>Types de pêche</h4>
<ul>
<li>Pêche en lac</li>
<li>Pêche en Rivière</li>
</ul>
</div>
And the CSS is:
.list-column {
float: left;
margin-right: 20px;
width: 20em;
}
div.list-column h4 {
background-color: #FDD041;
padding: 5px !important;
}
ul li {
background-image: url(images/arrow.gif);
background-position: 0 11px;
background-repeat: no-repeat;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 6px;
margin-left: -20px;
margin-top: 2px;
padding: 2px 0 2px 18px;
}
I suspect the fact that the div containing the list is floated left is probably the root of my problems, but I'm not sure how to workaround the poor display in IE7?
Update:
I tried adding a 'zoom: 1' property to the 'ul' elements to see if giving the elements 'layout' would fix the problem in IE, but it didn't.
The problem is definitely not related to the rounded corners. I turned them off temporarily but it didn't change anything in IE (apart from the appearance of the corners).
Thanks,
Don
IE and the other browsers have a different default style sheet.
IE indents list items by putting a ‘margin-left’ on the <ul>. The other browsers put a ‘padding-left’ on the <ul>.
So if you want to look the same in all browsers, set both ‘margin-left’ and ‘padding-left’ explicitly on <ul>. In your case, you would want to add something like “margin: 0; padding: 24px” on your “div.list-column ul, ul.round” rule.
(The default list ‘margin-left’ in IE is, to be precise, ‘30pt’.)
A common solution for this is setting the width of the element. This will make IE everything inside the bounds of that width.
I think this is a case of IE-7 auto indending the li's
the easiest way to debug this is to install IE-8; switch to compatible ie-7 mode.
then launch the developer tools from the tools menu
You can then inspect the individual elements and check if there are hidden padding or margins being applied
I think that it can depend from different default padding on ie and firefox. Try to use reset.css in your code if you haven't already done it.
P.s. in ie8 you have developer tools which are similar to firebug. Try to use them and see if you can't understand the issue...