|
Page 1 of 1
|
[ 8 posts ] |
|
| Author |
Message |
|
Extreme
Joined: Wed Jul 20, 2011 6:48 am
Posts: 10
Location: Franklin, VA
|
 IE strings CSS together First off, on behalf of all Front-End Developers, thank you for CSS3Pie  I have noticed this several times on various projects and am curious why this happens. IE tends to like to string multiple CSS clauses together as if they were a single statement. Doing searches returned no fruitful explanation which leads me to believe that this is not a common issue. Thus, hopefully there is an easy fix for this. I have included a screen-shot to display the problem. You will see in the image I have tried to even isolate that clause alone and still get the issue
Attachments:
File comment: Screenshot of IE stringing CSS together with CSS3Pie
pie_string_together.JPG [55.99 KiB]
Not downloaded yet
_________________
Extreme, Leader of a Psychopathic Penguin Army
|
| Fri Dec 09, 2011 3:00 pm |
 
|
|
|
jason
Joined: Wed Jul 14, 2010 11:46 am
Posts: 1396
|
Re: IE strings CSS together I've seen this too. I don't know of a way to prevent it, but since it's just a bug in IE's developer tools (as opposed to a problem in the style/rendering engine) it's not a huge issue.
|
| Sat Dec 10, 2011 11:16 am |
|
|
|
Extreme
Joined: Wed Jul 20, 2011 6:48 am
Posts: 10
Location: Franklin, VA
|
Re: IE strings CSS together The peoblem I have on this is that the clauses that are strung together, only the firast applies. And in th example in the screenshot there is no border-radius which is the problem. I am assuming that this stringing together is the cause
_________________
Extreme, Leader of a Psychopathic Penguin Army
|
| Sat Dec 10, 2011 1:23 pm |
|
|
|
jason
Joined: Wed Jul 14, 2010 11:46 am
Posts: 1396
|
Re: IE strings CSS together I don't believe that's accurate, at least not in my experience. Both rules are parsed and applied by the rendering engine, it's just the developer tools that displays them slightly oddly.
You can test this hypothesis easily by changing the order of rules so that different ones are combined, and see if that changes anything.
|
| Sat Dec 10, 2011 10:02 pm |
|
|
|
xem
Joined: Thu Apr 07, 2011 3:23 am
Posts: 66
|
Re: IE strings CSS together I only experienced this when using background-image: url(*), linear gradient(*); (which is false)
That caused my next css line to be concatenated to the first one.
I replaced background-image by background and then it worked fine.
Maybe your box-shadow css line is false too, can you copy-paste it here so we can see?
|
| Thu Dec 22, 2011 4:05 am |
|
|
|
Extreme
Joined: Wed Jul 20, 2011 6:48 am
Posts: 10
Location: Franklin, VA
|
Re: IE strings CSS together It is actually tied into a widgit from swipley.com; site that offers a rewards program for small buisnesses. This widgit includes a style element in the generated JavaScript code, not an iFrame, that is not used in IE7. As a result, I had to take the content from that style element that was nested in the div and put it in a conditional IE stylesheet. Below is the code in particular and the problem is the missing border-radius. Additionally, I can not show the actual site as it is in dev and not live to public Code: .sw_merchant_widget {
position: relative;
width: 300px;
padding: 20px;
font-size: 14px;
line-height: 20px;
color: #fff;
border: 1px solid #3a64b7;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
background: #669dff;
background: -ms-linear-gradient(top, #669dff 0%,#4271cb 50%,#3d69be 51%,#3962b1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#669dff', endColorstr='#3962b1',GradientType=0 );
background: linear-gradient(top, #669dff 0%,#4271cb 50%,#3d69be 51%,#3962b1 100%);
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.2);
behavior: url(PIE.htc);
}
_________________
Extreme, Leader of a Psychopathic Penguin Army
|
| Thu Dec 22, 2011 10:17 am |
|
|
|
jason
Joined: Wed Jul 14, 2010 11:46 am
Posts: 1396
|
Re: IE strings CSS together I think you're probably misinterpreting what's happening. The border-radius is being covered up by your use of the gradient filter, which does not respect rounded corners. You need to remove the filter and replace it with a linear-gradient in -pie-background, and then it should work.
|
| Thu Dec 22, 2011 11:09 am |
|
|
|
Extreme
Joined: Wed Jul 20, 2011 6:48 am
Posts: 10
Location: Franklin, VA
|
Re: IE strings CSS together I will guve that a try
_________________
Extreme, Leader of a Psychopathic Penguin Army
|
| Thu Dec 22, 2011 11:14 am |
|
|
|
|
Page 1 of 1
|
[ 8 posts ] |
|
Who is online |
Users browsing this forum: Alexa [Bot], Bing [Bot] and 2 guests |
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum
|
|
Forums