In chrome (and possible in other explorers) the ul element has a default padding that gives it a nice deeper indent to each depth level of the ul.
i.e. the first ul will get padding of 10px, the second ul>ul will get 20px and so on.
I've tried to find a way to make only the first one with padding 0 so that it'll get a nice position for him without damaging the child uls indention structure.
And that's the result:
This code will make all ul elements that are not direct children of a li element with padding 0 (or whatever code you'd like to put there).
*:not(li) > ul {
padding: 0;
/* more code */
}
Best solution, if you don't need to support IE8 and below is this:
:not(ul) ul {
padding-left:0;
}
If you actually need to support some legacy browsers, you'll have to specify a general padding for ul elements yourself:
ul {
padding-left:0;
}
ul ul {
padding-left:10px;
}
Related
I want to decrease the padding of my ul, right now it's 40 (I think). This code works to make the padding zero:
ul {
padding: 0;
list-style-type: none;
}
Using this code above works but it can only be 0 when I try something like 10 or 20 it doesnt work anymore. When I inspect the element I want to change it says the padding is 40 right now.
Since you have not shown any HTML markup, nor CSS classes/Style sheets. Try to resolve the conflict in the CSS itself, or append !important to any size value present.
ul.someClass {
padding:10px !important;
list-style-type:none;
}
And, it is reccommended to add a classname to the element itself, instead of assigning it to the whole ul element.
Anything other than "0" add px (for example).
If you just add 10, it does not know if that is 10px, 10em, etc.
ul {
padding: 10px;
list-style-type: none;
}
I have been trying to remove the bullet and indent from a < ul> element for quite a while now and I just can't figure out how - or rather why it's not working.
There are several solutions here on overflow, however none of them is working for me.
this should work(?) but it doesn't:
.widget li {list-style: none; } or:
.widget li {list-style-type: none; } (!important does not help)
here is the link to the page with the problem and a picture of the location I mean: any ideas? thanks!
http://wuttke-klima.witconsult.de/neue-firmenzentrale-der-fam-magdeburg/
that arrow is displaying from a :before just display:none it
Remove the left padding to remove padding on li
.arpw-ul li:before { display: none; }
.arpw-ul li { padding-left : 0 }
TIP : Just use google chromes inspect element to test these kind of things. just live results
Looks like you have a pseudo-element that creates the arrow bullet. You should be able to remove it with:
.footer-widget li:before, .widget li:before {
border: none;
}
If that is really a bullet (seems like it is not) then this shall help:
.widget li { display:block; }
But I suspect it is not a bullet but something else (like ::before pseudo element). Use DOM/style inspector tool in your browser.
Try this:
ul {
list-style-type: none;
}
Got a weird one because in some cases, it works and in others, it doesn't. I'm currently wrapping up a site and on this page (http://panchosrestaurant.com/drinks/beer/) there's an issue when you rollover the 'Drinks' button. A drop down appears, as it should, but the graphic frame which is the last element of my RevSlider is appearing above it. Went to Inspector and it says the z-index for that element is 5. Fine. So I tried to make the ul, li, li a, all sorts of different elements a 6 or much, much greater and yet the frame continues to appear on top of it. Where am I going wrong? Am I targeting the incorrect element?
Your element with class tp-static-layers has a z-index of 505...
You have to put a z-index of at least 506 on the dropdown element <ul class="sub-menu"> to win. Or refactor some of your styles.
In the CSS block below you should set the z-index to something higher than 505, which is what your image border is set to.
#media screen and (min-width: 769px)
.main-navigation ul li:hover > ul, .main-navigation ul li:focus > ul, .main-navigation .focus > ul {
clip: inherit;
overflow: inherit;
height: inherit;
width: inherit;
z-index: 100;
}
Without seeing your code i would assume all you need to do is to apply a position to the element you want to be over z-index: 5
Just add z-index: 999; to your .main-navigation li class:
.main-navigation li {
margin: 0 14.1px;
margin: 0 0.88rem;
position: relative;
z-index: 999;
}
[Edit]
As #Michael P pointed out, the z-index only needs to be at 506 to trump the `.tp-static-layer' class
i am working on a WordPress site, and my initial problem was that when i had a bullet, the text would wrap around it such that some text was below the bullet point and so i wanted to align my bullets such that when text is wrapped it doesn't show below the bullet point,
so i did this in my custom css
ul {
list-style-type: circle;
list-style: outside;
padding-left: 20px;
}
which worked great except now i have bullets appearing next to the links on the drop down part of my menu, how can i exclude the code from affecting the main menu?
ul {
list-style-type: circle;
list-style: outside;
padding-left: 20px;
}
#site-header ul{
list-style:none;
}
Write a specific selector for the site-nav ul list and remove the styles. Adding the #site-header before ul will overwrite the original statement for that element. Effectively, this will apply your original style to all ul elements except the ones in #site-header
I believe wp adds #site-header automatically to the main header element. If this is not the case for your theme, just change #site-header to any parent element id specific to your header.
It's probably because you're using ul as your selector. This will apply those styles to ALL ul elements in your page. If you want to only select a single ul, you can either add an id or class to it, or you can select it's container, such as
div ul { // styles here }
You have to be more specific on your css rule, otherwise you're aplying that style to all your ULs
#parentElement ul {
list-style-type: circle;
list-style: outside;
padding-left: 20px;
}
instead of creating that list-style-type for all ul, just create it for the specific one you want to appear the bullets. Otherwise find the main menu id and add this: list-style-type: none;
Anyone know how to add padding between the :before pseudo-element and where the content actually starts?
<ul>
<li><strong>Name Surname</strong></li>
<li>+27.082.555.4155</li>
</ul>
I want only the first li to have a bullet point in it and only if it has a strong element in it.
I have gotten it right using:
.fr_contactInformation ul li strong:before
{
content:url(/App_Themes/2011/images/hm_listImage.gif);
}
.fr_contactInformation ul li strong
{
/*Here is where I am going wrong*/
padding-left: 50px;
}
Thanks all!
you can put padding in the before to make space between it and the element
.fr_contactInformation ul li strong:before
{
content:url(/App_Themes/2011/images/hm_listImage.gif);
padding-left:50px;
}
If you want to control it by pixel, and assuming you only want the bullet on the FIRST li, here's what you're looking for:
.fr_contactInformation ul li.first strong:before
{
content:url(/App_Themes/2011/images/hm_listImage.gif);
padding-right: 20px;
}
Thanks General Henry but that adds padding to the entire element.
I tried this and it worked:
.fr_contactInformation ul li strong:before
{
content: url(/App_Themes/2011/images/hm_listImage.gif) " ";
}
By adding a some space in the inverted comments at the back of the img url, it created that gap I was looking for between the image element and the content.
Then I used a negative margin on the li to bring it back into place.
Thanks ;)