Help solve the problem with Edge. You need to apply the style only under the edge, as in my example.
I tried to do it as under microsftexplor but without result. How to do it right, where am I mistaken? Thanks!
.class {
width: 90%;
margin-left: 0;
-ms-margin-left: 10%;
}
The below code will work for the MS Edge legacy browser from 12 to 18 version.
<!doctype html>
<html>
<head>
<style>
#supports (-ms-ime-align:auto) {
h1{
color: red;
}
}
</style>
</head>
<body>
<h1>This is my sample text...</h1>
</body>
</html>
Output in MS Edge legacy browser:
References:
Browser-specific CSS for Internet Explorer, Firefox, Chrome, Safari and Edge
How to Identify Microsoft Edge browser via CSS?
If you are using the MS Edge Chromium browser then let us know about it. I will try to find a solution to it.
Related
I'm working on styling my web page on a separate CSS file. I have created a link on my HTML file to apply the styling effects to my web page but it doesn't show any effect.
I tried the most basic styles to see if there was an effect to my webpage but nothing happened. I tried writing the codes with Microsoft Visual Studio, and then Notepad++ but still, no effect occurred. I also tried opening my web page using the latest version of Mozilla Firefox, Internet explorer and Microsoft Edge to see any effect but nothing happened.
I tried styling my h1 element using the codes I'll show on the next field
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="Stylesheet" href="../css/staret.css" type="text.css">
</head>
<body>
<h1> Football lives </h1>
</body>
</html>
on my staret.css file, here's what I wrote:
h1 {
color: Red;
}
I expected to see "Football lives" in red color but the actual output was the default color black.
No need to install CSS plugin. There is a little error in your code while linking CSS with HTML.
It should be, type = "text/css" in place of "text.css"
No. CSS3 is included. No need to think about it as an 'addon' or separate thing.
Your issues are with however you are authoring the file. Try putting it in a jsFiddle. : )
.box {
width: 20px;
height: 20px;
background: #ff0066;
padding: 1rem;
transform: rotate(20deg); /* CSS3 */
}
<section class='example'>
<div class='box'>hi</div>
</section>
Why Display on IE not same on other browser (EG: chrome , opera) [CSS ZOOM] ?
https://jsfiddle.net/n11b7pw6/
<html>
<body style="zoom: 0.1;">
<img src ="https://s-media-cache-ak0.pinimg.com/236x/3d/df/34/3ddf340436cc77dc9c468505be1ad123.jpg"/>
</body>
</html>
How to change page height on IE for remove scrollbar ? (Do not use overflow: hidden;)
REMARK : IE still zoom our only image not zoom out all of page like other browser.
Not sure what's going with your zoom in IE, but it's worth noting that:
zoom doesn't work in Firefox (see the compatibility chart)
Very few people use Opera. The key browsers to test are IE (various versions), Edge, Chrome, FF, and Safari
the standard way to "zoom" is to use transform: scale()
Looks like what you want to do is make the image the full height of the window? To do that, you'd do:
/* CSS */
html,
body {
height: 100%;
margin: 0;
}
img {
display: block;
height: 100%;
}
<!-- HTML (body tag can be left out in stacksnippets, and also in jsfiddle -->
<img src="https://s-media-cache-ak0.pinimg.com/236x/3d/df/34/3ddf340436cc77dc9c468505be1ad123.jpg" />
I am trying to make a really simple CSS hover. It works fine in IE, Edge, Chrome and Firefox, but doesn't work for Safari (9.1) on Mac.
Have searched the internet and Stack Overflow for a fix, but no joy.
Found this simple example on codepen. That works on safari.
BUT: If i take that code, put it into a plain html document and serve it from Azure, it does not work on hover. You have to click on/off the element for the bit that should show on hover to appear. Oddly, if I use the web inspector and toggle the hover state, it works. Example code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#thumbnail {
display: block;
width: 150px;
height: 150px;
}
#thumbnail:hover + #title {
display: block;
}
#title {
display: none;
color: #ffffff;
background-color: #000000;
text-align: center;
width: 130px;
padding: 10px;
}
</style>
</head>
<body>
<a id="thumbnail" href="#"><img src="http://dummyimage.com/150x150/0066ff/fff"></a>
<div id="title">filename.jpg 1</div>
</body>
</html>
I then created a plnkr to see if something extra was going on in codepen. The plunk also works in Safari on Mac.
What do I need to do to get it working in a standard page please?
I have tested your codepen example and even created a HTML file with the contents above and tested it again in Safari 9.1.1 - all working absolutely fine.
You may find the issue is Safari caching your content from Azure, can you clear the web browser cache and retry the issue?
Perhaps there's a cache on Azure that needs clearing also?
http://jsfiddle.net/36ykrp9x/5/
HTML
<div class="container">
<button>O</button><button>O</button>
</div>
CSS
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
This above code best captures the visual bug I am interested in solving. I should note that this does not appear to affect Firefox or Safari's latest versions. I am currently on Chrome 39. If you are on a retina display and a recent version of Chrome and do not already see the thin line between the elements, try resizing the window a bit. A thin line between the buttons will flicker in and out of presence.
For my purposes, there is at least one element above the button group in the hierarchy with 100% width, and the buttons must be horizontally centered within it. The buttons themselves must have opacity between 0 and 1. They can be divs, or any other element for that matter - but I have indeed tried others and found the problem remains.
Unfortunately, centering the button group within a fixed-width element doesn't appear to solve this issue for me, as the fixed-width button group must ultimately also be centered somehow which appears to resurrect the issue. Nudging with margins can lead to overlapping which is more obvious with elements that have such opacity - which is really no better than having the gap in the first place.
It is worth noting that indeed using background-color: rgba(r,g,b,a) addresses the problem for most intents and purposes, but I am very interested in resolving this without it if only to see that it's possible.
I am not particularly interested in solutions that involve JavaScript. Am I out of luck?
Based on the information you provided, and my own experience with Google Chrome, I'm led to the suggestion that this is a browser bug in Chrome, considering it only occurs in Chrome on a Retina screen, and other browsers such as Safari and Firefox do not exhibit the problem. Your HTML and CSS looks perfect so I don't see issues here.
You can verify that this is a browser rendering issue by also checking this in a latest version of Opera (on your Retina display), as Opera now uses the same Blink rendering engine as Chrome (which is forked from Webkit). If Opera exhibits the same issue then its a Engine issue which should be logged as a bug.
Unless someone else figures out a way around it, I am normally inclined to leave browser rendering bugs like this alone where possible so that you're not hacking code in your site, and when the bug is fixed, you don't have to do anything to your site.
The problem is with jsfiddle.net. I have the same 1 pixel space in Chrome 40 on retina. Try this: http://dabblet.com/gist/c0068a79fc0268482ee1
or the following code, loaded directly:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<button>O</button><button>O</button>
</div>
</body>
</html>
I've used something which isn't working at IE7. That's why, I wanted to write some specific css for ie7 and lower only. That's why, I wrote IE comments tag inside html tag. But, it's not working. I wrote at first:
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="sites/css/ie7-and-down.css" />
<![endif]-->
But, it's not working! I haven't ie7. I had to check via developers tool of IE. I thought, at developers tool, comment tag doesn't work. That's why, for checking I wrote comment tag for all IE such as:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="sites/css/all-ie-only.css" />
<![endif]-->
But, still it's not working!! I don't understand why it's happened. This is the website. I need to replace navigation for IE 7. the navigation is defined at my main stylesheet such as:
.modern-menu {
display: block;
}
I need to remove this at ie so that I wrote at my ie specific styleshhet such as:
.modern-menu {
display: none;
}
some HTML CODE of the websites:
<ul class="modern-menu>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
</ul>
style.css:
.modern-menu {
width: 920px;
height: 40px;
width:99%;
font-family: 'SourceSansProRegular',Arial,Helvetica,"Nimbus Sans L",sans-serif;
font-size: 13px;
float:left;
font-weight: normal;
position: relative;
clear: both;
margin-top:0px;
display: block;
}
all-ie-only.css:
#charset "utf-8";
/* CSS Document */
body {
background-color: #0099FF;
}
.modern-menu {
display: none;
}
.nav {
display: block;
}
Can you please tell me Why this comments tag not working?
In the MS IE developer tools, you can set the browser and document version. Maybe you have just set the browser version.
In Internet Explorer 10 HTML conditional comments are not supported when the page is in standards mode.
http://en.wikipedia.org/wiki/Conditional_comment
Make sure that both buttons above the developer tools window display IE 10 to get a similar result as in the original MS IE 7. The only way to really test what happens in IE 7 is to use an IE 7 (for example in a second Windows test installation inside a virtual machine)