I have a CSS file where I put all my styles inside and whenever I define any code such as:
MYtitle{
color: brown;
font-size:19px;
font-family:"Comic Sans MS", Times, serif;
}
Then I call it in my html file using:
<MYtitle> This is my defined Heading </MYtitle>
It will work in Firefox and other browsers but not in Internet explorer, it will not sense my styles at all.
Is there another way to define the above to also work with Internet Explorer? I'm trying to build a website that works in all browsers
Any tips or help is greatly appreciated.
Thanks.
Internet Explorer will only style valid HTML elements, and that's why there's the HTML5 shiv for IE8 and earlier. You can work around this by calling document.createElement with the element name in JavaScript:
document.createElement('MYtitle');
Here's a demo.
More likely than not, however, you shouldn't be using your own tag type. This renders your markup invalid and can cause compatibility problems, akin to those you've just experienced. A possible alternative is CSS classes instead, though they might not fit the bill entirely. It depends on what you're trying to do.
Related
Chrome on Left, Firefox on Right
We're using jqmath and would like to use the line-through text-decoration, as described here: How does one indicate strikethrough in jqmath?
This works in Chrome, but is not working in Firefox.
.deletedText {
color: red;
text-decoration: line-through;
}
...Neither of these will produce a line-through in FireFox (but both work in Chrome)
<li>$ \cl "deletedText"{ax^2+bx+c=0}$</li>
<li class="deletedText">$ax^2+bx+c=0$</li>
Any assistance is appreciated.
This is an issue with native MathML in Firefox. Firefox and Safari actually implement (large parts of) MathML, but the implementations don't always respect all CSS properties. This example works in Safari 10, for example, but I don't know if it will continue to work in Safari in the future. You could file a bug at mozilla. One problem is that MathML is not being actively worked on by the browser vendors (I am hoping this will change as schools get more computers, but I've been hoping for years/decades, sigh), and another problem is that the MathML spec was developed for non-CSS and pre-CSS (!) environments, and some might argue the spec doesn't explicitly state that all CSS properties must be implemented/respected.
If strikethrough is a requirement for you, then in the short-term you can turn off native (browser) MathML in javascript:
M.MathML=false;
Do this in a <script> that's after the <script src="..."> tag that you use to load jqmath.
For some reason, a ::selection declaration in my CSS simply is not working, it is always behaving as per the default (light blue background on Chrome, Mac).
The code works fine in a jsbin
::selection {
background: red;
}
Thus my assumption is something is being overridden somewhere in the project, but I can't find another declaration of ::selection anywhere in the stylesheet. I was wondering if there is any way to see this in the Developer Tools to try to pinpoint or debug why it isn't working in my project?
Even giving the CSS an !important declaration isn't helping.
edit
OK, I tried debugging further by adding:
<style type="text/css">
::selection, ::-moz-selection {
background: red !important;
}
</style>
to the footer of the document, and thus it turns out that one cannot combine these two declarations in one statement, which was mentioned by Chris Coyier in this comment:
I have a question: Why can´t you put ::selection and ::-moz-selection together and define a value for both of that? If you do that FF will ignore the values.
That’s a good CSS lesson! When a browser doesn’t understand any part of a selector, it ignores
the whole selector (even if they are comma separated). There are some
exceptions but mostly in old browsers (IE 7?).
So all is well and working again, but the question still stands I suppose, is there a way to see this declaration in the devtools somehow?
edit 2
Ok, of course, when the declaration sits on its own line, then it appears in the inspector.
edit 3
A very relevant SO question: Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?
I'm just surprised Chrome doesn't just still show the malformed declaration in the inspector rather than hiding it completely.
Try to check via inspect element.
Right click on web page
Select "inspect" option
In inspect element panel, there will be style appear in right hand side.
You will find your :selection declaration in it.
I was reading a book about javascript (Javascript & jQuery: The Missing Manual) and when I tried an example from the book I realized that Firefox does not display the strong tag.
All other browsers (Chrome, Safari) have no problem displaying it.
Searching the css file of the html page I saw that the author has done a css reset (including the strong tag) and then he declared strong like this :
strong {
font-family: 'ColaborateMediumRegular', Arial, sans-serif;
}
Maybe if he had added font-weight: bold; inside the new definition he could overcome this problem.
My question is whether there is a reset file that include all these little missing details and works with all major browsers.
Thank you.
CSS reset snippets are not meant to be used strictly and can be altered to your specific needs.
Just remove the strong selector from the reset definition and the behavior will work as you intended. Or, override the resets' definition with:
strong {
font-family: 'ColaborateMediumRegular', Arial, sans-serif;
font-weight: 700;
}
The description “Firefox does not display the strong tag” was probably meant to say that Firefox renders strong elements in normal font weight, not bold. This is exactly what “css reset” is supposed to do: to reset rendering so that browser defaults are not used, so that author-supplied CSS code can start from a clean board, so to say. The author may wish to render strong elements using a distinctive color or background or some other method(s). Bolding, if desired, would have to be specified explicitly.
Without seeing the specific “css reset” code and the HTML page used it is impossible to say why the reset did not work on some browsers.
It is possible that ColaborateMediumRegular is supposed to refer to an embedded (#font face) font, which looks distinctive enough. Font embedding is known to have browser dependencies.
I am getting a styling problem with options. I need some options to appear in bold style, but Internet Explorer doesn't want to render it.
I'm setting it using CSS using font-weight: bold;, which is not working.
An example can be seen in this page: Example, which shows bold fonts in Firefox but not in Internet Explorer.
I have tried in Internet Explorer 7 and 8.
Has anyone has an alternative?
A sample:
HTML:
<select>
<option class="special">Special</option>
</select>
CSS:
.special {
font-weight: bold;
}
IE doesn't allow styling of <option> elements independently. This is because IE uses a Windows form control to render the select box, which doesn't support this feature.
(as an aside, this is the same reason that IE's select boxes can have issues with layering when you put them behind other objects; the form control is being rendered by the Windows OS, not by the browser, so the browser has less control over it than most other elements on the page)
Other modern browsers do allow you to do it, as they render their own select boxes rather than deferring to the OS.
in IE, you can't style an option. I had the same issue...you can give it color but not much else.
You could write a jquery plugin or find an existing one to "convert" your select to a styled list/dropdown.
Also see: Create a styled Dropdown like on jquery UI
You need to apply the font-weight:bold to the paragraph of text, not to an outer div or something else.
Also, make sure nothing else is overriding this declaration. If the above doesn't work, change it to font-weight:bold!important and see if that fixes the problem.
body
{
font-family: 'Lucida Sans Unicode';
font-size: xx-small;
color: #008080;
}
on the top of my style sheet, and non of those specs are taking affect on my page, nothing, i tried doing it on td, table, tr, span, div just in case i needed to be more specific, but nothing is working, i want to make global changes without having to change things one by one and i can't seem to find a solution, any ideas?
thanks - your input is appreciated
ps: more info for those interested:
i have a standard mster page, and content pages, listview control that populated data from a database, but all the elements in my controls of concern is html elements (im sure some would be runat="server") the style is linked correctly as well, as other styles on the style sheet work...
here is the code where the text is not changing..
HTML TAGS ARENT DISPLAYING IN MY COMMENTS FOR SOME REASON...???
Clear your temporary files and try restarting the browser - chances are that its using a chached copy of the page.
There is nothing syntactically wrong with that code. The issue must have something to do with how it is being applied to the HTML (and thus with some code or HTTP response header that you haven't shared with us).
Hard to say without seeing the html and style sheet, but perhaps later declared styles are "overwriting" your body style?
If you can't see these changes they are being overridden by other styling applied somewhere else.
The easiest way to debug what css rules are being applied to elements on your page is by using a tool like the firebug extension available for firefox (available from http://getfirebug.com/)
Once you have this you can select an element and see what has been applied by what rule - and then you can override that rule!
There is also an IE dev toolbar, and developer extensions for chrome and firefox that do the same thing.
Hope that helps.