Text-decoration: none not working
You have a block element (div) inside an inline element (a). This works in HTML 5, but not HTML 4. Thus also only browsers that actually support HTML 5.
When browsers encounter invalid markup, they will try to fix it, but different browsers will do that in different ways, so the result varies. Some browsers will move the block element outside the inline element, some will ignore it.
css text-decoration: none not working
By default the a tag has underline effect (using text-decoration:underline), So to remove this, you must remove from a tag not from its child element.
If you are talking like color values can be overridden from parent to child element but why not text-decoration?
This is because the text-decoration property doesn't inherit the style from its parent element but relies upon its own element.
Check w3c reference.
Text Decoration: None !important not working
Two Things , Firstly,You need to change the import of the App.css file from
import "./styles//App.css";
to
import "./styles/App.css";
and the CSS property you want to use text-decoration not text-decoration-style and you want to apply it on the anchor no the list item
header > nav > ul > a {
text-decoration: none !important;
}
adding this CSS at the end of the App.css file fixes your issue
text-decoration: none; not working on button | css
You have to apply it to the anchor tag, instead of applying it to the button.
It should be as such:
.btn1 a {
text-decoration: none;
}
Styling Issue: text-decoration none is not working
Give it to the a-element
.company-item a {
text-decoration: none;
color: inherit;
}
This would be your code:
.custom-footer{
background-color: tomato;
}
.list-items{
list-style: none;
margin: 0;
padding: 0;
}
.company-item a{
text-decoration: none;
color: inherit;
}<footer>
<div class="container-fluid custom-footer">
<div class="row footer-logo">
<div class="col"><img src="/images/Logo_White.png" alt="Sample Image" width="150px">
</div>
</div>
<div class="row">
<div class=" col footer-column px-4">
<h6>Company</h6>
<ul class="list-items">
<li class="company-item"><a href="">Become a rider</a></li>
<li class="company-item"><a href="">Our Story</a></li>
<li class="company-item"><a href="">Our Team</a></li>
<li class="company-item"><a href="">Contacts</a></li>
<li class="company-item"><a href="">Partners</a></li>
</ul>
</div>
<div class="col footer-column">
<h6>Product</h6>
<ul class="list-items">
<li class="product-item"><a href="">Ride safely</a></li>
<li class="product-item"><a href="">How it works</a></li>
<li class="product-item"><a href="">testimonials</a></li>
</ul>
</div>
<div class="col footer-column contacts">
<p>+254 111 220 055</p>
<p>info@tissboda.com</p>
<p>Nairobi, Kenya</p>
</div>
</div>
<div class="row">
<div class="col px-4">
<ul class="list-items">
<li class="social-icons"><a href=""><i class="fab fa-facebook-square"></i></a></i></li>
<li class="social-icons"><a href=""><i class="fab fa-twitter-square"></i></a></i></li>
<li class="social-icons"><a href=""><i class="fab fa-instagram-square"></i></a></i></li>
</ul>
</div>
<div class="col"></div>
<div class="col">
<img src="/images/google-play-badge.png" alt="Sample Image" width="150px">
</div>
</div>
<div class="row">
<div class="col px-4">
<p>©2021 TissBoda. All Rights Reserved</p>
</div>
<div class="col"></div>
<div class="col d-flex">
<ul class="list-items">
<li class="legal-link"><a href="">Privacy</a></li>
<li class="legal-link"><a href="">Terms</a></li>
</ul>
</div>
</div>
</div>
</footer>text decoration: none. Not working
You've already put your finger on it. The (default) underline is applied to the link, not #items. Those are the elements you will need to re-style:
#items .item a{
text-decoration: none;
color: inherit;
}
Why does the text-decoration: none not work inside p?
add display:inline-block; to span.none class
p { color:red; text-decoration: underline; font-size: 1.2em;}
span.none { text-decoration: none; display:inline-block;}<p class="p">Click the thumb<span class="none">!</span></p>Related Topics
Fixed Element in Transform Translate Container Not Working
Ie8 Ignores Td Width, Works on Ie7
Rails 4: How to Identify and Format Links, Hashtags and Mentions in Model Attributes
How to Use Image as a Table Background in Email
Beginner's Stuff: How to Stop CSS' Divs from Overlapping
How to Use Div Class and Id Together in CSS
Use CSS Variable with SCSS Darken and Ligthen Filter
Styling Input Range for Webkit with Pure CSS
CSS Layout for Footer at Bottom with Dynamic Ajax Content Changing Height of Page
Stylize Input Box as Seen on Android Developer Website, Using CSS
Asp.Net Mvc: How to Use Razor Variable in CSS File
How to Overlay a Div Over a Canvas CSS
Doctype and Quirk Modes and HTML 5
Position Fixed Content Overlapping Problem
Div Has No Height Even If It Has Content