I just started using Compass' sprite generator a few days ago and realized that my sprites are not showing up in IE8. I think that I traced my problem back to this previously reported issue: compass sprite is not working in ie8 and ie7
Santosh points out that IE8 breaks when pseudo classes like :not are used.
I can see that my selector is probably breaking because Compass is including the :checked and :before pseudo classes in the selector (from icons/global/*.png):
input[type="checkbox"]:checked + .btn-checkbox:before,
input[type="checkbox"].checked + .btn-checkbox:before,
input[type="radio"]:checked + .btn-checkbox:before,
input[type="radio"].checked + .btn-checkbox:before,
.segmented-checkbox .btn- checkbox.selected:before
{
background: url(/assets/rp-icons/global-s67c66a3554.png) no-repeat;
}
My question is how do I change the automatically generated selector or split it up so that the whole thing doesn't break in IE8?
This issue was also mentioned here, but the solution is not clear:
https://github.com/chriseppstein/compass/issues/1193
The problem is:
IE8 can't understand :checked, thus making the entire declaration invalid.
You have two options:
#1 Make the sprite twice
First use conditional comment to add the class .ie to html or body
<!--[if lt IE 9]> <html class="ie"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
First line is 'lower than IE 9', so IE8 or below get class ie. The second is 'greater than IE8' so IE9+ and other browsers (note the <!-->).
So now split your sprite in two, one for :checked and another to .checked, importing twice, so the final css is:
/*this will be invalid for IE<8, valid for all others*/
input[type="checkbox"]:checked + .btn-checkbox:before,
input[type="radio"]:checked + .btn-checkbox:before,
.segmented-checkbox .btn-checkbox.selected:before
{
background: url(/assets/rp-icons/global-{hash}.png) no-repeat;
}
/*this would be valid for everyone, but since we added .ie, just IE will apply*/
.ie input[type="checkbox"].checked + .btn-checkbox:before,
.ie input[type="radio"].checked + .btn-checkbox:before,
.ie .segmented-checkbox .btn-checkbox.selected:before
{
background: url(/assets/rp-icons/global-{hash}.png) no-repeat;
}
Then create a handler with javascript that when the input is clicked, if it is checked you add checked class;
#2 Try see if a polyfill will fix for you:
You can try http://selectivizr.com/, it have polyfill for :checked on all supported frameworks! so it will make IE8 accept your :checked. Read 'You need to know' at the end of page to know its limitations
Related
I'm trying to use tween max and superscroll script, to handle opacity of my content while scrolling.
This works like a charm in chrome, safari, ff, ie9 and ie10.
However, I have an issue with ie8.
You can see the problem in this page : http://www.promenade-sainte-catherine.com/localisation
When scrolling down in ie8, the menu on the left changes its color to become white. This is okay, and once the animation is finished, it becomes green again.
This is my css :
body #menuGaucheContainer #menuGauche .logoPSC {
position: relative; zoom:1;}
/* line 270, sass/partial/_global.scss */
body #menuGaucheContainer #menuGauche .logoPSC #log1, body #menuGaucheContainer #menuGauche .logoPSC #log2 {
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
position: absolute;
top: -109px;
left: 75px; }
And this is the tweenmax call
controller.addTween('#aucoeurducentrevilleContainer',
TweenMax.fromTo(jQuery('#img2Localisation'), 1,
{css:{opacity:0}},
{css:{opacity:1}}),
200);
controller.addTween('#aucoeurducentrevilleContainer',
TweenMax.fromTo(jQuery('#log2'), 1,
{css:{opacity:0}},
{css:{opacity:1}}),
200);
If I remove the "filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);" line. Then it works good, but nothing have an opacity of zero at the beginning of the page.
If I add css:{opacity:X, alpha:X}, nothing changes,
If I change {css:{opacity:0}} to {css:{alpha:0}}, it kind of works, but I still have some issues.
Does anyone have any idea ?
Thanks
I also had this issue with a new version of Greensock, and it's not because the plugin, but because of CSS. The error is in the beginning statement:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
While this is perfectly ok if you don't want to support IE7, it will break TweenMax's animation rules. The fix is to add the IE5-IE7 css rule, even if you won't support IE7 in general:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
It looks like you're using a VERY old version of the GreenSock files (TweenMax). You should definitely update - that may fix the problem right there. http://www.greensock.com/?download=GSAP-JS Otherwise, try tweening to opacity:0.99 instead of 1 solves things for you. But again, I'm pretty sure that updating will help because if my memory serves correctly, this particular scenario had a workaround applied in a TweenMax update a while back.
I have a question. So in a mixing I am making a reference to the parent selector "&". This works as long as the mixin is not nested. Is there a way to to detect if the mixing is being used in a non nested scenario, or to check if "&" is null?
This works when the mixin call is not nested
=myresponsiveMixin($media)
#if $media == small {
#media only screen and (max-width: $break-small)
#content
#else if $media == medium
#media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1)
#content
This works great when the mixin call is nested, but will not resolve '&' when not nested
=myresponsiveMixin($media)
#if $media == small {
#media only screen and (max-width: $break-small)
.classInHTMLToAllowMediaQueries &
#content
#else if $media == medium
#media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1)
.classInHTMLToAllowMediaQueries &
#content
So the question is, if there is a way to be able to check the value of parent selector "&", so I can cover all bases in a single mixin?
#mixin does-parent-exist {
#if & {
.exists & {
color: red;
}
} #else {
.doesnt-exist {
color: red;
}
}
}
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-script
You're trying a wrong solution to solve your issue.
Have a look at how this problem is addressed in powerful SASS frameworks. Let's take Susy by Eric Meyer as a great example.
Let's imagine you've got the following HTML:
<div class="container">
<div class="parent">
<div class="child">
Bla bla
</div>
</div>
</div>
When you call a mixin for the first time, you're doing it simply (the code is in the indented .sass syntax):
$total-columns: 8 // Declaring a varible that will be used by the mixin
.parent
+span-columns(4) // Span four of eight columns
But when you call that for a child element, the proportions would be crooked, because the parent is already proportioned:
.child
+span-columns(2) // This will fail. You want 2 of 8 columns,
// but due to nesting the math is crooked.
// It will be "2 of (4 of 8)".
To address the issue, you provide an optional argument: a context that is used to do the math:
.child
+span-columns(2, 4) // Now the mixin will take 2 parts of 4
// instead of 2 parts of four
The source code for this mixin is available on GitHub.
In short, it creates an optional argument like this (the code is in the CSS-like .scss syntax):
#mixin span-columns(
$columns,
$context: $total-columns
//...
) {
//...
width: columns($cols, $context /*...*/);
//...
}
See how $context has a default value? Thanks to the default value this argument can be omitted. In other words, $context is an optional argument.
When calling this mixin, if $context is not provided (e. g. span-columns(2)), then it is set equal to $total-columns. The $total-columns variable should be set prior to calling the mixin for the first time (see my example above).
Then the two arguments are used to calculate the width.
UPD 2013-03-30
I am not trying to figure out things in regards to columns... I have modifier my question to make it clearer.
First of all, my recommendation concerns not only grid columns. It's a universal technique you can adopt.
Secondly, now i see that you're trying to nest media queries.
Well, some media queries of different type can be combined in CSS3: e. g. print and width. But you can't put a min-width: 601px inside max-width: 600px, this just won't work!
There's an extensive answer here on StackOverflow describing why you should not nest media queries of the same type: https://stackoverflow.com/a/11747166/901944
Thirdly, you're trying to invent the wheel. There's already a fantastic mixin for crunching media queries: Respond To by Snugug. It's super easy to use and very effective.
Fourthly, the XY thing. Instead of asking about your crooked mixin, please describe the problem that you're trying to solve with it! Show us the actual HTML and explain what behavior you would like to achieve.
We will show you that it can be solved with a simple, elegant, semantic solution that does not require SASS hacking.
Trying to conform to unitless line heights I have a problem with overflow: auto and anchor elements.
Consider the following simple page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>test</title>
</head>
<body style="font-family: arial; font-size: 12px; line-height: 1;">
<div id="wrapper" style="overflow: auto; background-color: #FFCCCC;">
<p>Blah blah blah</p>
Test
</div>
</body>
</html>
The combination of font-size: 12px and line-height: 1 should make the height of the paragraph and anchor (without padding, margin and border) 12 pixels.
The total height of the page should therefore be: 4 * 12 = 48 pixels (2 elements plus 2 * 12 pixels margin for the paragraph). However, almost every browser 'reserves' two or three extra pixels for underlining the anchor (even though I used text-decoration: none). Firefox 7, Chrome 14 and Opera 11.51 all show this behaviour, surprisingly IE9 works fine :).
With their respective developer toolbars, you can see that all browsers agree that the div element has a height of 48 pixels, but only IE thinks the anchors height is 12 pixels. Other browsers say 14 or 15 pixels, causing the scrollbar to appear.
When removing the overflow: auto is not an option (in my case the div is generated by a framework and sometimes just contains floating elements, so the overflow is used to extend the div to encapsulate its children), is there any proper solution to this? i.e. better than giving the anchor font-size: 15px or line-height: 1.2 or something.
Cheers,
Moolie
The issue only seems to happen if the a is touching the bottom of #wrapper directly. This means you can solve the problem in 3 ways:
put the link into a paragraph
set display block on the link and give it a margin
set a padding bottom on the wrapper
You'll have to decide if you find these more "clean".
When the user clicks on on area of an image I want to trigger and ajax request to the server. Is there an easy way to implement this a-la Rails 3 UJS? Something similar to link_to ..., :remote=>true?
I have tried to the following code:
#post_bar
=image_tag 'post_bar_270x57.png', :usemap=>'#add_post'
%map{:name=>"add_post"}
%area{:shape=>"rect", :coords=>"40,4,86,50", :href=>new_message_path, :'data-remote'=>'true', :title=>"Message"}
but the added data-remote attributes does not work.
Thanks for any help.
After trying several things I concluded the easiest way is to to have an HTML anchor element on top of the png with that I can simply use the link_to helper with :remote=>true.
It took me less than 10 minutes to get the all thing working.
Edit: here is the code form my haml file (in production I removed the map element)
#post_bar
=image_tag 'post_bar_270x57.png', :usemap=>'#add_post'
%map{:name=>"add_post"}
%area{:shape=>"rect", :coords=>"40,4,86,50", :href=>new_message_path, :title=>"Message"}
%area{:shape=>"rect", :coords=>"100,4,146,50", :href=>new_message_path, :title=>"Reminder(140 chars)"}
#post_message_link
=link_to "", new_message_path, :remote=>true
and the css
#post_message_link a{
position: absolute;
top: 0px;
left: 40px;
width: 45px;
height: 50px;
display: block;
z-index: 100;
}
In the jquery-rails gem (path found with 'bundle show jquery-rails') there is a javascript file for jquery-ujs under vendor/assets/javascripts.
On line 51 you can see the following:
// Link elements bound by jquery-ujs
linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote], a[data-disable-with]'
I found adding the area tag to this line allows you to use UJS in the same way as you do for normal links, etc.
Ideally, you would make the code a bit better by adding another variable, but since this is just a hack I added it to the existing variables.
// Link elements bound by jquery-ujs
linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote], a[data-disable-with]', 'area[data-confirm]', 'area[data-method]', 'area[data-remote]',
Can you guys please let me know what is the best way to disable the horiontal scroll bar?
I have div with width: 100% and height :280px. When we have long continuous text (without any spaces), we are getting a horizontal scrollbar displayed.
Btw I am using jscrollPane.
Any suggestions would be appreciated.
What I have found in jScrollPane - settings object documentation:
contentWidth - int (default undefined)
The width of the content of the scroll pane. The default value of
undefined will allow jScrollPane to calculate the width of it's
content. However, in some cases you will want to disable this (e.g. to
prevent horizontal scrolling or where the calculation of the size of
the content doesn't return reliable results)
So to get rid of horizontal bars, just set content width lower than the container width.
Example:
$('#element').jScrollPane({
contentWidth: '0px'
});
The answer from Sławek Wala (contentWidth: '0px') is a really magic wand :)
In IE8 unnecessary horisontal scrollbar appears often upon elastic containers. But that's only part of the trouble: when horisontal scrollbar appears the content overflows through both vertical gutter and scrollbar.
So, if one disables horisontal scrollbar just making it invisible (as the other answers suggest) then the second part of the trouble remains.
contentWidth: '0px' fixes the both symptoms.
However, knowncitizen was right, '0px' does something weird with the jScrollPane because contentWidth is an integer property (btw contentWidth: 'foo' gives us the same pretty result ).
To avoid unpredictable effects one can use any positive but small enough number like this: contentWidth: 1
This is quite outdated question. But in case someone has same issue as you and I:
as I haven't found any property or API call to achieve this, I used simple solution - disabled via CSS:
.jspHorizontalBar { display: none !important; }
Not very elegant way, but saved time of investigating or 'hacking' jScrollPane code.
Pass horizontalDragMaxWidth: 0 to the options.
None of the solutions worked for me here so here's what I did using nested divs:
JS
$('#scrollpane').jScrollPane();
HTML
<div id="scrollpane" style="max-height: 400px; width: 700px">
<div style="overflow:hidden; width: 650px">
Your long content will be clipped after 650px
</div>
</div>
I was able to accomplish this using CSS.
Since the parent should have the class horizontal-only, when we only want a horizontal bar, I added the class jspVerticalBar as a child so that when it appears ONLY under the horizontal-only class, it will not display it.
It will still work if you have set the vertical and horizontal on the same page.
div.horizontal-only .jspVerticalBar { display:none; }
After trying and failing with the other answers, we had to hack jScrollPane to make this work. In jquery.jscrollpane.js, line 171:
pane.css('overflow', 'auto');
// Hack: Combat size weirdness with long unbreakable lines.
pane.css('position', 'static');
// End hack
if (s.contentWidth) {
contentWidth = s.contentWidth;
} else {
contentWidth = pane[0].scrollWidth;
}
contentHeight = pane[0].scrollHeight;
// Hack: Continued.
pane.css('position', 'absolute');
// End hack
pane.css('overflow', '');
Not sure how safe it is but that works for us.
For me, the best solution was in to add left: 0 !important; for classes .customSelect and .jspPane in the CSS:
.customSelect .jspPane {
overflow-x: hidden;
left: 0 !important;
}