I need to target IE using Media Queries. example
#media screen and (max-width:1024px) {
/*Only IE Fix here*/
/*Any other browser*/
#-moz-document url-prefix() {
#categoryBackNextButtons{
width:486px;
}
}
There is a similar way like there is for firefox?
I know it's an old topic, but I've just been searching for the same question and found the answer (while seeing this when searching). If anybody else finds this, here is what worked for me (IE10/11, Firefox 39.0)
IE: #media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
Firefox: #-moz-document url-prefix()
Please don't resort to user-agent string parsing or browser hacks. See this great article by Paul Irish on conditional comments. You can also see the source code of the HTML5 Boilerplate project.
Simply use the class names in your CSS like so .lt-ie8 div
Related
Here is a question for the code bbcode in phpbb3. As we can see here (official site of phpbb3) two ways of presenting a code are used. Is this a bbcode? If so, how can I add it to the board? If not, is this a mod? If yes, where can I find it?
I have searched a lot of how I can achieve a result like this but I came up empty. I appreciate for your help.
Edit: I am talking of course about the code that is presented as an inline next to the text.
I'm not sure how phpBB implement it, but you could use BBcode to achieve the same effect. To add custom BBcode go to the Posting tab in your ACP, and BBcodes is the first option in the left column.
BBcode usage:
[inline-code]{TEXT}[/inline-code]
HTML replacement:
<span style="background: #fff none repeat scroll 0 0;border: 1px solid #c9d2d8;color: #2e8b57;display: inline;font-family: Monaco,"Andale Mono","Courier New",Courier,monospace;font-size: 0.9em;font-style: normal;line-height: 1.3em;padding: 0 3px;">{TEXT}</span>
Help line:
[inline-code]Your code here[/inline-code]
The above css is taken from the link you posted so should look the same on your site.
Fontastic.me is a website that let you upload svg files so you can use your icons as a font. I've used this site lots of times, but today I noticed the icons are not working on mobile anymore. They do work in the browsers on computer. I only noticed it today, it has always worked before.
You can use this link to test on mobile.
To me it seems like a bug in the Fontastic CSS generator: your page links CSS
https://fontastic.s3.amazonaws.com/8pMGtiqubDqmpbD4ER7hE3/icons.css
this contains last SVG fallback linked as
https://cdn.myfontastic.com/8pMGtiqubDqmpbD4ER7hE3/fonts/1446830181.svg#1446830181
the hash part of the URL must correspond with font ID in the SVG, but actual source contains <font id="cloud-font" horiz-adv-x="512"> instead.
So replacing #14468301 with #cloud-font in CSS or replacing #id value in SVG should fix your problem.
This applies only for case your mobile really resorts to SVG version. Only few browsers would do that (I think Android below 4.4, maybe old Safari, Blackberry, and maybe Opera Mobile).
(Besides that, your HTML contains extra HEAD tag with icon CSS link in BODY, what is not valid. I donʼt think this will make any sane browser completely ignore the link, but cannot exclude such possibility. If you have served your page as real application/xhtml+xml, browser should show the error right away.)
Greg, i had the same issue. I end up ditching Fontastic and use https://glyphter.com/ instead.
Glyphter creates your own font set by uploading each character at a time.
It worked for me and perhaps you can try this too and see if it works.
Question: Is there a easy way to detect the browser of the user ?
Details: I would like to change for example the value of background-color of body. I've already see something like <!--[if !IE]>.
Edit:
Okay, I agree, browser detect is bad (Link taken from #TylerH), and should not be used. Thank I take note. And If someone really still want to use them, I've found a good website with a list of browser detection hack.
I think there is no way to do it with HTML or CSS (I don't like hacks).
But you could check the user agent string with JS.
See here: How to make CSS visible only for Opera
I do some work on on old tables based site. It is being replaced but I would like it to work for now.
One of the pages in question is http://www.gdsofusa.com/marantec_garage_door_openers.html. When this page (and some others) is viewed in Safari 5.0 (7533.16) and probably others, the page content is off to the right.
I just need to fix this since about 15% of the traffic is Safari.
Please help!
I got it working by:
Removing "float:left" on your "tabs" div
Setting your "tabs" li's as "display:inline-block" instead of "display:inline"
HTH
The first thing to try is always validation
A common cause of this kind of problem is a mismatched end tag on an HTML element.
Try an HTML validator like http://validator.w3.org
I need to set the width of textboxes as 80% of it's parent. So first I used
td input[type="text"]
{
width: 80%;
}
But it was not rendering properly if the input is the child of td. So, I used Css expressions
td input[type="text"]
{
width: expression(this.parentNode.offsetWidth*0.8);
}
It is working as I wanted in every browser except IE 6. Can anybody help me, where I am going wrong? I know that expressions are allowed in IE 6. So, is it the problem of using css expression or something to do offsetWidth.
Thanks in advance.
td input[type="text"]
Attribute selectors don't work in IE6. If you want to support this browser, add a class="text" and style on td input.text.
You shouldn't need anything complex with scripts, jQuery or expressions.
try rewriting as
* html td input[type="text"]
{
width: expression(this.parentNode.offsetWidth*0.8) !important;
}
however my own alternative method would be to detect ie version and if its 6 redirect to an error page with a angry face alerting to the user : Its 21st Century you moron! Update!
:)
Sorry I am writing answer for my own question, thought if somebody can get help from this.
I tried many things from CSS, nothing worked in IE 6. So, finally used jquery
if (jQuery.browser.msie && jQuery.browser.version.substring(0, 1) == "6") {
$("td > input[type='text']").each(function() {
$(this).css("width", $(this).parent().width() * 0.80);
});
}
It worked for me fine.
I believe this issue is caused by the ie 6 box model. The width and height include the padding and the borders. See here for more info.