See the example snippet below of a text using two box-shadow: inset as underline.
It renders perfectly on Chrome, Firefox and Safari (recent versions).
But it looks like this on Edge (see the faded line leaking at the bottom of the underline):
QUESTION
Is there any way around this? Or should I just give Edge users what they deserve?
#import url('https://fonts.googleapis.com/css?family=Proxima+Nova');
h2 {
font-family: 'Proxima Nova';
color: rgb(60,128,124);
font-size: 21px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}
a.boxShadow {
color: darkGrey;
text-decoration: none;
line-height: 26px;
box-shadow: inset 0 -2px white, inset 0 -4px 0 rgb(60,128,124);
padding-bottom: 3px;
}
<h2>
<a class="boxShadow">Hello gjq box-shadow</a>
</h2>
https://gs.statcounter.com/browser-market-share/all/europe/#monthly-201810-201910-bar
I reproduced the issue in Microsoft Edge(EdgeHTML). I think it might be due to the different performance of different browser's render engine. Besides, I found a similar issue report, you could also report this issue. The situation of another issue report is also similar.
You could try to avoid using two inset box-shadow in Microsoft Edge(EdgeHTML) and use the code below as a workaround:
#import url('https://fonts.googleapis.com/css?family=Proxima+Nova');
h2 {
font-family: 'Proxima Nova';
color: rgb(60, 128, 124);
font-size: 21px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}
.boxShadow {
color: darkGrey;
text-decoration: none;
line-height: 26px;
box-shadow: inset 0 -2px 0 rgb(60, 128, 124);
padding-bottom: 1px;
}
<h2>
<a class="boxShadow">Hello gjq box-shadow</a>
</h2>
Related
I am running a site inside of an application viewer. This viewer will render the website in IE8 compatibility mode which I have no control over and can't change.
I have an input with top/bottom padding of 6px and left/right padding of 12px, but for some weird reason the bottom padding is ignored and the padding is incorrect.
Here is a screenshot of what I'm seeing:
Here is the CSS I'm using to style the input field:
input[type="text"] {
line-height: 1.42857143;
vertical-align: middle;
font-size: 14px;
font-weight: normal;
padding: 6px 12px 6px 12px;
*padding: 6px 12px 6px 12px;
}
I have Googled around for a while now and can't seem to be able to find a solution to my problem. Many tips I found suggest to use various line-height adjustments, while some suggest to use *padding: 6px 12px 6px 12px;. None of these tips work and the issue still exists.
How can I force the input to have equal top and bottom padding in IE8?
Note: I CANNOT use the http-equiv meta tag as it will cause other problems with the viewer.
You cannot :(
you may style a regular tag instead :
span {
float: left;
border: inset gray 2px;
background: white;
line-height: 2em;
height: 2em;
}
span input {
border: none;
}
.submit,
.submit input {
background-color: #337AB7;
border: solid #337AB7 2px;
width: 3em;
color: white;
text-align: center;
}
p {
display: inline-block;
box-shadow: 0 0 3px white;
}
body {
background: tomato;
}
<p>
<span>
<input type="text" value="(800) 123-456789" />
</span>
<span class="submit">
<input type="submit" value="Dial"/><!-- unless this a link , styles to be applied here & span can be skipped -->
</span>
</p>
I'm creating a toplist of users where I use CSS3 border to create a white-border for the ranking number. Its viewable here: http://www.cphrecmedia.dk/musikdk/stage/channelfans.php
However it seems theres a black border after the border, which I find very very strange. It seems its spill from the background-color.
Its a very minor issue, but I'm very interested in why this actual happens. Does anyone know why? The CSS is very very simple, so it shouldn't happen
To prevent this leak outside border, you need to declare a background-clip property with padding-box. This shall resolve your issue.
The Code change:
#tf span h6 {
background: #333333;
border: 4px solid #F9F9F9;
border-radius: 99px;
color: white;
font: 700 30px/80px arial, sans-serif;
margin-left: -26px;
padding: 5px 13px;
/* The important part to remove the overflow/leak: */
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
Hope this helps.
Looks like it is a spill issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=24998
You can add this
box-shadow: 0px 0px 2pt 2pt black;
inside your
#tf span h6 {
}
in .css file
like:
#tf span h6 {
border-radius: 99px;
background: #333333;
color: white;
font: 700 30px/80px arial, sans-serif;
padding: 5px 13px;
border: 4px solid #F9F9F9;
margin-left: -22px;
box-shadow: 0px 0px 2pt 2pt black;
}
it will generate black shadow to your rounded box, so more or less it will become attractive and removes that box kind of issue.
Im using Contact Form 7 on my WP site, and I'm experiencing a strange issue with the submit button. Im using the following class for the button:
.ctaredbutton
background-color: #EA3939;
border-radius: 40px 40px 40px 40px;
color: #FFFFFF !important;
font-family: Proxima Nova,Helvetica,sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 22px 30px;
text-transform: uppercase;
margin-left:20px
The button displays as expected in Firefox (http://cl.ly/SQ5Y) but there appears to be extra padding in Chrome (http://cl.ly/SPcr). The form is live at 'elitegolfusa.org/apply'
Has anyone seen this before? I've got no idea where the additional top padding has came from?
Ditch the padding on the top/bottom altogether and use line-height. Set line-height to whatever height you want the button.
.ctaredbutton{
background-color: #EA3939;
border-radius: 40px 40px 40px 40px;
color: #FFFFFF !important;
font-family: Proxima Nova,Helvetica,sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.02em;
line-height:45px; // I added this
padding: 0 30px; // I changed this
text-transform: uppercase;
margin-left:20px
}
I want to create a styleguide for a website, and say I have a h1 I always want there to be 28px bottom margin before the next text whatever it is, from the foot of the letters to the top of next letters. Problem is that in HTML if the line-height's always add some extra spacing, and it might differ for each text. Is there a rule to know exactly how much margin-bottom to use so it will always be 28px for example?
<h1>HL1: Meine Bestellungen</h1>
<h2>SL1: Bestellnr. 1234563</h2>
h1 {
background: none repeat scroll 0 0 rgb(255, 255, 0);
color: rgb(153, 145, 141);
font-family: Georgia;
font-size: 26px;
font-weight: normal;
letter-spacing: 0;
line-height: 30px;
margin-bottom: 28px;
text-decoration: none;
text-transform: uppercase;
}
h2 {
background: none repeat scroll 0 0 rgb(0, 255, 0);
color: rgb(196, 18, 47);
font-family: Lucida Sans;
font-size: 12px;
font-weight: normal;
letter-spacing: 0.1em;
line-height: 20px;
margin-bottom: 6px;
text-decoration: none;
text-transform: uppercase;
}
Thanks!
It's got nothing to do with line height, it's got to do with browser defaults.
For instance in my version of Google Chrome there is a margin-top value applied to the h2 by default. You should just specify all margins:
h1 {
margin: 0 0 28px; /* shorthand notation */
}
h2 {
margin: 0 0 6px;
}
Look into a "CSS reset", and in jsFiddle you can check the "Normalize CSS" option.
Reources:
https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet
CSS reset - What exactly does it do?
I know this is a NOOB question to most of you, but here is what Im trying to have it look like: http://cssdesk.com/6Rzk2 (Keep that link for the preview please)
However its just showing up as just plain text.
Thanks
As far as I can see, you only have 2 style sheets being loaded on your site - style.css and large.css. Neither one has anything for #SumTitle. Add this to style.css and it will work -
#SumTitle {
color: #0D2F87;
border-bottom: 1px #3a6cc5 solid;
padding: 20px 0px 3px 0px;
margin: 0px 0px 5px 0px;
font-weight: bold;
font-family: Verdana, Arial, sans-serif;
font-size: 18px
}