I am working on a website. In the header bar, I have included some contact information.
For some reason the first field (name field with my address in it) has a bullet before it. On Chrome, this displays before the address, on IE and Edge it displays to the left of the main content area in the blue. I cannot figure out how to eliminate this.
You can use
ul {
list-style: none;
}
for that. list-style: none removes all list stylings.
Also maybe check if your markup is valid. maybe there is a missing, closing tag
Related
Encountering strange issue in Froala,
This is how my Froala, editor looks like when un-ordered list is selected, but it's not appearing in the text-input.
This is how DOM looks like at this moment, indication presence of ul item.
But when I remove the overflow, property from fr-wrapper class inside froala-editor, then I can see the list item dot as follows.
Here is the overflow, property, removing overflow property below is doing manipulation on internal css of froala, I don't want to this.
I don't know why froala is not behaving in intended manner,
Expected behaviour should be like this as soon as user selects, the ul list item, without even touching or manipulating any internal css prop. like overflow etc.
add below lines in your css file. this will render the list style type that you have applied to the list items while editing the content through froala editor.
ul li {
list-style-type: inherit;
}
ol li {
list-style-type: inherit;
}
Motive
Google receantly added a feature to display only mobile friendly pages in a mobile google search. Since I did already some CSS tricks to adopt mobile devices, I've confidently tried their test, but surprised by the results. Although I could quickly address 2 errors, there is one, that I have difficulty to quickly fix it: Links are too close together.
My site sports a menu like list, that altough I could quickly fix (and I may already have) and adopt to a mobile screen without any change in the desktop appearance, however sometimes links are inevitabely ends up above in each other in the body of each page. Also on one page there is a list that happens to have a list of links each other, but I'm not sure I would like to apply a CSS style to the list elements, to leave greater space in between list items (yet). I'm not seeking help on how to properly resolve that, (Like only leave gap between them, if they are actually end above each other) because it may fall under the "rethorical" question category. (Of course, I'm open to suggestions, if you have one.)
Question
I've decided, that I'll go with an ugly solution for now, that to leave a margin above&below each link regardless, what is surrounded with. Simply changing the margin did not worked. How can I do this? The page I'm currently testing is at http://adam.lehelj.com/ but the sub-domain is in currently only in hungarian.
Edit
The pages are generated from Markdown using PHP Extra library by Michel Fortin and I would prefer not to modify these files. It has a limited feature where to apply classes. (I believe it is for title, code and links.)
The answer as to why you cannot set a margin top or bottom to an achor can be found here, more specifically about the margin top and bottom:
These properties have no effect on non-replaced inline elements.
one solution that you could use would be to set a line-height on your anchors.
With the links on the top left of your example page you can add a class to the anchor tags.
<a class="links" href=""></a>
The css could be something like..
.links {
display: block; /* default is inline and top margin won't work on an inline element */
margin: 3px 0px 3px 0px;
}
With the social links on the page bottom top margins should work fine for you as well. Just adjust the numbers until google is happy with the spacing and sure that people with fat fingers like me aren't clicking on 5 links at a time ;)
li {
margin: 3px 0px 3px 0px;
}
If the rest of your site is more complex add a class to the ul or li or wrapper div around them to differentiate styles as needed.
html
li class="social-links-item"
css
social-links-item {
css here
}
html
<div class="social-links-wrapper">
<ul>
<li></li>
</ul>
</div>
css
.social-links-wrapper li {
css here
}
In my Website i am mapping the Elements by ID. it is working fine for All the alphabet Letters Except A, But When i click on the alphabet A it is not going to respective Elements please Help me to come out of this. http://dotmappersdesign.com/mclarenpress/glossary/
It does work. For A, as well as the rest. It's just that there is more than one explanation for the other letters, so the effect is not as obvious. See B for example. The first word for B is "Binding", but the first explanation you see after clicking the letter is for "Binding Margin".
The reason for this is that the link brings the anchor to the top of the screen and does not account for your fixed header, so it gets hidden below that.
A possible CSS-only solution would be a combination of padding and negative margin, to move the elements top border, which will align to the top of the screen, to make up for the height of the header. Here's an example that works on your site, but you should make the selector more specific (#glossary p strong, or use the semantically correct description list).
p strong {
display: inline-block; /* Required for the margin/padding to have an effect */
margin-top: -60px;
padding: 60px 0 0;
}
I am trying to organize a gallery using figures, but I keep getting this annoying dot or bullet next to them. Are there any solutions like "list-style-type:none" for figures?
Thanks
(had to post a link to picture because I'm not allowed yet)
I suspect that your images are contained in a list and you need to change the list style to none for the relevant list.
Do this
body ul {
list-style: none;
}
This would apply a none list style for all the lists under the Body element.
I am trying to code a page, and for some reason i have a random css spacing issue for my list that i created. On the bottom right i have a random space between the list and its div.
I am styling it fine i think but my code is here at jsFiddle
and it works fine there for some reason. Any ideas?
If needed i can supply the entire page link.
I want that whole entire css list to span accross the entire div but it has a huge gap between the left wall of the div and its list.
The list on the page you link to needs to have its padding (and potentially its margin ... some browsers have different default styles) cleared. Here are some rules you could use to fix this:
#navlist {
list-style-type: none; /* Removes default list style */
margin: 0;
padding: 0;
}
I highly recommend getting the Firebug extension for Firefox. It makes debugging layout issues like this very easy. It also helps you see whether the style rules you are writing are being overridden by a more specific rule elsewhere in your style sheet.
As an aside, you shouldn't be using the center element. That element has been deprecated, and should be handled via your style sheet like so: text-align: center;