Let's say if we go to Bootstrap's pagination section and moved that sample into our sample page, with no JavaScript whatsoever.
I think the "hover" and get grey background effect, as well as the "click" and grey background effect, is done by something like this, which I add to my page as well:
.pagination li a:focus { background: #fa6 !important }
.pagination li a:hover { background: #fa6 !important }
However, I don't know why when I inspect that <a> element on Google Chrome or Firefox's debugger, I do not see the CSS rule come into view, and also, I do not see the "computed value" of CSS showing a different value -- all it shows is #ffffff for white.
I thought I did see the :hover or :focus being listed in the CSS rules before (and the computed value will change as well in the past). What is happening and can we see that as before?
Bootstrap specifically target a to design it. You have to override the bootstrap by this way-
.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover
{
background: #fa6
}
I cant get underline to work in safari, it seems to be picking up the default link style of underline none, instead of the css below.
Any ideas what could be causing this?
div.header .container .accountPannel .top a.alias { color:#fff; font-size:10px; float:left; text-decoration:underline !important; max-width:108px; overflow:hidden;}
Thanks in advance.
I am going to assume here that you have made a user stylesheet for Safari that turns the underlines for links off, because Safari doesn't have a program setting for those underlines.
So, what has probably happened is that you have
text-decoration: none !important;
in your user stylesheet.
And user stylesheets always override document stylesheets. So no matter if you put !important in the document or not, the user style will always be in effect.
Solution: edit your user stylesheet to read simply
text-decoration: none;
and then it can be overridden by document styles.
The decorations are not propagated to floated or absolutely positioned descendants, or to descendant inline tables or inline blocks.
I have this CSS Script here
#social_side_links li:nth-child(3):hover {
image
}
but it does not work....my image does not show up and yes the path is absolutely right...do I need to write this like
#social_side_links li:hover nth-child(3) {
This should work fine.
http://jsfiddle.net/EeHdF/
#social_side_links li:nth-child(3):hover {
border:1px solid #000;
}
Chaining :nth-child and :hover as you do here should work just fine. If you're using IE6, however, only the last pseudo-class in the chain will be recognized.
I know you feel the image is correct, but try another css definition like border (above) to see if it is an issue with your definition or the selector.
I am getting this strange left margin in my tabs list.
I have not provided any margin. where does it come from ?
here is the screen. The incorrect area is marked in the red box.
Thanks
Unless you have explicitly removed it, that margin is coming from the user agent stylesheet used as the browser default.
If you want it to be removed, you may want to investigate CSS reset stylesheets.
This is because the Default Browser Stylesheet.
Try:
ul {
margin:0;
padding:0;
}
or more specific
#tabs_container ul.tabz {
margin:0;
padding:0;
}
or more generous
/* Basic Reset; remove margin and padding for every element */
* {
margin:0;
padding:0;
}
You should always use a css reset to get good results on all browsers.
For example:
http://meyerweb.com/eric/tools/css/reset/
I've got a stylesheet that will not, for whatever reason, apply list-style-type to a UL element. I'm using YUI's Grid CSS with their reset-fonts-grid.css file, which I know strips that out as part of the CSS reset.
After calling YUI, I call the stylesheet for the website and in there have a block for UL:
ul {list-style-type: disc;}
I've also tried setting it via list-style but get the same result. I know that the above CSS block is getting read as if I add things like padding or margins those do get applied. The style-type isn't showing up in either Firefox or IE.
The only other CSS I've applied to UL's are in a #nav div but that CSS doesn't touch the list-style-type, it uses the reset that YUI provided, and YUI and the site style sheet are the only two CSS sheets that are called.
I've also got FCKEditor on the admin side of the site and that editor does show the bullet styles so I know it has to be something with the CSS that isn't being filtered by FCKEditor.
You need to include the following in your css:
li { display: list-item; }
This triggers Firefox to show the disc.
and you can also give a left-margin if the reset.css you are using make all margin null :
that means :
li {
list-style: disc outside none;
display: list-item;
margin-left: 1em;
}
Assuming you apply this css after the reset, it should work !
Matthieu Ricaud
If I'm not mistaken, you should be applying this rule to the li, not the ul.
ul li {list-style-type: disc;}
I had this problem and it turned out I didn't have any padding on the ul, which was stopping the discs from being visible.
Margin messes with this too
This problem was caused by the li display attribute being set to block in a parent class. Overriding with list-item solved the problem.
Make sure the 'li' doesn't have overflow: hidden applied.
My reset.css was margin: 0, padding: 0. After several hours of looking and troubleshooting this worked:
li {
list-style: disc outside none;
margin-left: 1em;
}
ul {
margin: 1em;
}
I had this problem and it turned out I didn't have any padding-left on the ul, which was stopping the discs from being visible. The default padding-left for ul elements is 40px.
The and elements have a top and bottom margin of 16px (1em) and a padding-left of 40px (2.5em).
(Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists)
All I can think of is that something is over-riding this afterwards.
You are including the reset styles first, right?
Have you tried following the rule with !important?
Which stylesheet does FireBug show having last control over the element?
Is this live somewhere to be viewed by others?
Update
I'm fairly confident that providing code-examples would help you receive a solution must faster. If you can upload an example of this issue somewhere, or provide the markup so we can test it on our localhosts, you'll have a better chance of getting some valuable input.
The problem with questions is that they lead others to believe the person asking the question has sufficient knowledge to ask the question. In programming that isn't always the case. There may have been something you missed, or accidentally jipped. Without others having eyes on your code, they have to assume you missed nothing, and overlooked nothing.
In IE I just use a class "normal_ol" for styling an ol list and made some modifications shown below:
previous code:
ol.normal_ol { float:left; padding:0 0 0 25px; margin:0; width:500px;}
ol.normal_ol li{ font:normal 13px/20px Arial; color:#4D4E53; float:left; width:100%;}
modified code:
ol.normal_ol { float:left; padding:0 0 0 25px; margin:0;}
ol.normal_ol li{ font:normal 13px/20px Arial; color:#4D4E53; }
Turns out that YUI's reset CSS strips the list style from 'ul li' instead of just 'ul', which is why setting it just in 'ul' never worked.
Make sure you have no display property set in the li tag in my case I had a display: flex property on my li tag for some reason.
please use inline css
<li style="disply:list-item">my li content </li>
All you have to do is add this class to your css.
.ul-no-style { list-style: none; padding: 0; margin: 0; }
Including the padding and margin set at 0.
Some reset.css set the ::marker to content : "", try to unset that on the <li> element:
li::marker {
content : unset;
}