I would like content of my anchor links to be consistenly bold and underlined, but spans inside anchor tag should not be bold.
Sample markup:
<a>Hello, <span>fooooo</span> bar</a>
Styles:
a {
font-weight: bold;
text-decoration: underline;
}
span {
font-weight: normal;
}
(right click on image and select view/open in new tab to get a better view)
In IE8+, underline thickness is inconsistent: apparently it is determined by percentage of bold text inside link. Is there a way to make underlining look exactly the same for every link on the page?
Fiddle: http://jsfiddle.net/FfBGn/
Kinda hack-ish, but instead of text-decoration:underline, you could use this instead:
border-bottom:1px solid #000;
demo
Alternatively, if you have to use text-decoration:underline,
you could just make bold bolder.
font-weight:800;
demo
Maybe an easier way could be to set the border of the anchor instead of underline? That way you can dictate the thickness yourself?
border-bottom: 1px solid #000000;
Related
I want to add an image inside the text
so in the section, I add the "heading element" and edit its color to transparent then
add an image inside the "heading element" background from the advance tab and also edit
CSS snippet
selector .elementor-widget-container{
-webkit-background-clip:text;
background-clip: text;
}
but not working, the text didn't appear
I even tried using HTML&CSS code but not working, cleans up the whole section & redo but not working
You can use the background-clip property to achieve what I believe you are going for. Browser support is pretty decent. Read more about it here https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
EDIT: I see you tried that. You need to have a background property on the same element that you clip.
p {
margin: 1em 0;
padding: 1.4em;
background: url(https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
font: 900 2.2em sans-serif;
text-decoration: underline;
}
.text {
background-clip: text;
-webkit-background-clip: text;
color: rgba(0,0,0,.2);
}
<p class="text">THE IMAGE SHOULD SHOW CLIPPED BY THE TEXT</p>
So I have a button inside a div. I want to make the font-weight: bold so I put it in the css. I fire up the website and the text of the button isn't bold. I then check it with Firebug and the font-weight: bold isn't even there? When I manually type it there in firebug my text becomes bold, just as I want it.
I'm working with bootstrap, here is the css of the button:
.btn-primary {
background: url("../img/bg-nav.png") repeat-x scroll left bottom #198901;
color: #ffffff;
font: 17px "bowlby_oneregular",sans-serif !important;
font-weight: bold;
text-transform: uppercase;
}
I find it strange that it doesn't show up with Firebug, and yet when I put it there with Firebug it works
There are two solutions:
Remove !important:
font:17px "bowlby_oneregular",sans-serif;
font-weight:bold;
Split the shorthand property up:
font-size:17px;
font-family:"bowlby_oneregular",sans-serif;
font-weight:bold;
The exact solution depends on how exactly you want to apply the fonts. But I’d simply rewrite your code so that !important will never become necessary.
In the footer of my site http://www.stefaanoyen.be (left column) I have some social media icons which are an icon font. On hover, I want the circles red and the icons in it white. The red circles work, but there's a white square behind them. How do I limit the white to the shape of the icons/circles?
This is my HTLM:
<p class="share">l i g f</p>
And this is my CSS:
.share a {
color: #ececec;
text-decoration: none;
font: 50px 'socialicoregular', Helvetica, sans-serif;
}
.share:hover {
cursor: pointer;
}
.share a:hover {
color: #B61618;
text-decoration: none;
font: 50px 'socialicoregular', Helvetica, sans-serif;
background-color: #fff;
}
Thanks a lot for your help!
Stefaan
There is no simple solution for this one because you only rely on a font. You could try to add a border-radius (your font-size is set to 50px so radius of 25px will probably do it but you will have to play around with it) to the .share a:hover element.
The "Shape of the icons/circles" is actually a rectangle.
You're setting the white background to the link. The link is a rectangle.
You won't be able to directly style the background of a font/character.
Since your icons are all rounded, here's a little trick you could use:
border-radius: 50px;
That's simply a guessed figure. It doesn't mean it's the right one. Just find the one you need that matches your icons height/width.
(You might also need to work with your line-height to make sure your font is, or at least looks vertically centered.)
I'm trying to force the text color in the option of a select input and it's working on every browser in the world but guest what, yeah IE still don't give a damn about the color in the stylesheet.
Do you guys know how to force IE to make my text color like I wish
Here's what I expect
and this is what IE does
CSS
#footer .findProduct select{background: transparent; border:0; color:#fff!important; font-weight:700; text-transform: uppercase; font-family: 'Crimson Text',serif; }
#footer .findProduct select option{color:#000!important; text-transform: uppercase;}
Styling selects with css is just a bad idea. It is impossible to get them styled correctly in all browsers. All you can do is mimic the select box with js. There are frameworks and plugins availble. Basicly they will hide the select and replace them with a list or something that acts like a select, and wich you can style completly. In the background they will update the select in sync with the list to still make your form work on submit. You could also do something similar yourself (best to use jQuery), it should not be to hard if you are a bit familiar with it.
I guess the custom arrow button you use in your screenshot is not working eather...
Your css rules contradict each other change them to this:
#footer .findProduct select{background: transparent; color: #fff; border:0; font-weight:700; text-transform: uppercase; font-family: 'Crimson Text',serif; }
#footer .findProduct select option{color:#000 !important; text-transform: uppercase;}
Demo: http://jsfiddle.net/dan_barzilay/tJZek/
I have something like this
<h1>
Home
</h1>
Very simple. IE, FF render it smoothly, underline works fine. Safari does this weird thing I've never seen before, it underlines "Home" only where the font serifs & curves DONT touch the underline, i.e. the letter "H" would get underline between the two "pillars" (sounds weird i know), and where those two touch the underline, the latter becomes much lighter in color (#eee vs #000).
UPDATE:
Apparently Safari's not rendering the link well when there's
text-shadow: 0px 2px 1px #fff;
Is there a particular reason for this?
The reason is because the text-shadow is rendered on the frontmost layer. If I were you I'd add a border-bottom to the h1 a element with no text underline.
h1 a {
text-decoration: none;
border-bottom: 1px solid blue;
}
Of course, replace blue with whatever colour your links are.
Edit: Realized that the shadow could be fixed with a span tag.
I think having a bit of space between the underline and the baseline when using the drop shadow looks better, but if you must have a text-decoration: underline you would have to add a span element to your markup:
<span>Home</span>
CSS:
h1 a span {
position: relative;
top: 0px;
z-index: -100;
}