How do you make sure all the content in a numerical list is left aligned to the same spot? You see how when you go from #9 to #10, the numbering gets an extra digit and pushes the content a little bit to the right? I can live with #99-to-#100 screwing things up, but I'd like to fix this #9-to-#10 issue. Making the numbering go outside makes the content align properly, but then there's no background on the numbering.
#file ol {
line-height: 3em;
font-size: 1.2em;
color: #999;
}
#file ol li {
list-style: decimal inside none;
padding: 0 0 0 1em;
}
#file ol li.alt {
background: #eee;
}
The list style needs to be outside for this to happen.
#file ol li {
list-style: decimal outside none;
padding: 0 0 0 1em;
}
The only other option, to fix your background issues, would be to use another element inside the LI that you place inline-block with a predefined width and manually increment or to use a table. If your project does not rely on backwards compatability, please let me know as there may be some CSS3 options.
Related
On this fiddle (https://jsfiddle.net/9v38rju6/3/), whenever I hover the cursor over an element in the second column, Firefox 87 on Windows starts switching back and forth between two renderings of the list, very rapidly.
Lower right panel must be ~850px wide to reproduce bug.
This does not happen under Chrome (or Edge).
The problem disappears when I comment the rule
li {
margin: 0.25em 0 0.5em;
}
Can someone explain what is going on?
Dude, this is because you change the height of the border AND the margin-bottom on :hover!
Some browsers change the layout on an specific point (what is in your hand, with CSS) and could get ugly like your problem here.
If you hover over one of there links, the height of the link grows 2px more (because of border-bottom-width 3px instead of 1px) and the entire list-element also grows 2px. Now the browser has to "re-render" the layout of your list and height of elements. Also,
you reset the margin-bottom from 0.5em to -2px.
This does not remove 2px from the margin-bottom, this set the margin-bottom to 2px! Could be kind of confusing.
ul.index {
columns: 15em;
}
li {
margin: 0.25em 0 0.5em;
}
a[href] {
text-decoration: underline;
border-bottom: 3px solid transparent;
}
a[href]:hover {
text-decoration: none;
border-bottom: 3px solid;
}
<div>
<ul class="index">
<li>#bottom-center
</li><li>#bottom-left
</li><li>#bottom-left-corner
</li><li>#bottom-right
</li><li>#bottom-right-corner
</li><li>#charset
</li><li>#color-profile
</li><li>#counter-style
</li><li>#custom-media
</li><li>#custom-selector
</li><li>#font-face
</li><li>#font-feature-values
</li><li>#font-palette-values
</li><li>##hasinstance
</li><li>#import
</li><li>##isconcatspreadable
</li><li>#keyframes
</li><li>#layer
</li><li>#left-bottom
</li><li>#left-middle
</li><li>#left-top
</li><li>#media
</li><li>media
</li><li>#nest
</li><li>#page
</li><li>#property
</li><li>#right-bottom
</li><li>#right-middle
</li><li>#right-top
</li><li>#scope
</li><li>#scroll-timeline
</li><li>#supports
</li><li>#top-center
</li><li>#top-left
</li><li>#top-left-corner
</li><li>#top-right
</li><li>#top-right-corner
</li><li>##toprimitive
</li><li>##tostringtag
</li><li>#viewport
</li><li>#-webkit-keyframes
</li></ul>
</div>
It happens as the margin changes the height of the element and the item does not suit into the first column anymore.
It does not happen if you remove the margin from either top or bottom for each li element like this:
li {
margin: 0.25em 0 0 0;
}
or
li {
margin: 0 0 0.25em 0;
}
Not sure why, but it happens with 2 and 3 columns.
I think I could work around it by using padding instead, like this:
li {
padding: 5px;
}
This way, the element height remains the same as the padding applies to the inner of the li element, not to the outside as the margin does.
I'm trying to remove ALL space around a <h2> element
I have this simple markup:
<div>
<h2>Count down</h2>
</div>
I tried to remove spacing with:
h2 {
margin: 0;
padding: 0;
line-height: 0;
}
But some white space remains. You can see it on this screen shot:
There's spacing both over and under (and it's not padding or margin). How can I get rid of that extra spacing?
EDIT: Here is a simple jsfiddle to illustrate. I want to remove the space colored light blue.
The inspector in the screenshot shows
.countdown h2 {
margin: 0 0 10px;
}
which equates to:
.countdown h2 {
margin-bottom: 10px;
}
That means you must have a styled h2 somewhere in your css.
Because the style is nested as .countdown h2, it will take precendent over just styling h2 by itself.
If you cannot delete it, and would rather not use !important to override it, you may be able to override the style like:
body .countdown h2 {
margin: 0;
}
This gives it three elements, making it more specific than the two in the inspector. See an example of how it works here: JS Fiddle
More on CSS precedence: W3 - The cascade
you have padding on your countdown class which surrounds your h2 of 40px as you made it global it will put padding on top bottom left and right at 40px to fix try this
.countdown { padding:0px 40px 0px 40px; }
if you mean the h2 has space at the bottom thats because you have a style on it putting margin of 10px at the bottom to remove just delete that style.
.countdown h2 { margin: 0 0 10px; }
if you dont want to delete it you can overide it by doing
h2 {
margin: 0px !Important;
padding: 0px;
line-height: 0;
}
you should not really use the !important unless really needed which in this case it is not.
I have downloading the responsive framwework http://996grid.com/ and in the Normalize.css it has default settings of padding: 0 0 0 40px; for various items. for example
menu,
ol,
ul {
padding: 0 0 0 40px;
}
dd {
margin: 0 0 0 40px;
}
Can someone explain the reasoning of this as when I add a ul it adds 40px onto it... If I remove the 40px in the normalize will it effect browser support?
Thanks for your help
In the official Normalize.css (available at https://github.com/necolas/normalize.css/), there is no such padding, however most browsers will add this padding anyway to simply give the list some indentation from regular text.
If you want to remove this, simply modify the provided CSS or override it within your own CSS:
menu,
ol,
ul {
padding: 0;
}
dd {
margin: 0;
}
It's up to you to style your own documents however you like; aside from the default styles defined in the HTML specification, most browser default styles are simply there to make simple unstyled documents a bit prettier.
According to Erik Meyer it's a remnant from Mosaic. He said it at the end of Web Platform podcast episode 139
I'm currently customising a site with Magento. I installed a wow-slider image slider. It works but it seems to have 2 random dots to the left and also a random space before the shadow.
Please see link
ellamatt.mygostore.co.uk
Please see here and let me know if you have an idea. I would give you the code but there are a few CSS and JS pages that go with this.
PS: it works properly in usual HTML but not in Magento.
The two dots are because of the li elements.
Changing the list-style property to none on this css rule will get rid of them:
Old:
.widget-static-block ul {
list-style: disc outside none;
padding-left: 1.5em;
}
New:
.widget-static-block ul {
list-style: none outside none;
padding-left: 1.5em;
}
And, for the shadow, on the same css rule, add a height of zero and displaying it as inline will get the ul block out of the way and remove the space before the shadow.
Final:
.widget-static-block ul {
display: inline;
height: 0;
list-style: none outside none;
padding: 0;
}
I'd like to use an unordered list for displayign a horizontal navigation. This nav has to be a fixed width.
Markup:
<ul id="page-nav">
<li>RRSP Basics</li>
<li>Contribution Rules</li>
<li>Ways to Fund Your RRSP</li>
<li>Investment Options</li>
</ul>
And the CSS (so far):
#page-nav { width: 423px; height: 57px; margin: 0; padding: 0; }
#page-nav li { list-style: none; float: left; display: block; height: 35px; margin: 13px 8px 0 8px; padding: 9px 14px 0 14px; text-align: center; }
#page-nav li a { color: #1f1f1f; font-size: 10px; white-space: pre-line; }
If firefox, using white-space: pre-line breaks the words as necessary to fit the ul width. This doesn't work in IE6 or IE7, and I need to hit those browsers. In IE, the lis push down to the next line instead of breaking the words in the anchors. is not an option either as this will be content managed at some point.
How can I make the anchors break the words to fit the space available? I can't specify a common width for the list items, so that's not an option.
And how it should look:
Thanks.
Try Listamatic:
Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list.
Pick a list, you should be able to find an unordered list menu there that works.
pre-wrap and pre-line are not supported in IE < 8. So im not sure what an alternative is without resorting to a table :-(
This is untested, but setting a width on your li should do the trick.