I have a menu built with <ul> and <li> tags. I want to have small separators between sections. For the separators, I just set a background color and a short height on an <li>. Looks very nice... except in IE7 where the <li> seems to refuse to change its height to be shorter than all the other <li>s in the same <ul>. I have tried different ways of affecting the height of the separator <li> (height, line-height, font-size) with no success.
I have a fix that will leave the separator height as is and color the whole background in IE 7, but that is not really the appearance I want (the separator is too big). Can anyone think of another way to control the height of an <li> tag?
Here is a sample - in IE8 toggling compatibility view will show the problem:
<style type="text/css">
.menu {
width:100px;
}
.menu ul {
list-style-type:none;
border-top: solid 1px red;
padding: 0px;
margin:0px;
}
.menu ul li {
border-bottom: solid 1px red;
padding: 0px;
margin:0px;
white-space:nowrap;
}
.menu ul li a {
font-size: 13px;
text-decoration: none;
color: black;
display: block;
padding: 3px;
}
.menu ul li a:hover {
color: blue;
text-decoration: underline;
}
.menu ul li.separator {
height:4px;
background-color:red;
}
</style>
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="separator"></li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
The problem is that ie6/ie7 will expand an empty element to the height of your font. You can get around this by adding font-size:0 and line-height:0 to .menu ul li.separator.
A better solution would be to add a thicker bottom border to the <li> that is before the separator.
.menu ul li.sep {border-bottom-width:6px}
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="sep">Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
Set your css for the LI to display: block;.
Maybe you should try setting your li as follows:
li{
display:block;
float:left;
height:myHeight;
clear:right;//may be necessary, can't check with IE7
}
This is what I've done with similar problems.
In addition to Daniel A. White answer you can experiment with line-height to center your text vertically and create the necessary height.
Do what was suggested in the previous posts. If these changes are causing issues in browsers other than IE, you can do the following to have only IE use them:
.selector {
prop1 : val1; /* default value for all browsers */
*prop1 : val2; /* only IE will pick this one up and it will override the initial value of prop1. */
}
This works much better than trying to do special commenting to include separate style sheets, etc.
Have you tried adding a line-height attribute to .menu ul li?
Else have you tried using horizontal rule <hr> as a separator instead? If you're using horizontal rule, you can set the margin-top and margin-bottom to 0px and see what happens. Can't guarantee it looks the same on IE and other browsers, but at least you tried. =)
Related
This question already has answers here:
CSS space before selector
(2 answers)
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 3 years ago.
I tried making an inline list of links separated by | marks. It might be hacky, but I though it should work with using ::before pseudo elements:
li {
list-style: none;
float: left;
}
li:not(:first-child) ::before {
content: "|";
margin: 0 1em;
}
<ul>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>
It looks about fine, but for some reason the | became part of the link element. It's clickable and highlighted in the same standard blue.
I expected the pseudo element to become the first child of the li element, before the content that consists of the link. What am I doing wrong?
You literally have an extra space before ::before, if you remove that it looks fine.
li {
list-style: none;
float: left;
}
li:not(:first-child)::before {
content: "|";
margin: 0 1em;
}
<ul>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>
I think you made a syntax error. This should be:
li:not(:first-child)::before
I've created a simple horizontal list for links at the footer of my web pages. The problem is that the list exceeds the right margin of div id="footer-links" before it wraps around to the next line. This happens when viewed in my iPad held in Portrait mode resolution 768.
This problem is driving me absolutely crazy!! I greatly appreciate any help on this.
I tried to post a picture from my iPad but it won't let me since I'm new. Here is the code:
The HTML is simple:
<div id="links-wrapper">
<div id="footer-links">
<p>Info</p>
<ul>
<li class="first">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</div>
</div>
CSS:
#links-wrapper {
width:auto;
}
#footer-links {
margin:0 4.545455%;
font-size:.85em;
line-height:175%;
}
#footer-links ul {
margin: 0px 0 30px;
padding: 0;
list-style: none;
}
#footer-links li {
display:inline;
margin: 0;
padding: 0 .4em 0 .6em;
border-left: 1px solid;
}
#footer-links .first {
padding-left: 0;
border: 0;
}
#footer-links p {
font-weight:700;
margin-bottom:1px;
text-decoration:underline;
}
Clay, You can do this by applying a display:block to the LIs inside a media query for the width you want them to respond to. For example:
#media (max-width:768px){
#footer-links li {
display:block;
margin: 0;
padding: 0 .4em 0 .6em;
border-left: 1px solid;
}
}
See HERE
But with that in mind, if you are building a responsive design, you should look into a responsive design framework. They have all of this coded out for you to use. The best and most efficient is Bootstrap3. Look into it and specially into nav-pills.
Good luck
EDIT
In response to your comment below. I understad. I often go through the same deal. In that case you can modify your code and use DIVs instead of LIs. Then use the proper bootstrap classes and cascading to adjust according to screen size to all inline, then two columns of links and then on sigle column on smartphones .
See this other DEMO HERE for a different alternative
*hint, With a little creativity, you may be able to keep your LI's and stack them up like my first example but add a logo or something else next to it as a filler ;)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
How do I add bullets back to a list when I've applied list-style:none; globally?
Add a class to the list, like with-bullets, and set the list-style for that class to circle.
E.g.
CSS
.with-bullets {list-style:circle}
HTML
<ul class="with-bullets">
<li>Value 1</li>
<li>Value 2</li>
</ul>
There's also lots of other stuff you can do with list-style: http://www.w3schools.com/cssref/pr_list-style.asp
you can use pseudo css for styling the list styles which will not effect the li styles and you can give any style for the li like i have done
demo - http://jsfiddle.net/victor_007/sbmam1vj/5/
add a class for ul for which you want to change the styles
currently i have used star for list style you can use anything
ul.line-legend {
list-style: none;
}
.line-legend li {
position: relative;
}
.line-legend li:before {
content: "\2605";
color: black;
font-size: 12px;
top: 0;
position: absolute;
left: -19px
}
<ul class="line-legend">
<li>one</li>
<li>two</li>
</ul>
There are many ways to override css, here are 2 of them:
Option 1: inline css
<ul style="list-style:circle">
<li>Value 1</li>
<li>Value 2</li>
</ul>
Option 2: using !important
html:
<ul class="list">
<li>Value 1</li>
<li>Value 2</li>
</ul>
css:
.list{
list-style:circle !important;
}
Im trying to change display to "block" from "none"; am I doing right? Why is not working?
#sub_1{
display: none !important
}
.cls1:hover #sub_1{
display : block !important
}
Please go to the bottom of my code in CSS! Thanks
JSFIDDLE
I have correct your code you should understand the hierarchy of HTML then write code accordantly.
#header ul li ul{ display:none;}
Your ul is not within li tag of class cls. You have closed your li and after that placed ul but acording to your css #sub_1 must be within .cls, that's why it is not working so change your html to
<li class='cls1'>item 2
<ul id='sub_1'>
<li>item A</li>
<li>item B</li>
<li>item C</li>
</ul>
</li>
Hope you understand....... let me know if there is any query
I would like to add a border radius to a list of items but I don't want each item to have the style applied to it. Right now my style has the odd list elements with one color and the even elements a darker color. When I apply the border-radius to the li it is visible for each row but I only want the first item and the last item to have this be applied to. How do I make this happen without making a special id or class for only those two list items?
Here is my HTML and CSS:
<section id="list">
<ul>
<li>Song 1</li>
<li>Song 2</li>
<li>Song 3</li>
</ul>
</section>
ul{
list-style:none;
padding-left:0px;
width:600px;
}
ul li:nth-child(odd){
background: rgba(12,147,0,0.4);
}
ul li:nth-child(even){
background: rgba(12,147,0,0.7);
}
li{
padding:15px;
border-radius: 20px;
}
use :first-child and :last-child
li:first-child, li:last-child{
padding:15px;
border-radius: 20px;
}