I´m working on a web application, now the css is working perfectly with Opera, Chrome, Firefox and Safari. I just have some specific problems with IE8 and IE9.
My doubt is, what is the best choice, write an exclusive css for IE or just incorporate specific lines for IE?
This works with Chrome, Firefox, Safari and Opera:
#table{
width: 60%;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
}
Code for explorer:
#table{
width: 60%;
margin-top: 60px;
margin-left: 20%;
margin-right: auto;
}
I´m looking for the fastest choice on load.
Thanks in advance.
I find it easiest to isolate the tweaks into an IE-specific stylesheet, and then use conditional comments (which only IE understands anyway) to load them after the normal CSS.
Here's an example from one project of mine (an ASP.NET MVC2 project):
<!--[if lte IE8]>
<link rel="stylesheet" type="text/css" href="<%: Url.Content("~/content/ie-fix.css") %>" />
<![endif]-->
Related
i have a website with productpages and just found out that it looks really different between chrome and Internet explorer. Example page:
Website
In IE the images are really large. Now if i change CSS it will also change on chrome where it looks like how i want it.
Thanks for your time,
Sjoerd
you need to set max-width on the image. But use pixels, not percentage!
.thumbnail.alignleft > img {
width: 100%;
max-width: 116px;
}
I believe that you can set a CSS for IE only
<!--[if IE]>
<link rel="stylesheet" href="ieCSS.css" />
<![endif]-->
Also refer to this link How to target only IE (any version) within a stylesheet?
I used
.thumbnail.alignleft > img {
width: 100%;
max-width: 116px;
}
Not sure why someone downvoted my question for no reason but for the people that are here on this site to actually help people thanks!
It's on a simple asp.net web project. There's a Styles folder in the project and in that folder are four css files all pretty simple. Main.css has this:
body {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 85%;
width: 700px;
height: 900px;
margin: 0px auto 0px auto;
padding: 10px;
border: 2px;
background-color: green;
}
The green (it was originally white) shows up in IE but not in Chrome. I reference the css files in the ASPX file:
<link href="Styles/CheckOut.css" rel="Stylesheet" type="text/css"/>
<link href="Styles/Main.css" rel="Stylesheet" type="text/css" />
The green was only one test. I made other changes to the css files and none showed up in Chrome. Aside from the css issue, the app performs fine in Chrome as well as IE.
The Page Inspector reflects the css files; but Chrome does not. There are a couple of similar seeming questions here but none address my issue, AFAIK.
When you refresh the page in Chrome, do you have dev tools open? And if you do, do you have "Disable cache (while DevTools is open)" checked? I've found that Chrome is pretty aggressive about caching stuff, so if you're not seeing your changes this might be something to look into. (You can verify if that checkbox is marked by hitting F12 on Windows or option-command-I on Mac, and clicking on the widget wheel. It's the first checkbox under "General".)
I feel so stupid, like I'm missing something really obvious but I have checked everything a bunch and can't figure out what's wrong. I'm trying to use CSS3pie to make rounded corners in ie8, but it just won't take.
I have the path set up relative to the html document, not the css. It's in a folder called pie, so this is what i'm using in the CSS:
#recommended-acc {
float: left;
width: 472px;
background: url(../img/cont_bg.png) repeat;
margin: 10px;
padding: 0 10px 6px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
behavior: url(pie/PIE.htc);
border-radius: 5px;
border: 1px #d8d8d8 solid;
}
Does anyone know more about css3 pie who could maybe advise me on what I'm missing? I've tried it on a ton of different elements and it hasn't worked once.
A few things to try:
Use a leading forward slash in your path:
behavior: url(/pie/PIE.htc);
This will make sure the path is correct in case you are on a page with more than one URI segment, like http://example.com/pages/archives/mypage.html. WIthout the leading forward slash, it would be relative from mypage.html and not the root directory (which it should be).
Try to force hasLayout (obscure IE thing) by adding position:relative; or zoom:1 to the element. This is often the issue, the HTC file is referenced correctly but the styles won't apply without it.
Read the known issues page carefully and make sure you aren't experiencing any of the other multitude of common problems.
I too had these problem in my earlier days.
You've to keep the pie.htc file generally in the root of the project folder.
I know the following solution is a little weird but you could try it
Try adding an alert or console in the pie.htc file and place the file in each folder until it gets rendered.
HOW to make sure your HTC file loads..
put below <script type="text/javascript"> alert("test");
this alerts test when the file loads
put in the complete url in your css file behavior: url("http://www.yourwebsite.com/test/PIE.htc");
WHen you load the page an alert shows up :)
this means you are sure the file loads :)
now shorten the behavior: url("relative to the CSS-FILE/PIE.htc"); and make sure you still get the alert
remove the alert =)
You are now 100% sure it is using the HTC file
I struggled with this, All I can suggest is try this.
Use the Javascript version with jQuery
<!--[if lt IE 9]>
<script type="text/javascript" src="js/PIE_IE678.js"></script>
<![endif]-->
<!--[if IE 9]>
<script type="text/javascript" src="js/PIE_IE9.js"></script>
<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css"/>
<script>
$(function() {
if (window.PIE) {
$('.Circle').each(function() {
PIE.attach(this);
// alert("Attached");
});
}
});
</script>
<![endif]-->
Now in your CSS, with the .Circle class or any class which is using the CSS 3, give them:
zoom: 1;
position: relative;
One other note I have found when using jQuery & the migrate plugin - some are "finicky" these work.
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
With luck, that will do the trick.
Guys i found the problem you where looking for.
First of all I used 2 different web host. 1 of my own and 1 of the company.
I made my full css3 responsive webdesign hand coded on my own website.. which I needed the PIE.htc file to get the rounded corners working for all IE versions and I succeeded!.
However when I uploaded the same files to the web host of my company it didn't work anymore.
And it turns out that they doesn't support .htc files.
So I scratched my head and didn't get it right either, but then I discovered that this provider will work with the PIE.php file.
So if for you this doesn't work;
.bg {
border-radius:60px;
width: 80%;
height: 85%;
position: fixed;
top: 10.2%;
left: 18%;
z-index: 1;
border:3px solid #fff;
background:#fff;
behavior: url(pie/PIE.htc);
Than this does;
.bg {
border-radius:60px;
width: 80%;
height: 85%;
position: fixed;
top: 10.2%;
left: 18%;
z-index: 1;
border:3px solid #fff;
background:#fff;
behavior: url(pie/PIE.php);
Just change the PIE.htc to PIE.php and it will work.
I have a stylesheet that contains 10 selector definitions. When I view my website in IE and Chrome (I'm not including FF because it renders exactly like the way it does in Chrome), nine of the ten selector definitions work consistently across all browsers.
The one that doesn't work is defined as such:
a.dp-choose-date
{
/* border: 1px solid red; */
float: right;
width: 25px;
height: 25px;
padding-top: 5px;
padding-left: 16px;
position: relative; /* This is only needed for IE */
top: -25px; /* This is only needed for IE */
margin: 0px;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(../images/calendar3.png) no-repeat;
}
As you can see, there are only two values that are necessary for IE. So I did some research on conditional CSS. I have now taken my style sheet and create a duplicate with the two additional entries for IE.
At the top of my document, I now have the following:
<!--[if IE]>
<link href="Styles/custom.css" rel="stylesheet" type="text/css" />
<![endif]-->
<![if !IE]>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<![endif]>
which is working, but can't I do the conditional statement at the selector level?
I also tried this in the CSS document which also didn't work.
[if IE] a.dp-choose-date {
/* definitions here */
}
Does anyone have any suggestions?
One way to do this is:
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<!--[if IE]> <link href="Styles/custom.css" rel="stylesheet" type="text/css" />
Notice than I do not have a conditional around the first style sheet.
Within the second style sheet just define the tag as:
a.dp-choose-date {
position: relative; /* This is only needed for IE */
top: -25px; /* This is only needed for IE */
}
Due to the way style sheets work, the browser will combine and apply both definitions.
You can make things easier on yourself by adding classes to target IE, and a nice way to do this is to wrap your opening html tag in conditionals like so:
<!--[if lt IE 7]><html lang="en" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="ie8"><![endif]-->
<!--[if !IE]><!--><html lang="en"><!--<![endif]-->
This allows you to prefix your IE only selector with the version of IE you want to target:
a.dp-choose-date
{
/* border: 1px solid red; */
float: right;
width: 25px;
height: 25px;
padding-top: 5px;
padding-left: 16px;
margin: 0px;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(../images/calendar3.png) no-repeat;
}
.ie6 a.dp-choose-date
{
position: relative;
top: -25px;
}
Using IE's if conditionals at the HTML level is probably the best way to fix kinks that IE (usually < 9) has. Conditional comments do not exist at the CSS level. You can also (if you wish) use CSS hacks, but that probably isn't the best solution, as later versions of IE may not necessarily allow those hacks, but may still have the same CSS issues.
By the way, your second if conditional should be written as the following for validation purposes:
<!--[if !IE]>-->
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->
The easiest way to implement this logic:
[if IE] a.dp-choose-date {
/* definitions here */
}
is to use IE's conditional comments to write out unique body tags:
http://www.positioniseverything.net/articles/cc-plus.html
So you can end up with something like this:
<body class="ie7">
Then, in your CSS, when you need to over-ride one style, you can do this:
.myStyle {--style for good browsers--}
.ie7 .myStyle {over-ride for IE7}
The benefits of this:
only one CSS file needs to be loaded (saving server requests)
your CSS remains valid (no ugly CSS hacks)
your over-ride styles stay with your good styles, so much easier to maintain
Ok, I am currently directing my style sheets as listed below:
<link href="Styles/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />
<link href="Styles/Site.css" rel="stylesheet" type="text/css" media="screen"/>
On the Site.css I have a certain ID with a background-image:
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
background: url('../images/topbackground.gif') no-repeat;
}
On the mobile.css I thought I could simply change it to "none" or another image, somewhat similar to this (I've tried several variations at this point):
#container {
width: 100%;
margin-left: 0;
margin-right: 0;
background: #ffffff none;
z-index: 30;
}
However, it doesn't seem to be working. The background still shows on the mobile version of the site. I've been looking at it in both Opera Mini and the Android SDK Emulator. The mobile version of the site is picking up all other properties from mobile.css, just not background-image changes.
I know it's got to be something obvious at this point that I am just oblivious to. Any help would be appreciated.
this is because you load mobile.css before you load Site.css. (in the example you have made).
I thinks its working if you juste insert site first then mobile.css ..
If you need to keep it that way for some reason you gonna need to use !important afters the statement.
Here you can find a working example:
http://jsfiddle.net/2EaQb/