css strikethrough on Safari - css

First time asking question here, and actually kinda nervous! haha
Anyway, having issues with strikethrough. I use Safari on my Mac, and the line isn't displaying. Tried on Chrome, and it seems to work.
So, is there a workaround? Here's my css code I'm trying to work with
.astroTitle {
color: rgba(233,160,62,1.00);
font-family: Verdana, Tahoma, "Trebuchet MS";
font-size: 18px;
font-weight: bold;
background-color: rgba(82,4,5,0.58);
border-style: solid;
border-width: 2px 2px 2px 2px;
border-color: rgba(184,113,1,0.77);
}
.astroStrikeTitle {
text-decoration: line-through wavy rgba(108,108,255,0.75);
}
And then I'm just using span
<span class="astroStrikeTitle">some text</span>
And I get nothing.
Again, it works fine on Chrome. Just not on Safari. :/

You need to be more specific with your -webkit. Please try the following:
.astroStrikeTitle {
text-decoration-line: line-through;
-webkit-text-decoration-line: line-through;
text-decoration-color: red;
-webkit-text-decoration-color: red;
}
.astroTitle {
color: rgba(233,160,62,1.00);
font-family: Verdana, Tahoma, "Trebuchet MS";
font-size: 18px;
font-weight: bold;
background-color: rgba(82,4,5,0.58);
border-style: solid;
border-width: 2px 2px 2px 2px;
border-color: rgba(184,113,1,0.77);
}
<span class="astroStrikeTitle">some text</span>

here is the answer to your question: https://stackoverflow.com/a/51254417/4527878
also always check mdn docs for support here: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
for specific to your question :
.astroStrikeTitle {
text-decoration: line-through wavy;
-webkit-text-decoration-line: line-through wavy;
color: rgba(108,108,255,0.75);
}

Related

Bootstrap 4.6 btn and nav-link identical CSS, but they look different

I added a navbar-collapse to my webpage, and below the nav-links I added a navbar-form item. Just standard bootstrap 4.6 CSS without any modifications, except for the 2 details below.
The form has a button, from which I removed the standard CSS attributes by adding it a class="btn remove_button_css".
However the font of the "link" and the font of the "button" look very slightly different in all browsers I tried. See the picture below. Any idea about what might cause it ?
<style>
.remove_button_css {
outline: none;
border: 0px;
box-sizing: none;
background-color: transparent;
padding: 0.5rem 0rem;
cursor: default;
color: #6c757d;
font-size: 1rem;
font-weight: normal;
text-decoration: none;
}
.nav-link {
color: #6c757d;
font-size: 1rem;
font-weight: normal;
text-decoration: none;
background-color: transparent;
}
</style>
Thanks for your help !

Border in external CSS

I am following the instruction of my book and everything is fine, except the border. It's invisible. It doesn't show up on my webpage.
This is my external CSS file:
body {
font-family: Arial, verdana, sans-serif;
color: #665544;
padding: 10px;}
page {
border-style: solid;
border-width: medium;
border-color: red; }
page {
background-color: #efefef;
padding: inherit;}
Did I make any mistake?
Can you please help me?
Thanks

How to override css containing '!important' using JavaScript under HTML input objects? [duplicate]

This question already has answers here:
Overriding !important style
(11 answers)
Closed 5 years ago.
I actually work on a plugin for wordpress and I have problem to dynamically stylize a button form (input[type="submit"]), because some wordpress themes use the "!important" property.
I want to override that use JavaScript under HTML input objects, because i want to call some css value using php.
In the demo below I have volentary put the "!important" property in the css style to try to override it.
DEMO
input[type="submit"] {
font-family: FontAwesome, 'Diplomata SC', "Helvetica Neue", helvetica, arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
display:block;
background-color: #333333!important;
color: #FFFFFF!important;
padding: 5px 11px;
letter-spacing: 2px;
border: none;
cursor: pointer;
font-size: 15x;
border-radius: 3px;
box-shadow: 0 -3px rgba(0, 0, 0, 0.14) inset;
}
input[type="submit"]:hover {
background-color: #27ccc0!important;
color: #FFFFFF!important;
}
<input
onmouseover="this.style.backgroundColor='#6ce033'; this.style.color='#FFF'; return true;"
onmouseout="this.style.backgroundColor='#40c200'; this.style.color='#FFF'; return true;"
type="submit">
<?php
function add_button($id) {
$stored_meta = get_post_meta($id);
$btn_bg_color = esc_attr( $stored_meta['btn_bg_color'][0]);
$btn_txt_color = esc_attr( $stored_meta['btn_txt_color'][0]);
$hover_btn_bg_color = esc_attr( $stored_meta['hover_btn_bg_color'][0]);
$hover_btn_txt_color = esc_attr( $stored_meta['hover_btn_txt_color'][0]);
echo '<input onmouseover="this.style.backgroundColor='."'".$btn_bg_color."'".'; this.style.color='."'".$btn_txt_color."'".'; return true;"
onmouseout="this.style.backgroundColor='."'".$hover_btn_bg_color."'".'; this.style.color='."'".$hover_btn_txt_color."'".'; return true;" type="submit">'
?>
}
Above, a concrete example of what I want to do. Changing the style depending the post id.
Since you didn't seem to find which exactly in the previous answer would solve your problem, here's an example implementation.
input[type="submit"] {
font-family: FontAwesome, 'Diplomata SC', "Helvetica Neue", helvetica, arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
display:block;
background-color: pink!important;
color: #FFFFFF!important;
padding: 5px 11px;
letter-spacing: 2px;
border: none;
cursor: pointer;
font-size: 15x;
border-radius: 3px;
box-shadow: 0 -3px rgba(0, 0, 0, 0.14) inset;
}
input[type="submit"]:hover {
background-color: red!important;
color: #FFFFFF!important;
}
<input onmouseover="this.setAttribute('style','background: #6ce033 !important; color: #fff !important;');" onmouseout="this.setAttribute('style','background: #40c200 !important; color: #fff !important;');" type="submit">
There is a bug where the button is initially pink and doesn't change until you mouseover it. You can hack around this by adding a unique id to the input then creating a script right after the input to immediately change the style attribute of the input field.
input[type="submit"] {
font-family: FontAwesome, 'Diplomata SC', "Helvetica Neue", helvetica, arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
display:block;
background-color: pink!important;
color: #FFFFFF!important;
padding: 5px 11px;
letter-spacing: 2px;
border: none;
cursor: pointer;
font-size: 15x;
border-radius: 3px;
box-shadow: 0 -3px rgba(0, 0, 0, 0.14) inset;
}
input[type="submit"]:hover {
background-color: red!important;
color: #FFFFFF!important;
}
<input
onmouseover="
this.setAttribute('style',
'background: #6ce033 !important; color: #fff !important;'
);"
onmouseout="
this.setAttribute('style',
'background: #40c200 !important; color: #fff !important;'
);"
type="submit"
id="button_ID" />
<script>
var button = document.getElementById("button_ID");
button.setAttribute('style',
'background: #40c200 !important; color: #fff !important;'
);
</script>
Take note however that both of these solutions are pretty hacky. There are better ways to do things like this, but obviously that is out of this question's scope.
Can't you just add a class to the input?
input[type="submit"].some-override-class {
background: #40c200 !important;
color: #fff !important;
}
input[type="submit"].some-override-class:hover {
background: #6ce033 !important;
color: #fff !important;
}
The best way to override existing CSS is to further specify its importance using additional classes, IDs, or contexts.

Star hack not working in IE6 AND 8

Can somewhere help be, my star hacks arnt working in IE6 and 8 for these form elements I am trying to style? But it oddly works in ie7?
I tried adding the star infront of the class selector in general, which made it work in IE8 and 7, but stil not 6 and then made the * apply to firefox, safari, chrome etc. too which just means the star was applying to every browser which I don't need, just internet explorer.
Any help please?
/* FORMS */
/*SEARCH*/
#searchform .s, #searchform .but{float:left;}
#searchform .s{
background-color:rgba(128, 129, 132, 0.4);background-image: url(images/line.png);margin-bottom: 10px; border: none; padding:10px;width: 140px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color: #868686;
}
#searchform .but
{
background-color:rgba(128, 129, 132, 0.4); margin-bottom: 10px; border: none; padding:10px;width: 30px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px;font-weight: bold; color:#00ADEE;
}
/* IE HACK */
*#searchform .s{
*background-color:#C3C3C4;
}
*#searchform .but{
*background-color:#C3C3C4;
*height: 35px
}
/*FIREFOX btn HACK*/
#searchform .but::-moz-focus-inner {
padding: 0;
border: 0
}
/* MAILING LIST */
#mc_embed_signup #mce-EMAIL, #mc_embed_signup #mc-embedded-subscribe{float:left;}
#mc_embed_signup{margin-top: 10px;
background-image: url(images/ieblue.png); }
#mc_embed_signup #text { padding: 8px 5px 8px 8px;
font-family: Helvetica, Arial, Sans-serif; font-size: 10px; line-height: 14px; font-weight: bold; color: #FFFFFF;}
#mc_embed_signup .asterisk {color: #FFFFFF}
#mc_embed_signup #mce-EMAIL {background-color:rgba(0, 173, 238, 0.6);background-image: url(images/line2.png);
margin-bottom: 10px; border: none; padding:10px;width: 158px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color: #FFFFFF; }
#mc_embed_signup #mc-embedded-subscribe {background-color:rgba(0, 173, 238, 0.6); margin-bottom: 10px; border: none; padding:10px;width: 30px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px;font-weight: bold; color:#FFFFFF;
}
/* IE HACK */
* #mc_embed_signup #mce-EMAIL{
*background-color:#60c7ee;
}
* #mc_embed_signup #mc-embedded-subscribe{
*background-color:#60c7ee;
*height: 35px
}
/*FIREFOX btn HACK*/
#mc_embed_signup #mc-embedded-subscribe::-moz-focus-inner {
padding: 0;
border: 0
}
#hidemap{
display: none;}
/* DIRECTIONS */
#daddr #saddr{float:left;}
#saddr {background-color:rgba(128, 129, 132, 0.4);background-image: url(images/line.png);
margin-bottom: 0px; border: none; padding:10px;width: 158px; ;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color: #868686;}
#saddrbut {background-color:rgba(128, 129, 132, 0.4); margin-bottom: 0px; border: none; padding:10px;width: 30px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px;font-weight: bold; color:#00ADEE;
}
*#saddr{
*background-color:#C3C3C4;
}
*#saddrbut{
*background-color:#C3C3C4;
*height: 35px
}
/*FIREFOX btn HACK*/
#saddrbut::-moz-focus-inner {
padding: 0;
border: 0
}
The star hack targets IE7 and below, which explains why it isn't working for you in IE8. I can't say why it isn't working for IE6; I thought the star hack would work for it, but since we've dropped support for IE6, I haven't had to think about it for some time, so I may not be remembering correctly.
I would like to say that using hacks like this is generally a bad idea -- nine times out of ten, if you're using a CSS hack for anything other than IE6, then you're doing something wrong. Even for IE6, it is better to use conditional comments (in fact this point applies to all versions of IE).
If you must use CSS hacks to target IE, I suggest looking at this page which gives specific hacks which you can use to target any individual combination of IE versions.
If you're targetting IE8 and below, then the \9 hack would seem to be appropriate. I would still re-iterate what I said earlier, and recommend not using hacks at all if at all possible.
Hope that helps.
[EDIT]
The reason it isn't working for you is that the star hack goes on the properties, not the selector.
So you have this:
*#searchform .s{
*background-color:#C3C3C4;
}
whereas the star hack would only want the star on the background-color line, not the #searchform selector.
[EDIT2]
More importantly, you don't actually need to use any hack here at all.
Simply specify the plain-colour fall-back version first, followed by the more advanced version, and the browsers will pick the one that works for them, according to what they support:
#searchform .s{
background-color:#C3C3C4;
background-color:rgba(128, 129, 132, 0.4);
margin-bottom: 10px; border: none;
}
See -- no hacks required. :-)
I've read a bit on those css-hacks, and boy are they messy! There is a good reference on
Wikipedia available.
I would advice you to use conditional comments in your html for IE-styling though. It keeps all your IE-specific styling in a seperate file:
<!--[if IE]>
<link href="style-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 8]>
<link href="style-below-ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
This is a complete guide about conditional comments:
http://www.quirksmode.org/css/condcom.html

Cant change the code in CSS

I cannot seem to change my .CSS (the file name is loginmodule.css)
I only wanted to change the font color to black.
I have edited this in Microsoft FrontPage,notepad++, notepad and it has already change but when I look it in the browser(Firefox beta, latest patch). It didn't change at all. I know I had not made a duplicate file and I am sure it is the same file I edited and opened from a browser(Firefox beta, latest patch). Is it because of the browser or something else?
body {
color: #666666;
margin: 0px;
background: #f8f7e5 url('images/abstract-bg.jpg') no-repeat center top;; font-style:normal; font-variant:normal; font-weight:normal; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; padding-left:10px; padding-right:10px; padding-top:20px; padding-bottom:0px
}
.textfield {
font-size: 11px;
color: #333333;
background: #F7F7F7;
border: 1px solid #CCCCCC;
padding-left: 1px;
}
h1 {
color: blue;
margin: 0px 0px 5px;
padding: 0px 0px 3px;
font: bold 18px Verdana, Arial, Helvetica, sans-serif;
border-bottom: 1px dashed #E6E8ED;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
margin: 0px 0px 5px;
padding: 0px 0px 3px;
color: #99CCFF;
border-bottom: 1px dashed #E6E8ED;
}
a {
color: #2D3954;
font-size: 11px;
}
a:hover {
color: #99CC00;
}
.err {
color: #FF9900;
}
th {
font-weight: bold;
text-align: left;
}
#content {
width: 860px;
margin: 238px auto 0;
background: #fff;
border: solid 1px #ccc;
padding: 20px;
}
If you want to be certain the file hasn't been cached by the browser, just append a query string to the CSS file declaration.
So inside your page/template, change the <link /> attribute like so
<link rel="stylesheet" type="text/css" href="/css/loginmodule.css?v=2" />
Alternatively, hold down CTRL and press F5 inside Firefox to do a hard refresh.
Browsers typically cache the CSS. Try closing all of your browser windows then viewing the file.
Things like that usually occur from browsers. I usually delete all history and clear cacheand it works fine. But make sure you have saved and uploaded the css to the correct directory. You can also try to view it in a browser that you don't use very often.
good luck.

Resources