body
{
padding:0px;
background:#2786f4;
position:relative;
margin:0;
color:#818181;
text-align:center;
}
<!--[if IE]>
<style>
#Right
{
width:202px;
background:#f1f1f1;
padding:8px;
position:absolute;
top:130px;
left:945px;
float:right;
text-align:left;
}
</style>
<![endif]-->
<div id="Right" >
sadlf ljas dfjlsdjflsfjsl a;sldjf ;slfj
</div>
I am facing a positioning problem while creating a HTML. It looks okay in all browsers except Opera.
How it will okay in Opera too ?
You have a conditional comment that only works in IE. In IE, I see a light grey box on the right with the text in it.
All other browsers (Opera, Firefox Chrome) don't see the style for #Right and thus don't apply it. So they just show the grey text at the top.
It's not clear what you want to do, but if you want to hide that text completely from non-IE browsers, move the <div> inside the conditional comment, i.e. before <![endif]-->.
Related
I have a line of CSS that acts differently in IE than it does for every other browsers. I want this line to look like this in all browsers:
.header-ie .wrapper-ie:after {
position:absolute;
bottom:-33px;
width:100%;
height:34px;
content:"";
left:0;
background:url(../shadow-bg.png) no-repeat center;
background-size:100% auto;
pointer-events:none
}
I want it to look like this in IE (9 or lower):
.header-ie .wrapper-ie:after{
position:absolute;
bottom:-250px;
width:100%;
height:34px;
content:"";
left:0;
background-size:100% auto;
pointer-events:none
}
How can I accomplish this in my style sheet?
In your HTML page, you can implement a conditional CSS file. Call this after you have called you other stylesheet(s).
<link rel="stylesheet" href="/style/site.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="/style/ie-legacy.css" />
<![endif]-->
You may need to decorate the classes attributes in the ie-legacy.css with an !important.
NOTE: IE9 (and lower) will no longer receive security or feature updates from Microsoft after January 12, 2016.
If you only want to change 1 or 2 things, you can use per-propery hack:
From: http://codemug.com/html/css-hacks-for-ie6ie7ie8ie9-and-ie10/
#hack{
color:red; /* All browsers */
color:red !important;/* All browsers but IE6 */
_color:red; /* Only works in IE6 */
*color:red; /* IE6, IE7 */
+color:red;/* Only works in IE7*/
*+color:red; /* Only works in IE7 */
color:red\9; /* IE6, IE7, IE8, IE9 */
color:red\0; /* IE8, IE9 */
color:red\9\0;/*Only works in IE9*/
}
So you'll end up with
.header-ie .wrapper-ie:after {
position:absolute;
bottom:-33px;
bottom:-250px\9;
width:100%;
height:34px;
content:"";
left:0;
background:url(../shadow-bg.png) no-repeat center;
background:none\9;
background-size:100% auto;
pointer-events:none
}
I stumbled upon a bizarre behavior of IE (11) using the code below (adapted from this answer).
The centered div does not automatically adjust its position when resizing the browser window.
It works fine in Google Chrome (tested with v31 and v34 canary) and Firefox 26.
→ jsFiddle
<div id="outerWrapper">
<div id="innerWrapper">
Helllo World!<br />
Longer text, longer text, longer text.
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy.
</div>
</div>
#outerWrapper {
display:inline-block;
position:relative;
left:50%;
}
#innerWrapper {
position:relative;
left:-50%;
}
My system:
Windows 8.1 Pro 64-bit
IE 11 (I also tested the problem with the IE 7, 8 and 9 modes)
Actually, ive changed your code a wee bit so that it does.
#outerWrapper {
display:inline-block;
position:absolute;
left:50%;
width:300px;
margin-left:-150px;
}
#innerWrapper {
position:relative;
}
this auto centers it no matter what.(and i tested on ie11)
EDIT***
also, you can change the width if youd like. i just added a random smaller width
so i could see it better on my small mbp lol.
Cheers
The difference is actually the default font used by IE and Chrome. If you define the font family and size both browsers render the markup the same. This is why many use a CSS reset, there are subtle differences between each browser's default stylesheet. The reset normalizes every browser for your application so you have a consistent base to work from. JSFiddle does not do this by default.
http://jsfiddle.net/docluv/DcLFz/6/
#outerWrapper {
display:inline-block;
position:relative;
left:50%;
background-color:#990000;
height:200px;
}
#innerWrapper {
position:relative;
left:-50%;
background-color:#009900;
font-family:"arial";
font-size:10pt;
}
Yet again Internet Explorer is costing me time and money.
I'm making a responsive site and I'm needing my images to be no more than 100% width of their containing elements, but also no more than a certain percentage height in case they fall off the page.
Some CSS:
#content{
margin:0 auto;
min-width:320px;
max-width:800px;
width:80%;
background-color:green;
}
#featured{
position:relative;
width:100%;
}
#featured-images{
text-align:center;
}
#featured-images img{
max-height:80%;
height:auto !important; /* IE fix */
height:80%; /* IE fix */
max-width:100%;
width:auto !important; /* IE fix */
width:100%; /* IE fix *
}
Some Markup:
<div id="content">
<div id="featured">
<div id="featured-images">
<img src="lib/imgs/fi-1.jpg"/>
</div>
</div>
</div>
Currently, this page works on Chrome. It even works in IE6, and IE8+. I haven't tested it in Firefox or Opera. But IE 7 definitely doesn't play ball. It seems to shrink the image to quite a small degree, as if the browser has been resized to a stump.
I know it's not ideal, but I've been using IE NetRenderer to test.
Its fixed, you can check it here:
<style type="text/css">
#content {
margin:0 auto;
min-width:320px;
max-width:800px;
width:80%;
background-color:green;
}
#featured {
position:relative;
width:100%;
}
#featured-images {
text-align:center;
}
#featured-images img {
max-height:100%;
max-width:100%;
height:auto;
width:auto;
}
</style>
<div id="content">
<div id="featured">
<div id="featured-images">
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
</div>
</div>
</div>
Or here Fiddle http://jsfiddle.net/Fqebe/1/
Cheers!
Internet Explorer Conditional Comment Style Sheet...
http://www.jabcreations.com/web/css/ieccss
Works without JavaScript enabled.
No need for hacks, if IE requires the wrong values (e.g. height/width) instead of what you use then only the versions of IE you need to apply those pseudo-right values to will work.
That will let you keep all the IE-related nastiness out of your main style sheet and you can use a specific IECCSS per version of IE.
I am trying to put a border around it, but i can't. Here is what i have as far as CSS:
body{ margin:1em; }
body *{ font-family: RussellSquare}
body{background-color: #363636;}
input[type=number]{
font-size:1em;
width:2.5em;
padding:3px;
margin:0;
border-radius:3px;
border: 1px solid #000;
text-align:center;
}
input[type=number]:focus{
outline:none;
}
It works just fine. Try it yourself on different browsers here.
Short explanation would be:
border is CSS property that is supported on all major browsers.
border-radius is CSS3 property that runs on all modern browsers. IE 6/7/8 is not one of them.
In case you want to know more about Internet Explorer support of border-radius
Read: Support for "border-radius" in IE
Below is the CSS style this div is using. The div itself
is nested within a table. Basically IE displays this differently
from FireFox and Chrome. I like the IE rendering better
and it seems more inline with what I am seeing in dreamweaver,
where as firefox and chrome will display the div wider then
it's in IE and dreamweaver for some reason.
I haven't designed anything in a while but it's sad to see
that we still have these rendering differences between browsers,
is this still the case with HTML5/CSS3 ?
.Class420 {
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
color:#000;
line-height:30px;
background-color:#F5F5F5;
width:400px;
text-align:justify;
padding:15px;
float: left;
margin-left: 15px;
height: 300px;
}
is this still the case with HTML5/CSS3 ?
Yes. And it's still Internet Explorer which is holding everyone back.