I am not very good at CSS and I know just enough to customize my site.
The problem I am facing is related to .entry-content ul li elements. On pc, they are shown normally, words don't break randomly but on phone, they break randomly at any character - for example, supernatural will be "supernatura" and the next line under will contain the remaining "l".
I am desperate and don't know how to fix it.
I tried the code they recommended
.entry-content ul li{
word-break: break-all;
max-width: 420px;
}
but that messed up my pc version, which was doing the same (breaking words randomly at any random letter) and did not fix my phone version either so I had to remove it completely.
Thank you
There use to be a word-break value of 'break-word' but that ended up getting deprecated. Rather than using word-break, try replacing it with 'overflow-wrap: break-word' and that should fix your problem.
I don't know who recommended you that kind of code, because that code will literally break it and will not compatible in all devices, it looks to me that you're having trouble in the genre tags overlapping of text. You might try this one below, I'll keep changing my answer until we got it correctly:
.entry-content ul li{
white-space: nowrap;
max-width: unset;
overflow: unset;
width: auto;
}
Related
My product names are very long and they need to stay long.
When the breadcrumb shows the product page, if the screen is small (for example mobile view) the breadcrumb overflows the layout and it causes the browser not to show the page correctly.
I tried to add <p class="overflow-ellipsis"> and also <p class="overflow-visible">to the DIV of the product page which did not work, I tried to add text-overflow: ellipsis; and also text-overflow: visible; to the css in breadcrumb section, which also did not work, I also changed the white-space: nowrap; in breadcrumb css to white-space: normal; and it still did not fix the issue.
Here is a link to one of my pages for example, please make the screen small or see in mobile to replicate the issue.
http://www.nativeamericanwholesale.com/$80-tag-authentic-made-by-charlene-little-navajo-kingman-turquoise-wrap-bracelet
I will need the product name to stay in layout (frame) and preferably goes to second line instead of overflowing the page.
Please note that I do not want to use hidden visibility or anything to cut it out due to SEO issues.
Set white-space for your breadcrumbs:
.breadcrumb > li {
white-space: normal!important;
}
I used !important to override any other code for .breadcrumb > li, but you should know this is not a good practice.
I confirm white-space: normal (and white-space: break-all) isn't enough for OpenCart's breadcrumb issue.
.breadcrumb>li:after{top:50%;transform:translateY(-50%) rotate( -45deg );}
.breadcrumb>li{white-space:normal;display:table-cell;vertical-align:middle;}
.breadcrumb>li:last-child::after{display:none;}
This will fix your issue.
Add this thing to your class.
.breadcrumb li > a {
white-space: normal;
}
Here you need to use .breadcrumb li > a because product name inside a tag in future if will add any other tag inside then li then it will affect to everywhere so better is to used .breadcrumb li > a.
Trying to get an inline list without inserting extra tags between ul and li. I need to do it this way because essentially the app our clients use to create documents has a "one tag for one value selected" thing going on, otherwise it'd be pretty elementary to just sneak a <br/> in there and call it a day.
Please visit http://jsfiddle.net/EkQKL/3/ for a working example of what I'm mucking about with.
I'm using the following CSS:
ul {
margin:0 0 0 2em;
padding:0 0 0 2em;
font-weight:bold;
text-indent:-2em;
list-style-type:none;
}
ul li {
font-weight:normal;
margin-right:1em;
}
ul li:nth-child(n+1){ /*aye, this is the problem*/
display:inline;
}
...but invariably, this seems to just ignore the n+1 part and apply it to every li, which in turn makes the first li snuggle the text in the ul. Argh.
So if I set it to n+2, I get the result I would expect; the first li is 'normal', and the rest all line up horizontally. But setting it to n+1 I would expect it to leave the first element alone, and then apply display:inline to all subsequent li, but it isn't doing that.
I don't have the ability to really use a lot of classes or add extra HTML elements, so I'm kind of at a loss with this one. The only workaround I have is to place the header outside the ul element -- which has other issues with other stylesheets can could be applied to this document.
Is there something about the nth-child thing that I'm just overlooking? Or is this more to do with the display and how it is being applied? It 'feels like' a bug, but I'm not trying to presume too much; I may just not be as smart as I think I am. :)
This is simply because ul li:nth-child(n+1) indicates that it should style every li, that is a child of ul - starting at the first child. Essentially there is no difference between this and ul li {}, because it will style every child regardless. Therefore :nth-child(n+1) wasn't even doing anything.
The reason :nth-child(n+2) works, is because it starts by styling the second li.
This seems like it ought to be ridiculously easy, but I'm having trouble figuring it out.
I want to replicate the <li> function so the disc image appears to the left, but applied to a tag
I have this, but it does not show the disc image.
.list {
margin-top: 15px;
margin-bottom: 15px;
list-style:disc outside none;
display:inline;
}
<p class="list"><em>And Much, Much More!</em></p>
I want to avoid using any graphics to simulate the bullet if at all possible.
Thanks for the help
Answer:
display: list-item;
Display must be set to list-item - not inline, and not list!
.list {
list-style:disc outside none;
display:list-item;
}
<p class="list"><em>And Much, Much More!</em></p>
Well, a p is not a list. Why not use <ul><li>?
[edit]
Let me elaborate.
The problem is that you set this style on a list, while the disc is shown in the list items. A p has no items in that sense, so there's nothing to apply the disc to.
Only add following style
display:list-item;
I'm trying to tweak code that rendered by Glimmer which probably marks my CSS mastery kinda low....
I have HTML like:
<ul id="main_navigation">
<li id="trigger0"><a /Topics">Webinar Topics</a>
<ul class="subNavMenuItems" id="subNav0">
<li>Intro</li>
<li>Computer Skills</li>[and so on]
In my css i have:
#main_navigation ul{
margin: 0;
padding: 0;
float: left;
width: 20%;
font-size:13px;
font: bold;
font-variant: small-caps;
}
the width rule is observed - but none of the others are. The file containing these rules are the last file imported so these rules should override any others (though 'main_navigation' is the only matching element _anyway so cascading stuff shouldn't matter.
You probably want
font-weight: bold;
Try this:
#main_navigation li {
...
}
I don't have an exact solution for you, but I'm certain that things will become easy if you use firefox and install firebug. Firebug has a mode that shows all of the style sheet info that could affect an element. It also shows how different rules interact while allowing you to try changing things without reloading.
Also, missing a double quote in <a /Topics"> and the href attribute.
#main_navigation ul should match, from the HTML code shown, your ul with the ID subNav0. Do you have any CSS styling .subNavMenuItems or #subNav0, or perhaps ul li ul, which would also get to the same thing as #main_navigation ul? If you do have any such CSS, it is potentially mucking with the CSS shown. To be absolutely specific, you could style ul#main_navigation li#trigger0 ul#subNav0.
Ben has a good suggestion with trying the Firebug addon for Firefox.
This HTML is invalid: <a /Topics">Webinar Topics</a>. You want Webinar Topics most likely.
What element are you trying to style?
#main_navigation ul {
/* css here */
}
Surely styles a ul that's a direct descendant of #main_navigation, whereas you're trying to style (I think) either the outer-menu which is #main_navigation or the inner ul which is #main_navigation li ul ...unless I'm reading this badly?
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;
}