I'm using the art sexy lightbox for my pictures presentation and also for html content in joomla. I'm using the Chrome and it works fine and displays everything as it should. The problem starts when i switch to ie8.
When i click on the image to xpand in the lightbox the image displays in the center of the page while the thole frame of the picture is on the left of the image.
I've tried playing with the artsexylightbox css file but couldnt get it to work in both browsers.
does anyone can say why is the difference? I suspect that the browsers treat the absolute,relative orders differently.
please help:(
You could tr to target WEbkit broswers only in your CSS to separate the behaviours of IE and Chrome (Safari ius a webkit browser too).
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit-specific CSS here (Chrome and Safari)*/
#artsexylightbox {
properties here
}
}
Or you could use Conditional Comments to set up a new CSS stlyesheet for IE:
<!--[if lt IE 9]>
<link href="path-to-file/IE.css" rel="Stylesheet" type="text/css"/>
<![endif]-->
Then use setup the properties that work for IE in the IE CSS, and the properties that work for Chrome/Safari in the normal CSS.
Note that even between FF and Chrome, there are a few differences in how they interpret CSS.
Hope that helps :)
Related
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 am wanting to use a separate CSS sheet on my web-page for Chrome & Safari, than the one used for all other borwser types. I have previously used conditional comments when doing this for IE, such as:
<!--[if !IE]><link rel="stylesheet" type="text/css" href="style.css"><!--<![endif]-->
<!--[if IE]><link rel="stylesheet" type="text/css" href="style2.css"><![endif]-->
but I am wanting the above to work for Chrome & Safari instead. Is this possible?
Conditional comments only work in IE.
This is a creative way to address this problem. I learned it from here
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* CSS Statements that only apply on webkit-based browsers (Chrome, Safari, etc.) */
}
Mozilla has a vendor specific one as well.
#media screen and (min--moz-device-pixel-ratio:0) {
/* Firefox browser based CSS goes here */
}
Im using a rockettheme template and have edited some of the css code using a custom css file.
I have managed to get it how I want it to look on Firefox and Chrome however IE looks werid. the navigation is too low (the buttons) and the header is also too low.
The website link is found below.
http://www.colmanprint.co.nz/rfloorings/
as you can see on the link the menubar is down too low and the header.
at the moment im using a css code edit .rt-menubar {padding: 0px !important; margin-left:210px;} when i remove the margin-left:210px; it fixes my problem but then the menu goes behind the logo on chrome and firefox.
so i pretty much need to keep the margin-left:210px for chrome and firefox but have margin-left:0px for internet explorer
any ideas would be great!
For versions of Internet Explorer up to IE9, you could use conditional comments to differentiate between IE and other browsers.
Here's a quick example:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie9-and-below.css" />
<![endif]-->
Then in ie9-and-below.css you could apply a style such as:
#ieParagraph.rt-menubar {
margin-left:0px;
}
Where your HTML could look like so:
<div class="rt-menubar" id="ieParagraph">
<ul>Other stuff here...</ul>
</div>
If no styling was applied in your other stylesheets to #ieParagraph where the class was also .rt-menubar , this would only change the left margin of the #ieParagraph div to 0px in IE9 and under only.
For IE10, conditional comments have been removed - look into using Modernizr for feature detection.
My page is at http://jerswebempire.com/ovrtur/index.php
The page displays nearly perfectly in all browsers except IE8. In IE8, floated divs have incorrect margins. For example, you'll see the search bar at the top is sitting underneath the nav. However, if you open the page in Chrome or Firefox or IE9, it's displaying in the correct spot.
What am I doing wrong?! I can't seem to find a fix.
Also, the box for Latest Video is in two columns in all browsers but IE8. It's similar to the above problem where there is a left margin added that shouldn't be there.
The page was built with Bootstrap.
Any help would be appreciated.
Use ie conditionals between your index
<html> </html>
add a class to for the 'ie 8 only' margins like the html boilerplate does.
Load a custom ie 8 only stylesheet and play with the margin problem there like this:
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie8-only.css" /> <![endif]-->
Or load a class where you need it.
<!--[if IE 8]><html class="ie8 lt-ie9"> <![endif]-->
Apply the ie conditional class to whatever you need.
<div class="floatedDiv ie8"
CSS
.ie8 { margin:0px; }
I can't debug on ie8 but I searched and found that there is in fact a negative margin bug on ie7/8.
They recommend using
zoom:1, position: relative
as a workaround.
I literally have to type in
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
to get my css hack to work for ie8. And yet when I click the 'abouts' tab in my IE browser, it clearly says IE8 version 8.0.6001. 18702.
I already reinstalled IE8 because I thought this issue was wierd but I still have to use the IE7 hack in order to get my IE8 only css to appear in my IE8 browser.
Is there something I can do to fix this? I have to talk to other developers and it is somewhat annoying not knowing exactly which IE version I have.
It looks like your IE8 is running in Compatibility View, which causes it to render pages like IE7, including reading IE7 conditional comments.
Look for the button in your toolbar that looks like a torn page, click on that, and it should disable it and return you to IE8 rendering mode.