I'm using the following css :
.GridDraggedRow tr td.firstCol{
padding: 2px 10px 0 0;
text-align: right;
vertical-align: top;
width: 1px;
width: 1%\9; /* IE9 and below */
white-space: nowrap;
}
As you can see, I'm using a pretty ugly css hack.
My problem is that this hack is removed from the minified css file I'm generating with AjaxMin.
It is a post-build step in our delivery system so we're gonna stick with AjaxMin.
The ajaxmin documentation explains that several comment-based hacks are allowed with the use of the 'hacks' flag, ex:
ajaxmin -css -comments:hacks GridLayout.css
Unfortunately the \9 hack is not allowed.
What can I do ?
Parsing the generated file isn't a good idea in my opinion.
I guess my best choice is to insert this hack in another non-minified file or directly in the html page between tags...
Do you guys have a better idea ? It would be great that ajaxmin provide an exclusion section...
You shouldn't be using any of those ugly hacks!!
Use Paul Irish's conditional comments method instead.
Use this at the opening of your HTML tag:
<!--[if lt IE 10 ]> <html class="lt-ie10"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
Then, in your CSS, use this:
.GridDraggedRow tr td.firstCol{
padding: 2px 10px 0 0;
text-align: right;
vertical-align: top;
width: 1px;
white-space: nowrap;
}
.lt-ie9 .GridDraggedRow tr td.firstCol{
width: 1%;
}
This is much cleaner, and much more reliable.
Related
I am trying to use text-overflow: ellipsis to truncate text on my website. It displays correctly in Firefox, but does not display in IE; I have included my code and examples of how it displays in both Firefox and IE below:
.ellipsis {
font-weight: bold;
height: 1.2em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 150px;
}
text-overflow has been available as of IE6, so you do not need to use a Microsoft vendor prefix. You might, however need those extensions for Opera and Webkit depending on what your site plans to support.
What version of Internet Explorer are you testing this in?
You can obviously use jQuery plugin for this same functionality fairly easily, but you shouldn't need to if IE is your only issue because, as stated, it should support the feature.
Here is a simple reproduction of code that should work using this functionality:
<!DOCTYPE html>
<html>
<head>
<title>text-overflow: ellipsis</title>
<style type="text/css">
.ellipsis {
height: 1.2em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 150px;
}
</style>
</head>
<body>
<div class="ellipsis">
This is a test of the less-than-emergency
broadcast system. This is only a test.
</div>
</body>
</html>
I found the solution, because I use a tag to wrap the div tag so IE work not well.
I moved a tag to inside div tag and it work well. Thank everyone for helping me.
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.
Maybe I misunderstand how CSS Conditional Comments work, but I thought the bit in the middle of the conditional would only show up for IE... however Chrome and Firefox are both evaluating it, and having the left margin be 35px not -20px... What am I missing?
.policies li li { margin-left: -20px; }
<!--[if IE]>
.policies li { margin-left: 45px; }
.policies li li { margin-left: 35px; }
<![endif]-->
Conditional comments only work in HTML, not CSS. A common technique is to load a separate external stylesheet just for IE. Lately I've taken to just loading a single one for IE <= 8 and then using hacks inside that stylesheet to target IE 6 / 7 / 8 respectively.
Put
.policies li { margin-left: 45px; }
.policies li li { margin-left: 35px; }
into separate file like styles-ie.css, then include it in your page after all common CSS files and wrap in a conditional comment:
<!--[if IE]>
<link to your styles-ie.css />
<![endif]-->
Here is a Microsoft's reference.
I have a problem getting the fonts in links for a menu to look the same across browsers. It wouldn't be such a problem if it was just a small difference, but the fact of the matter is that in IE 9 the font looks to be at least a couple of pixels or more bigger than in the others, while using the exact same css.
Now being in a main menu, this looks pretty bad. Anyone know why this happens, and what I can do about it?
Here's the css rule:
ul#menu li a
{
width: 80%;
text-align: center;
font-family: HelveticaNeueLight, Helvetica, Arial, Sans-Serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
line-height: 38px;
color: #333;
text-shadow: 0px 1px 0px #e5e5ee;
display: block;
/*Hiding dots around clicking on links*/
outline: none;
overflow: hidden;
}
If this is truly vital, and you do not mind using Conditional Comments to send IE-targeted CSS to the browser, you can create a Conditional Comment stylesheet for IE 9 like so:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="/ie9.css" />
<![endif]-->
With another CSS rule for the font-size property in this css file.
Otherwise, a good first step is to always use a CSS Reset to normalize between browsers. Commonly used resets are Eric Meyers and YUI.
Perhaps the CSS for some other property is inconsistent? I'd try using a CSS reset file (http://developer.yahoo.com/yui/reset/) or adding zoom: 100% in there to see if that fixes it.
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