http://forumgallery.rollinleonard.com/artists.php
white-space: nowrap; applied to li. gets very screwy in IE. Instead of each .li item staying together and moving to the next line the whole thing becomes one super long line.
Here is the relevant part of the css (text.css)
.artistlist {
margin: 0px;
padding: 0;
}
li.artistlist {
display: inline;
margin: 0;
padding: 0;
font-size: .75em;
line-height: 1.7em;
word-spacing: 5px;
white-space: nowrap;
}
li.artistlist:after {
content:", ";
}
li.artistlist:last-child:after {
content:"";
}
li.last-child{
content:"";
display: inline;
margin: 0;
padding: 0;
font-size: .75em;
line-height: 1.7em;
word-spacing: 5px;
}
ul li{
margin:0;
padding:0;
}
.artistlist li {content: expression(this.previousSibling==null?', ':'');}
The description of the nowrap property of white-space is: "Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a br tag is encountered."
Are you saying that all the li tags are displaying inline? Because that's what you're specifying when you declare "display: inline." With all the list elements inline and unable to break the line without a br tag, you are getting the exact behavior you've defined in your CSS.
Related
I try to edit CSS for a list but I did not find how to go to line and to adjust height between list elements properly.
Link to the website : https://denkimedia.com/prod/K2211001/test/
menu open
But I don't know how to fix the size between the list elements :
Display list is not ok
Any idea? :)
I modified position and white-space in article-verticle.css for adjusting the line.
.flowpaper-reflow-tocitem{ position:relative; white-space: normal;
padding, margin, height did not work for adjusting the space between lines.
Please apply below CSS:
li.flowpaper-reflow-tocitem-listitem {
margin-left: -13px !important;
min-height: 38px;
display: flex;
align-items: center;
background: #4f84eb;
margin-bottom: 5px;
border-radius: 5px;
}
li.flowpaper-reflow-tocitem-listitem .flowpaper-reflow-tocitem {
font-family: Lato;
color: #fff;
text-decoration: none;
display: block;
padding-left: 12px;
white-space: break-spaces;
line-height: 1.2;
}
You will get this result:
https://i.imgur.com/KrxyhBS.png
Please let me know if you find any issues
In order to solve an issue at work, I've been learning how to do paragraph numbering with css. So far, I am pleased with the results for standalone text passages. However, my requirement is to do the same in a scroll box with a vertical scrollbar.
As you can see here: http://jsfiddle.net/Lceewqj3/3/, I have gotten close by removing absolute positioning from the paragraph numbers, and adding a right margin, but I am still having a problem getting the paragraph starting left edge to be positioned correctly. My solution must work correctly for double-digit paragraph numbers as well as single, so the fixed right margin doesn't work, as you can see by scrolling down to paragraph 10. I tried adding a width property, but that didn't work either.
Note that modifying the existing passage-scrolling style is something I am not at liberty to do, so I need a solution that involves only manipulating the chapter and/or page styles.
Here is the css for the fiddle:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
//position: absolute;
margin-left: -30px;
margin-right: 14px;
color: #000;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
p {
margin-top: 10px;
font-family: 'Raleway', sans-serif;
font-size: 17px;
line-height: 22px;
font-weight: 400;
}
.passage-scrolling {
padding: 0 5%;
height: 340px;
width: 89%;
border: 2px solid #999;
overflow-y: auto;
margin-bottom: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Someone at work figured this out for me. The answer was simply to add float:left; and text-align:left; and remove the right margin from the .page p:before style. See the result here: http://jsfiddle.net/Lceewqj3/5/
Here's the final css that worked correctly:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
float: left;
text-align: left;
margin-left: -30px;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
I am battling with the css to wrap text inside div. I have applied white-spacing, word break but nothing happened.
Link http://fiduciaryconsulting.org/index.php/services/90-services/200-demo
Screenshot of section with issue
Remove white-space: nowrap from the selector .boxes li a and it will work
Remove white-space: nowrap; from the link tag.
Check out these articles for more info about wrapping long words and URLs:
https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/
white-space: nowrap; would be the culprit for this one. remove it from the following CSS, or you can comment it out like below:
.boxes li a {
color: #fff;
display: block;
padding: 60px 10px 60px 10px;
text-decoration: none;
background-color: #3366ff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 30px;
word-wrap: break-word;
/* white-space: nowrap; */
}
You can find this selector's CSS rules on lines 29-44 on the file: http://fiduciaryconsulting.org/templates/jsn_pixel_free/css/template.css
I am trying to move my footnotes to the very left of the page instead of the default block indentation, but am not having success. Here is the relevant code:
.footnote {
font-size: 0.75em;
display: none;
display: footnote;
display: prince-footnote;
position: footnote;
counter-increment: footnote;
footnote-style-position: inside;
margin: 0 0 5px 5px;
padding-left: 10px;
text-indent: -10px;
line-height: 1.4;
text-align: left; }
Any help is appreciated.
It seems you have used a display element that is redundant, also try floating the element to the left.
float:left;
if this doesn't work, please post the html so we can see what your dealing with:)
How do a create menus with pure css that are evenly spaced and the li elements take the entire ul space?
I followed this solution to create the menus that are evenly spaced out: https://stackoverflow.com/a/17951253/757955
I want the li elements to take up all the area of the ul element. I have a separator image I want to put between the menu items. Also I want people to be able to click anywhere in the menu item and be taken to that page.
Here is the js fiddle: https://jsfiddle.net/prusikknot/btp6Lkos/
Notice how the red and green boxes don't touch. I want the red and green boxes to touch between each other at the midway point between the menus.
There will be a variable number of menus and the menu names will vary in length. I'm targeting IE8+ and the latest version of the other major browsers but the old IE part may get dropped.
Here is the html:
<nav id="idMainNav">
<ul>
<li>ASDF</li>
<li>QWER</li>
<li>ZXCVB</li>
<li>UIOP</li>
<li>HJKL</li>
<li>VBNM</li>
<li>TYUI</li>
</ul>
</nav>
Here is the css:
#idMainNav{
width: 900px;
}
#idMainNav ul {
margin: 0px;
padding: 0px;
text-align: justify;
line-height: 0;
background-color: #e9e8e8;
}
#idMainNav ul:after {
content: '';
display: inline-block;
width: 100%;
list-style: none outside none;
}
#idMainNav li {
position: relative;
display: inline-block;
line-height: 100%;
text-align: center;
font-size: 15px;
font-weight: bolder;
cursor: pointer;
}
#idMainNav li:first-child {
padding-left: 10px;
}
#idMainNav li:last-child {
padding-right: 10px;
}
li {
background: green;
}
li:nth-child(odd) {
background: red;
}
#idMainNav a {
color: #000000;
height: 59px;
line-height: 59px;
text-decoration: none;
}
The thing about display:inline-block; is that it behaves like text and creates white space between elements. To counteract this, make the inline-block parent element have a font-size:0; (in this case the ul) and then reset the li to a font-size value not relative to the parent (since it's now 0).
Also, you don't really need to set justify to anything here, you just need to explicitly state the width of all the lis. In my test, setting the li to width:13.95%; worked nicely but it depends on the number of lis.