There is an unordered list, and one of the list items contains two links. For some reason, Internet Explorer 8 is showing the part of the list item beginning with the first link as outside the list and apparently outside the containing div also. Here is what it looks like (those two lines should be on one line!):
Illustration of list Problem http://img231.imageshack.us/img231/7726/listproblem.png
The html:
<!-- These div make up the background image -->
<div class = "box">
<div class="boxBody">
<ul>
<li> </li>
<li> </li>
</ul>
</div>
</div>
The CSS:
li {
list-style-type: square;
margin-left:25px;
font-size: 12px;
}
EDIT: On going step by step through the code, I found that for some reason having links inside the li is what is causing the problem. Anyone know why this would be?
I don't think having links inside LI can cause any issues. By any chance are you using any reset CSS? (some CSS code to reset LI, UL etc..?)
And the answer is...that I forgot to close a previous link.
Related
please visit link , if you search for text "Device", you can see it is displaying 2 times.
before text "Device" , 1st time, it showing bullets.in second time, it not showing bullets, but we used same code for both.
<ul>
<li>Device: HTC M8</li>
<li>Design: Art & Graphics</li>
<li>Material: Polycarbonate Hard Case</li>
</ul>
You need to add styling to it list-style: initial;, because everywhere you are using list-style: none; as default and this applies to the second one. If you have this styling already in place, then check that it would be by hierarchy higher than initial one.
Try this
.next-content-product ul li {list-style: inside disc;} /** add this in your style sheet **/
At first it working because you have define
.add-to-cart-wrapper li{list-style: inside disc;}
But in other it is not define
On small screens ( <720px) I have a toggle menu with a font awesome icon.
I noticed yesterday that there is a full stop appearing before the menu. I can't figure out where this is coming from.
The dot in question.
The code for the menu (taken from developer tools.)
<ul id="toggle-menu">
<li class="pullDown">
<a href="#" id="pull">
<i class="fa fa-bars fa-3x "></i>
</a>
</li>
</ul>
It it appearing in the DOM within this line, even when all elements within the li are deleted.
<li class="pullDown"></li>
The site is here
The full code is here
Thanks in advance
In your style.css add this code
#toggle-menu li {
float: right;
list-style-type: none;
}
See here for an example of it in action.
The reason that dot is there is that you're adding it as a list element -- it's not a full stop, necessarily, just the marker for a new element in an unordered list. list-style-type:none gets rid of any style for the list elements.
It's not a full stop, it's a list item bullet. You're using a list with <li> tags, and the default behaviour is to put a bullet in front of whatever is inside the <li>
The real answer here though is that your code isn't very semantically correct. Why is an icon inside of an unordered list in the first place? Consider two other options...
1) Just putting <a> containing your icon in front of the nav and leaving it at that
2) Incorporating the font awesome icon in to a :before or :after psuedo-element of the nav menu itself using CSS styling. Information about how to add icons via CSS can be found on the font awesome site.
Your toggle-menu class should contain something like
list-style: none;
I'm working on a resume-layout done in html/css. The problem I am encountering is an inheritance issue, I think. I've done a bit of research online, and this seems to be a fairly common problem, often associated with IE (insert expletives about IE).
This is what I'm attempting:
Edit
I want to have the parent list item underlined with no bullet point (disc).
I want the child (nested list) to have a bullet point (disc) and no underline.
So I've gone to JSfiddle and cut out the sections of the code (CSS normalize checked) to try and sort out what's going on and what I might be doing wrong.
HTML:
<h3>Qualifications Summary</h3>
<ul id="qualifications">
<li>BS in Computer Animation with a focus on art, design, illustration, and motion graphics.</li>
</ul>
<h3>Related Experience</h3>
<ul class="experience">
<li>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios
<ul>
<li>Educator, Illustrator, Graphic & Web Designer</li>
</ul>
</li>
<li>Nov 2006 - April 2008 ~ <span class="jobtitle">Graphic / Web Design</span> ~ National A1 Inc, Philadelphia, PA
<ul>
<li>Junior Designer</li>
</ul>
</li>
</ul>
This is the CSS:
ul {
padding-bottom: 15px;
margin:0px;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: 14px;
}
/*Nested List Issues*/
ul.experience li {
text-decoration:underline;
list-style: none;
}
ul.experience ul li{
text-decoration:none;
list-style: disc;
}
Even with the code sectioned out and only the CSS that relates directly to it used, I still get the error.
Question I've been asking myself:
1) Is it something in the Normalize code? Not that I can see.
2) Is it the Browser/version? I use Chrome 36.x mostly. I've checked it in IE and Firefox. The same issue occurs.
3) Is there another way of doing this? Perhaps and very likely my syntax or usage is wrong. I've tried other ways including the > selector, but the most I get is the discs on the nested li shows up.
I made other attempts but as I am new.... I can't posted them yet. :)
I just can't seem to get it to work. What have I done incorrectly?
edit
Current suggestions offer to place a span tag around the parent element's content and style that. So far that seems to work. It adds more code to the markup rather then focus on CSS muscle. Inelegant but functional.
The normalize setting causes margin and padding on the list items to be removed. Try setting the list item to have a margin-left of 2em for instance. Also, instead of the text-decoration on the outer li, place your text in a span, and set the text-decoration on that instead.
You don't state exactly what the issue is, but I'm going to assume that it's 2 things:
1) The underline text-decoration property is showing up in the sub-list items. This is a bit confusing until you look at the markup:
<ul class="experience">
<li>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios
<ul>
<li>Educator, Illustrator, Graphic & Web Designer</li>
</ul>
</li>
...
Note that the first-level list item for <ul class="experience"> is not closed until after the sub-list is closed. What this means is that the sub-list gets the underline appearance even if you over-ride it on the sub-list items (as the property is actually on the parent list item).
To get around this, wrap the part you want underlined in another element, like a span and apply the underline style to the span:
<ul class="experience">
<li><span>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios</span>
<ul>
<li>Educator, Illustrator, Graphic & Web Designer</li>
</ul>
</li>
...
CSS:
ul.experience > li span {
text-decoration:underline;
}
2) The other issue I assume, is the disc not showing up. That's because normalize.css removes margin and padding from all lists. Add that back in:
ul.experience ul {
list-style: disc;
padding-left: 2em;
}
fiddle
IF you un-check "Normalized CSS" on the Fiddle Options (left pane of Fiddle) your code should work somehow... (it worked for me).
Using both steveax and Steven Don's suggestions I still had trouble with it. I realized that a part of the issue was with Bootstrap 3.0. After singling out the code and the CSS in Jssfiddle, though it mostly worked there, it still was not working in my working draft.
After a bit of adjusting both html and the css I finally got it to behave with little issues. However where it worked in JSFiddle, it wasn't working in my working code.
So because I was using bootstrap I double checked the documentation and still couldn't find the issue there. So I used Chrome's inspect element. For some reason list-style does not override the more specific list-style-type in Bootstrap.
So I switched the CSS around so I wasn't turning off and then on-again the list style Bootstrap was enforcing. I just switched off the disc for the main entry heading that was underlined as well, and then used the span tag on it (the first li) to underline it while avoiding underlining the child element as well.
I even removed the span around the job title, and used the strong tag instead.
HTML
<ul class="experience">
<li><span>Jun. 2002 – Present ~ <b>Freelance Illustrator & Web Designer</b> ~ Drakenhart Studios </span>
<ul>
<li>Educator, Illustrator, Graphic & Web Designer</li>
</ul>
</li>
</ul>
CSS
ul.experience > li { padding-left:2em; }
ul.experience ul { list-style:disc; padding-left:2em; }
ul.experience > li span { text-decoration:underline; }
Less code then I was using before in my CSS. It now works properly.
Try using the CSS important. An example of how it would be used is below:
text-align: center !important;
As you can see, it goes just before the semi-colon. Hope this helps!
I have a list with custom image bullets. If the user hovers her mouse over the bullet image, I'd like to either:
display a title attribute, or
display helper text
I can use JavaScript-based solutions, if needed
My source looks like this:
<style>
li.important { list-style-image: url(important.png) }
</style>
<ul>
<li class="important">Test</li>
<li>Test</li>
</ul>
Edit: I want the mouseover/title text to appear only over the bullet, but not over the body of the <li>.
As far as I know, it's not possible to pickup a mouseover of the bullet rather than just the <li> item.
One alternative (which is a bit dirty, but hey) is to include your "bullet" as part of your markup.
<li><img src="important.gif" alt="Something" title="Hey! Useful info!" /> Test</li>
jQuery('li.important').mouseover();
I'm failing to see the problem with the first bullet point you mentioned:
http://jsfiddle.net/xrGqk/2/
Tested setting a title attribute on a custom image LI in Chrome, FF, IE7. Mouse over the image on the LI and the title pops up in all three browsers.
onmouseover seems to work fine as well:
http://jsfiddle.net/xrGqk/4/
You should have an alert when you mouse over the LI custom image bullet.
Give these a try and see if they work for you. If so, consider posting the code that is giving you problems.
I have an HTML ordered list, that I need to apply a strikethrough to. I have done this in CSS as below:
.Lower-Alpha {
list-style: lower-alpha;
margin-top: 2pt;
margin-bottom: 2pt;
text-decoration: line-through;
}
The issue I am having is that this strikes through the content in the list, but not the number of the list (and I need to do both).
Eg I am getting:
a. struckthrough content
but I need:
a. struckthrough content
Any suggestions welcome.
Cheers
easy as pie: list-style-position: inside;
http://jsfiddle.net/seler/NWbrR/
edit: it looks like it's browser dependent behaviour. in mozilla it renders ok.
edit2:
for full browser compability u can use this js script: http://jsfiddle.net/seler/32ECB/
#Haem; You can apply :after property
li:after{
border-top:1px solid red;
display:block;
content:"";
margin-top:-8px;
}
check the fiddle for more may be that's help you
http://jsfiddle.net/sandeep/NWbrR/4/
the list style is NOT styleable in this way - you'd have to remove the list style identifier (a,b,c etc) inside the li as content.
This is default browser behaviour and you wont be able to strike through the number/letter provided by the list.
If it is possible in your situation you could hide the numbering provided by the list and add it to the list text content yourself.
You might have to take care of the numbering yourself - either manually, server-side, or some jQuery - and use an unordered list like this:
<style>
.Lower-Alpha
{
margin-top: 2pt;
margin-bottom: 2pt;
text-decoration: line-through;
list-style: none;
}
</style>
<ul>
<li class="Lower-Alpha">a. Foo</li>
<li class="Lower-Alpha">b. Bar</li>
</ul>
This'll render as:
a. Foo
b. Bar
It can be done as follows:
Create a wrapper <div> around the <ul>.
Style the wrapper <div> with the strikethru (or whatever other font size/style you're wanting for the list item numbers)
Style the <li> elements back to your normal font settings.
The list item numbers will then pick up the font settings from the parent <div>, and will have the strike-thru, and the list content will be normal text.
Note, this will only work if you want all your list item numbers styled the same way. Your question implies that this is what you want, but if you only wanted to do strike-thru on specific list items then you'd need to use #seler's solution.
You can't style the list item. It might look better this way?