In laying out a page with absolute positioning, I realized that it rendered differently from browser to browser. I've been looking online about css selectors to see if there was some way to change the positioning based on which browser the user was using, but I haven't been able to find anything very helpful. Any ideas?
That looks like a bad strategy to me... I wouldn't want to switch from absolute to, say, relative or some other kind of positioning based on the kind of browser. They all should implement positioning fairly similar. You'd probably need to add some extra styles to make a particular element behave properly on certain browser, but changing the global positioning method based on browser is not a good idea, IMO.
UPDATE:
On CSS alone, there isn't any standard mechanism to detect a browser. You can use tricks like the one below to detect a particular version of IE, for example:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
or something like:
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
For a more complete list of options see here.
Another alternative is to use jQuery (if it's an option for you) and adjust the element's style using javascript depending on the browser. Something like:
if ( $.browser.msie ) {
$("#div ul li").css( "display","inline" );
} else {
$("#div ul li").css( "display","inline-table" );
}
More examples here.
A word of caution: none of the above methods is infallible. One, for example, can make Firefox identify itself as Internet Explorer.
Related
Is it possible to use different css selector for IE(any version of ie) and chrome? Its a normal top property which appears differently in both browser and needs to explicitly adjusted according to the browser
You cannot do this in CSS alone. You need what are called "conditional comments" like the following:
<!--[if IE 8]>
<p>This is IE 8</p>
<![endif]-->
These are added to your HTML and can be used in many ways. Two primary ways that I have used them are:
To link to a wholly different CSS style sheet
To change the class on the <html> or some other parent tag and use CSS rules to select any children of it
I realize that second description may sound a bit complex but it's actually pretty simple so here's an example:
<!DOCTYPE HTML>
<!--[if IE 8]>
<html lang="en-US" class="ie8">
<![endif]-->
<![if !IE]>
<html lang="en-US">
<![endif]>
...
<body>
<div class="someClass"></div>
</body>
...
Then, in your CSS, use a selector like: .ie8 .someClass
Welcome to the club! Anyways, although you can try to set browser specific css on elements, actually you cannot guarantee that it'll work exactly like you aimed. Because it depends on how those browsers handles these css classes, and there is nothing you can do about that. You may try to set different css classes for IE like this:
<!--[if lt IE 9]>
<html class="ie">
<![endif]-->
<!--[if (!IE) | (IE 9)]><!-->
<html>
<!--<![endif]-->
Notice that these are actually comment lines, but ie reads these lines and set the user-defined css class "ie" to html element (you may notice that Chrome and Firefox ignores these statements). you can then use this css, for example;
html.ie div{
top: 0;
}
It's really annoying to deal with these cross-browser ie bs, I know. hope this helps
What you want to achieve?
If you want to compensate browsers all differences you can use for eg. modernizr
If you want to add special css file for IE you can use Conditional comments They look like this:
< !--[if IE 9]>
< link rel="stylesheet" type="text/css" th:href="ie9.csss"/>
< ![endif]-->"
If you want to fix something in css selector you can use hack(HACK! means not recommended, avoid but if you really have to and you have gun next to your head etc...) which will make properties or css class understandable only for specific browser (google this there is to many of them) eg. http://code.tutsplus.com/tutorials/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters--net-10575
And last option learn CSS and find where you made mistake because probably some element is diffrent size and that caused 1-2 px difference with position top
I have a weird issue where IE8 doesn't appear to render my background image using imported CSS.
Because of IE8's problematic issues and its lack to support many CSS3 elements, I am forced to use conditional logic to load specific stylesheets for my site content. I am using MVC4 and my _Layout page has the following in the header:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<link href="#Url.Content("~/Content/DeprecatedSite.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if gt IE 8]>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<style type="text/css">
.gradient {
filter:none;
}
</style>
<![endif]-->
In my deprecated.css file I have the following:
#main {
background:url('/Images/iecollage.png');
background-repeat:no-repeat;
width:100px;
}
In my site.css, I have this comparable code for the same ID tag:
#main {
background:url('/Images/collage.png');
background-repeat:no-repeat;
background-size:920px;
width:100px;
}
I had to use 2 differently sized images and attribute definitions to correct the way the browsers interpreted the Markup. I am comparing the results using IE8 and Chrome.
When I launch the site, the home pages reflect the appropriate corresponding images and renders everything as expected.
My problem occurs when I navigate to another page which resides outside the Home directory (if that really makes any difference with respect to the issue).
The page has the following in-line code:
<div id="spotlight" style="position:relative;left:-50px; top:2px; height:820px;margin: 0;width:650px;">
In my Site.css file I have the ID styled as such:
#spotlight {
background:url('/Images/orange_spotlights3.jpg');
background-repeat:no-repeat;
-khtml-opacity:.60;
-moz-opacity:.60;
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
opacity:.60;
width:100px;
}
In the Deprecated.css the style is:
#spotlight {
background:url('/Images/orange_spotlights3.jpg') no-repeat;
}
In Chrome, the style gets loaded from the imported stylesheet. But in IE8 I get a blank area where the image should be loaded.
The quirky behavior I noted is that if I were to remove the following lines from the Site.css file, then both Chrome and IE8 will render the image but I loose the transparency effect in Chrome which is not the intent of separating the ID's to different stylesheets.
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
opacity:.60;
Its as if the 2 stylesheets are confusing the browsers or something.
Any explanation would be greatly appreciated.
As it stands, I am thinking of simply scrapping any support at all for IE8 because its getting to be too much of a bother trying to create 2 different accomodations to render the elements.
If you're using MVC it may be a problem with the absolute path which is kind of what it sounds like is happening. (Try pulling up your developer tools in Chrome or FF and check out the console while doing a page reload see if you get a 404 on the image GET request)
You can try something like ../../Images/orange_spotlights3.jpg where each ../ is one folder level up. You could also look at using a helper like #Url.Content("/images/orange_spotlight3.jpg") or try the absolute path all together.
Ok, after doing some blundering with the stylesheets I managed to get both to play together. What I ended up doing was retaining the comments for all the previously mentioned lines in the
Chrome stylesheet except for opacity:.60
So my stylesheet that will be used to support all other browsers other than IE8 now looks like this:
#spotlight {
background:url('/Images/orange_spotlights3.jpg');
background-repeat:no-repeat;
opacity:.60;
width:100px;
}
The other stylesheet for IE8 remained as is and both pages render the image appropriately according to their assigned stylesheets.
Apparently the following attributes don't work well in IE8 and can obviously cause problems:
-khtml-opacity:.60;
-moz-opacity:.60;
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
I have tested this using Firefox, Chrome and IE8. I have not seen if there are issues with any other browsers but I would imagine this should work with Safari as well.
What I still have no explanation for is why those elements affected IE8 browser when they clearly did not exist in its assigned stylesheet.
In the next revision of this site, I will definitely drop support for IE8 altogether. As much as I'd like to make it available to users having out-dated versions of IE 8 and earlier, its just added labor to try to keep up a dead horse. :-)
I've read so many articles about IE issues about css.
I am about to use this conditional comments:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
But, where in the world can I get the "all-ie-only.css" ?
Or what is inside it?
Thanks in advance!
That CSS file will only exist if you create it. The point of IE Conditional comments is to execute code only in IE, while it's ignored by other browsers. You can also specify specific versions of IE to target with your conditional comments as explained here.
For a simpler solution, consider the html tag classes as explained in Paul Irish's blog post, and then you can target specific versions of IE in your regular stylesheet by prepending your rules with the appropriate classes, e.g.:
.ie .component-name p {
position: static;
}
I know this is not an uncommon problem, but my layout that works in all other browsers blows up completely in IE (8 and 9).
I don't know if protocol is to post all the code here or just a link...
it is: www.megadyne.com/safezone/index.php
I think the relevant part is that I have a container div which is position:relative and then a bunch of divs inside that are position:absolute and the inner divs are being pushed out in IE.
There are lots of other problems with the layout—only in IE, but hopefully they are related?
Thanks in advance!
Brian
Take a look at the css for http://html5boilerplate.com/ it does a pretty good job standardizing all the css for browsers before you put in your code. Try using their css and putting #inline your css into their css where it asks for your custom css, and see if that fixes the issue.
if that doesn't work you can have a separate css file for IE with the HTML5 code
//If browser is IE version 8 or greater
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
Turns out there was something wrong with my declaration. Fixed that and all is right with the world again.
I need an IE9 CSS hack to be able to set the background-position property differently for IE9.
I have tried with several different ones that didn't work and from what I read somewhere, the background property is not possible to "hack" at least the same way as the other.
I basically need this to only apply to IE9:
#ABB_ABContent .subnav li.selected { background-position: center 17px; }
Any suggestions?
If you can't find anything else, there's always conditional comments:
<!--[if IE 9]>
IE9-specific code goes here
<![endif]-->
This would have to live in your HTML code, rather than your stylesheet, but you could use it to include an additional CSS file for IE9.
Alternatively, you may want to look up the Modernizr library. This is a small Javascript tool which you add to your site, which detects what features your browser supports, and allows you to write your CSS to target specific features (or their absence). If there's something about IE9 that it doesn't support which you're trying to work around, this may be the best solution.
I'm still puzzled as to what problem you're trying to solve though.
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="your path" />
<![endif]-->