How do I remove the subtle grey line behind each of these inputs? I've looked and I can't find the css attribute that controls it and nothing obvious is showing up in the inspector. I'm using bootstrap and overriding the css as and when I need it.
Add box-shadow: none to the CSS. And mark the question answered.
If it is from left side menu then, that is from li of side-menu ID selector.
Then add new stylesheet above tag </head>, and give border into 0px; or none, as follows:
<style>
#side-menu li{
border:0px;
}
</style>
Related
I tried for so long to get rid of the spacing , can someone tell what I need to do.
I am new to web development.
Thanks in advanceyou can see the white line spacing about my menus
This is most likely because the <body> tag of your page has a margin. You can remove this with the following CSS:
html, body {margin: 0; padding: 0;}
The easiest way to figure this out is to use a tool like Chrome Developer Tools or Firebug to check your elements of your page. It will quickly show you where your CSS issue is.
Basically.. Just use this CSS
#nav {
margin-bottom:0;
padding-bottom:0;
}
#menu {
margin-top:0;
padding-top:0;
}
Replace nav and menu with you tag, ID, or Class name you used. Since I don't have your code, I can only go so far with customization.
I also just wrote it to close THAT gap.
This may seem trivial, but I am trying to add an icon to a bootstrap tab but I'm having style issues.
Looking for a CSS solution with the following:
Icon must float to the right of the link.
CANNOT put the icon inside the anchor tag, they must remain at same level.
<a></a><i></i>
jsfiddle
If anyone can solve this, it'd be greatly appreciated.
Because Bootstrap styles the a inside the tab li, you must then redesign the tab to apply the style not to the a but to the li.
If you can't do that, then you should wrap the icon inside the a.
You can try add:
display: inline-block;
to your a inside the li tag.
nav>li>a {
position: relative;
display: inline-block;
padding: 10px 15px;
}
I'm trying to place a link in Wordpress quickly and we have a pretty complex style being applied to all a href links in the section. Here's a small sample of the selector and the styles within (there's about 40 lines of styles which I held back)
div.content-rotator li.featured-content a {
margin: 0px;
border: 1px solid rgb(34,56,19);
}
Is there anyway I can place a link in this li and override the parent style? It has to appear within the li with class featured-content.
I don't want to touch the existing CSS at this stage so I'd prefer to implement inline styles on the a element.
Thanks
EDIT: Just in case it wasn't clear, the CSS above is coming from the style sheet and I'd like to zero it out.
There's > 50 lines of styles in this though, I've only shown two for brevity so inline replacing them all isn't really an option.
Just use inline styles or/and add !important to overriden CSS definition, like:
<div class="content-rotator">
<ul>
<li class="featured-content">
...
</li>
</ul>
</div>
or
div.content-rotator li.featured-content a.other {
margin: 3px !important;
border: none !important;
}
Give the selected link an ID and just add !important to the styles. I don't think there is a better alternative unless you plan to go through the entire stylesheet.
please take a look here.
I have added the following code:
.entry_blog a {color:#000;}
.entry_blog a:hover {background-color: #000;color: #FFD700;}
The text links work fine. However when you go over the images, you can see a black line appearing in the bottom of each image inside the <div class="entry_blog singlepageentry" itemprop="articleBody"> div.
I cannot add any new class to the images links. If I could add an image to the images links, I could simply add a
.entry_blog .newclass a:hover {background:none}
However since there is no such a possibility, does anybody know how, in this case, I can remove the background from the images inside the entry_blog div?
Thank you in advance
Seeing as all your images appear to be standalone blocks, all you need to do here is set your img elements to display as block-level elements (using display: block). This forces them to fill the containing a element without leaving any gaps, fully hiding any background which may be underneath:
.entry_blog a { color:#000; }
.entry_blog a img { display:block; }
.entry_blog a:hover { background-color: #000; color: #FFD700; }
Your question is sort of confusing.
The best method is to add background:none or background:transparent to .entry_blog a
You say you can't add any new style to image links. What does this mean?
Surely you can alter the CSS.
I'm trying to figure out how i can remove the border under the links at my website. It's both irritating and it messes up my design. So I'm asking here instead. I have been searching around Google, but I can only find "How to remove border around image links".
Can i use css to remove the borders? I have tried "border: solid 0px #000;"
But it did not work.
So if anyone could help me on this one I would really appreciate it.
If you're trying to remove the underline, add this to your css :
a {
text-decoration: none;
}
If you want to remove the underline of all the links, you can add:
a{
text-decoration:none;
}
Or if you want to remove the underline of a specified link, then you should create a css class like,
.style1{
text-decoration:none;
}
Then call this class name with the link like,
Link
It will only remove the underline of that link.