The bullets in IE8 are so small, I tried changing the font-size, but that didn't work.
Code:
<ul style="padding:0; margin:0; margin-left:20px;">
<li>item 1</li>
<li>item 2</li>
</ul>
Is there any way to do this without using an image for the bullet?
You could do this in an IE8 conditional comment...
ul {
list-style: none;
}
ul li:before {
content: "•";
font-size: 170%; /* or whatever */
padding-right: 5px;
}
jsFiddle.
In IE7, you could prepend the bullet via JavaScript and style it accordingly.
You can also do:
li::marker{
content:"\25A0";
font-size: 1.5rem;
color: black;
vertical-align: bottom;
}
Internet Explorer doesn't seem to natively support sizing of the bullets from list-style-type with font-size as Firefox and Chrome appear to. I do not know if this is a known problem or bug.
There are workarounds, but sometimes an image is the quickest and more widely supported "fix".
IE8+ does scale the bullets but not for every font size.
My fix is based on the fact the bullets for Verdana are larger than for Arial. I use css to set Verdana for li, at the same time I add extra spans around li's contents to keep the original font. Also, as Verdana can makes the lines higher, I may need to use line-height to make up for that, but that depends on the browser.
Also I can use bigger font size for li to make the bullets even larger, then I'll have to use still smaller line-height.
ul {
font: 12px Arial;
}
ul li {
font-family: Verdana;
line-height: 120%;
} /* font-size: 14px; line-height: 100%; */
ul li span {
font: 12px Arial;
}
<ul>
<li><span>item 1</span>
<li><span>item 2</span>
</ul>
Related
In my site , there is a big space between each line . This is the css portions of that section. I have tried line-height but it is not working there.
#site-generator a {
color: #5D45A3;
font-weight: normal;
text-decoration: none;
}
You can check the site here . Check the footer area 'Latest News'. I would like to reduce the space between each post names.
Seems like you need to remove the height property from here:
.widget-area ul li {
font-size: 11px;
/* height: 23px; */ /* <- remove */
}
and here:
.widget ul li {
font-size: 11px;
/* height: 16px; */ /* <- remove */
}
Or set these heights as auto
Simply adapt the height value in your stylesheet to your needs.
Line-height should work to adjust the space between two lines.
.widget-area ul li {
font-size: 11px;
height: 16px; /* example */
line-height: 0.8em;
}
Press F12 in your favourite browser to access the developer console (I believe this works in the latest version of IE, FF and Chrome). Inspect the a element that has such an abnormal height. This shows that:
You are setting a line-height of 2.2em on #site-generator in style.css. If that style is deleted, it uses a line-height of 1.625 for body, input, textarea in style.css.
The distance between two li's in that menu is defined by .widget-area ul li and is 23px. If that style is deleted, the css for .widget ul li is used instead with a height of 16px.
You'll need to alter the first one to put the text of one link closer together. You'll need to alter the second one to put the different links closer together.
For the post titles use
#site-generator .widget_recent_entries a{
line-height:14px;
}
in
.widget-area ul li {width:auto !important;line-height:18px;}
I've being trying this for about 5 hours already, and I'm feeling really, really dummy. :s
The overall code is w3c validated.
The problematic snipped:
http://jsfiddle.net/ZnzYk/
I've tried making the circle bullets with css using border radius;
I've tried using a pseudo element.
I've tried using sprites.
The bullet must be (more or less) on the vertical-middle of the text, cross browser, starting from IE8.
So I give up all methods and I'm trying with a background image.
THE CSS:
#main-navigation ul li {
display:inline;
}
#main-navigation ul li a {
font-family: 'Miso', 'Helvetica Neue',Helvetica,Arial,sans-serif;
display: inline-block; /*seems to help on IE*/
font-size: 1.25em;
margin-right: 6%;
text-align: right;
text-transform: uppercase;
background: url('http://s7.postimage.org/fvy10uk1j/bullet.png') no-repeat 100% 50%;
padding-right: 4%;
text-decoration: none;
}
#main-navigation ul li a:hover {
color: #ED1E79;
text-decoration: none;
background: url('http://s7.postimage.org/puiznbth3/bullet_Selected.png') no-repeat 100% 50%;
}
THE HTML
<div id="main-navigation">
<ul>
<li>item 1</li>
<li>and this is item 2</li>
<li>item 3</li>
</ul>
</div>
I get everything but consistence. :(
I don't mind if it stays more or less really, but all least, not that different as it is right now.
Update:
After Asif suggestion:
adding padding-top to 3px has made them look more or less the same on IE 8, IE9 and good browsers. But it feels like a bit hacky and still not consistent (on IE the bullet it's more on top, on all others the bullet it's on bottom (due to the padding-top added);
Isn't there a better CSS code to have the bullets vertically aligned with the text, that don't require a px by px adjustment ?
The intended result:
May be you should add some padding-top:2px (or 3px too) into #main-navigation ul li a.
It works fine with my browser than, did not check it on all.
check here: http://jsfiddle.net/ZnzYk/1/
Hey i just got one more thing to you, I don't know it may help you.
vertical-align: middle
Here you can play with it at w3schools.
I'm learning CSS and html and am stuck on retaining the look of the hover/active state after an item has been clicked. I've looked at several posts on this site and haven't been able to apply the lesson to my application. I also found a solution here http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ but it didn't work for me (I'll assume it's my fault).
Another source suggested using a span class which is what I'm currently trying. I want to have the same hover color (#fff), weight (bold), and background image in use when a menu item is selected to show the user exactly where they are (this is in the secondary sidebar nav and comes in to use on those pages where the main nav has a dropdown with multiple otions). The only characteristic that's working for me is the bold text. You can see the work in progress here:
http://www.mentalwarddesign.net/dynamec/About/index.html
I'm assuming the class I've created in the span is being overridden, but I'm at a loss as to the remedy. Any and all help would be greatly appreciated.
Following is the code for the li and then the corresponding CSS. Thanks in advance!
<ul class="nav">
<span class="chosen"><li>What We Do</li></span>
<li>How It Started</li>
<li>Who We Are</li>
<li>What We Know</li>
</ul>
.chosen {
font-weight: bold;
color: #ffffff;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
display: block;
padding-left: -12px;
background-position: 168px;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
background-color: #fff;
}
ul.nav {
list-style: none;
}
ul.nav li {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #464646;
height: 50px;
background-color: #000;
}
ul.nav a, ul.nav a:visited {
display: block;
width: 160px;
text-decoration: none;
padding-top: 12px;
padding-right: 5px;
padding-left: 15px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #ffffff;
font-weight: bold;
height: 38px;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
background-position: 168px;
}
Ed, the CSS selector :active means "Being activated (e.g. by being clicked on)", not "Having an href attribute that resolves to the URL of the current page". You can use server-side logic to insert a class=”chosen” or similar. E.g:
<li class="chosen">What We Do</li>
And, CSS style: ul.nav li.chosen a { }
There is another way to do it as mentioned on the tutorial link you gave, however it is not a good example.
Well first of all, you cannot wrap an li inside of a span. The only direct descendent of a ul is a li. You can put the class chosen directly on to the li and it works just fine.
<ul class="nav">
<li class="chosen">What We Do</li>
<li>How It Started</li>
<li>Who We Are</li>
<li>What We Know</li>
</ul>
Put the chosen class in the li element itself. Drop the span altogether.
EDIT:
Sorry, in the a element, i meant to say.
A span is a tag, a class is just an identifier. They don't really have anything to do with one another except a class can be used to apply a style to a span but that's true of any tag.
In your case you're trying to put a span (an inline element) around an li (a block level element). In HTML inline elements should not contain block elements.
You should be able to just do it like this: EDIT fixed based on the actual CSS
<li>What We Do</li>
Is there a way to increase the size of just the bullet list-style-type using CSS? I don't want to increase the size of the bullet text, just the bullet type. I can't use images or JavaScript either. It has to be something I can embed inside <style> tags within the <head> tag.
Might not work in old version of IE.
li:before{ content:'\00b7'; font-size:100px; }
Demo
For IE6:
Without javascript or images, I would recommend putting a <span>·</span> in the beginning of every list item and styling that.
I have had to do something similar. My method was to add a span tag around the text within the li:
<li><span>Item 1</span></li>
<li><span>Item 1</span></li>
Then you can increase the font-size of you li and reduce the font size of your span:
li {
font-size: 20px;
}
li span {
font-size: 14px;
}
You may need to adjust line-heights and margins to accommodate for the extra li sizing. But this method will also allow you to colour the bullets separate from text.
To increase the size of the bullet you can use
li::marker
{
font-size: 2rem;
font-weight: bolder;
}
and to change bullet character, the content property will work
li::marker
{
content: '\2746';
font-size: 2rem;
font-weight: bolder;
}
When you say you can't use images, do you mean you can't edit the li tags to add images, or that you can't use an image at all?
On the li elements, you can set the list-style-image property.
li {
list-style-image: url('/imagepath.png');
}
This can still go in your head tag without editing the markup of the list.
no way that I'm aware of.
but you could fake it by using :before
ul,li{list-style:none;}
li:before{content:"o";font-weight:bold;}
put any background color for the (ex: .menu li a )tag and add padding for that you will get like a box then border-radius and then for ( .menu li ) apply padding for left and right for spacing... (explained in reverse order)
#header .nav-primary ul li{float:left;display:block;margin:0;padding:0 22px;}
#header .nav-primary ul li a{text-decoration:none;color:#030;background:#CBCBCB;border-radius:5px;padding:5px 0px;}
Was looking for a solution to this too and found that if you nest a p inside li, you can style the bullets and bullet text separately.
<div>
<ul>
<li><p>Hello</p></li>
</ul>
</div
div ul li {
/*this will style the bullets*/
}
div ul li p {
/*this will style the text*/
}
I am having this issue and I am hoping that it is so simple and that is why I can not figure it out.
I want to use an image divider inbetween navigation <li> elements.
Here is my CSS:
#nav {
width:70.5%;
padding-left:29.5%;
list-style: none;
margin: 0px auto;
float:left;
background-image:url(images/bk_nav.gif);
background-repeat:repeat-x;
display:block;
text-align:center;
#margin-top:-4px;
}
#nav li {
float: left;
margin: 0px;
text-align:center;
font: 13px/100% Helvetica, Arial, sans-serif;
background-color:#cccccc;
}
.divide
{
position:relative;
float:left;
width:4px;
height:42px;
background-image:url(images/divider.gif);
}
#nav a {
color: #ffffff;
text-decoration: none;
text-align:center;
padding: 14px 25px 14px 25px;
font: 14px/100% Helvetica, Arial, sans-serif;
display: block;
text-align:center;
}
Here is the HTML:
<ul id="nav">
<li class="page-item-2 current_page_item">Home</li><span class="divide"></span>
<li class="page-item-20">Our Program</li>
<li class="page-item-10">Social</li>
<li class="page-item-13">Economic</li>
<li class="page-item-15">Environmental </li>
<li class="page-item-17">Resources </li>
</ul>
Currently I only have one divider in there because I am testing it. This code works fine in FF but IE is destroyed by it. Anyone shed some light on this frustrating situation?
UPDATE:
The one is right and the other is not. I was able to create the same error in FF so you can see both. (Just moved the <span>)
<ul>
<li>list item</li>`
<li class="divider"></li>
<li>list item 2</li>
</ul>
Then, in order to make the divider appear closer to the list items, just adjust the margin/padding of the .divider class
First thing's first:
A span cannot be a direct child of a ul element. It is not standard HTML, and so there's no telling what might happen. Only lis can be children of uls.
Suggestion:
I would, were I you, put the divide class on an li instead. That way, you have standard HTML at the very least, and maybe it'll even fix the page. Other than that, I would need a link to a demo as Bears will eat you suggested to be of any assistance.
I'm not entirely sure what "entire background" means, but I'm going to suggest that you use background-position and background-repeat to help. Read through these and it should help you figure out what you'd like to do.