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
Related
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);
}
Ck-editor works itself good, after i save editet text from ckeditor to database, and then i load it to page. Generated html is unformated, is there any aditional ckeditor js functions that have to be applied to target area, or is there any detault class needed to be added to text container ?
I checked ck-editor css files but there is no specific class, like when you check "contents.css" in ckeditor files and there is "img.left{border: 1px solid #ccc; .." thats pretty creepy since there is no specific class, it would work in plain iframe but if i show text from ckeditor in more complex page i have to rewrite css like ".wysiwyg img.left" and then reset all css by modified reset.css for .wysiwyg class, and its pretty hard to reset everything, isnt there some other way that i just missed badly in ck-editor documentation? since all i see in there are only examples in actual editor, not how to style generated text itself.
If you just want the HTML authored in CKEditor to look the same inside your page, first you must insert it inside a div element with a custom class, for example, "my-container".
Then you have to include contents.css in your page. Here you have to alternatives: 1) use Scoped Stylesheets or 2) modify contents.css, scoping each rule.
1. Using Scoped Stylesheets
In this case you should use Scoped Stylesheets and JQuery Scoped CSS plugin (due to current lack of browser support).
Your HTML code would look like this:
<div class="my-container">
<style scoped>
#import "ckeditor/contents.css";
</style>
<!-- Your HTML goes here -->
</div>
2. Scoping each rule inside contents.css
In this case you must link to a modified copy of CKEditor's contents.css file. Each of the rule's selector must be scoped to "my-container" class, so it doesn't affect the rest of the page. Example contents.css file:
.my-container
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
.my-container .cke_editable
{
font-size: 13px;
line-height: 1.6em;
}
.my-container blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
.my-container .cke_contents_ltr blockquote
{
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.my-container .cke_contents_rtl blockquote
{
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
.my-container a
{
color: #0782C1;
}
.my-container ol,.my-container ul,.my-container dl
{
/* IE7: reset rtl list margin. (#7334) */
*margin-right: 0px;
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
padding: 0 40px;
}
.my-container h1,.my-container h2,.my-container h3,.my-container h4,.my-container h5,.my-container h6
{
font-weight: normal;
line-height: 1.2em;
}
.my-container hr
{
border: 0px;
border-top: 1px solid #ccc;
}
.my-container img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
.my-container img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
.my-container pre
{
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE7 */
}
.my-container .marker
{
background-color: Yellow;
}
.my-container span[lang]
{
font-style: italic;
}
.my-container figure
{
text-align: center;
border: solid 1px #ccc;
border-radius: 2px;
background: rgba(0,0,0,0.05);
padding: 10px;
margin: 10px 20px;
display: block; /* For IE8 */
}
.my-container figure figcaption
{
text-align: center;
display: block; /* For IE8 */
}
Ck-editor works itself good, after i save editet text from ckeditor to database, and then i load it to page. Generated html is unformated, is there any aditional ckeditor js functions that have to be applied to target area, or is there any detault class needed to be added to text container ?
I checked ck-editor css files but there is no specific class, like when you check "contents.css" in ckeditor files and there is "img.left{border: 1px solid #ccc; .." thats pretty creepy since there is no specific class, it would work in plain iframe but if i show text from ckeditor in more complex page i have to rewrite css like ".wysiwyg img.left" and then reset all css by modified reset.css for .wysiwyg class, and its pretty hard to reset everything, isnt there some other way that i just missed badly in ck-editor documentation? since all i see in there are only examples in actual editor, not how to style generated text itself.
If you just want the HTML authored in CKEditor to look the same inside your page, first you must insert it inside a div element with a custom class, for example, "my-container".
Then you have to include contents.css in your page. Here you have to alternatives: 1) use Scoped Stylesheets or 2) modify contents.css, scoping each rule.
1. Using Scoped Stylesheets
In this case you should use Scoped Stylesheets and JQuery Scoped CSS plugin (due to current lack of browser support).
Your HTML code would look like this:
<div class="my-container">
<style scoped>
#import "ckeditor/contents.css";
</style>
<!-- Your HTML goes here -->
</div>
2. Scoping each rule inside contents.css
In this case you must link to a modified copy of CKEditor's contents.css file. Each of the rule's selector must be scoped to "my-container" class, so it doesn't affect the rest of the page. Example contents.css file:
.my-container
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
.my-container .cke_editable
{
font-size: 13px;
line-height: 1.6em;
}
.my-container blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
.my-container .cke_contents_ltr blockquote
{
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.my-container .cke_contents_rtl blockquote
{
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
.my-container a
{
color: #0782C1;
}
.my-container ol,.my-container ul,.my-container dl
{
/* IE7: reset rtl list margin. (#7334) */
*margin-right: 0px;
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
padding: 0 40px;
}
.my-container h1,.my-container h2,.my-container h3,.my-container h4,.my-container h5,.my-container h6
{
font-weight: normal;
line-height: 1.2em;
}
.my-container hr
{
border: 0px;
border-top: 1px solid #ccc;
}
.my-container img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
.my-container img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
.my-container pre
{
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE7 */
}
.my-container .marker
{
background-color: Yellow;
}
.my-container span[lang]
{
font-style: italic;
}
.my-container figure
{
text-align: center;
border: solid 1px #ccc;
border-radius: 2px;
background: rgba(0,0,0,0.05);
padding: 10px;
margin: 10px 20px;
display: block; /* For IE8 */
}
.my-container figure figcaption
{
text-align: center;
display: block; /* For IE8 */
}
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.
I have a problem with css and FF3 / IE7 and Opera 10.
I have one input[type="submit"] and one anchor and I want to style them the same. No matter what I try the only logical browser seems to be Opera 10 (it styles them the same with the same css).
FF seems to have different padding (I would need to have the submit box 1px smaller in padding to fit but that would throw Opera 10 off) and IE7 is just way off.
code for you code lovers:
<form action="/login" method="post" id="loginform">
<fieldset>
<input type="submit" value="Login" />
Register
Lost Password?
</fieldset>
</form>
css:
fieldset a {
color: #ffcc00;
border: 1px solid #707070;
background: #000000;
font-size: 10px;
font-weight: normal;
padding: 2px;
/*vertical-align: text-top;*/
}
fieldset a:hover {
color: #ffcc00;
border: 1px solid #707070;
background: #333333;
cursor: pointer;
font-size: 10px;
font-weight: normal;
text-decoration: none;
padding: 2px;
}
fieldset input[type="submit"] {
color: #ffcc00;
padding: 2px;
border: 1px solid #707070;
background: #000000;
font-size: 10px;
font-weight: normal;
}
fieldset input[type="submit"]:hover {
color: #ffcc00;
padding: 2px;
border: 1px solid #707070;
background: #333333;
cursor: pointer;
font-size: 10px;
font-weight: normal;
}
any help to solve the issue of alignment between browsers is desired as I need to support all three (safari too but I think if I get these 3 aligned it should work there too).
Many thanks in advance (p.s I'm going on lunch now and will check answers right after so sorry for the slow replies in advance)
The Firefox problem is solved like this
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Try this in isolation. I recommend using a reset.css file to force all browsers to treat apples as apples, and then styling your INPUT and A elements accordingly.
It's possible that other CSS rules are coming into the mix.
See http://meyerweb.com/eric/tools/css/reset/ for a reset file.
I've had issues with the past with IE and styling certain elements (specifically disabled elements), and how IE differs in its handling of this styling between versions 6 and 7.
The following DOCTYPE seemed to help in those circumstances, but rendering in IE 6 may no longer work as expected:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">