I have attached a screen shot below of a recreation of an issue. For some reason when I have a background image style IE8 is taking another style from the same selector and appending it after the background-image style. This is causing issues on some of my pages.
My HTML is simply:
<div>test</div>
My CSS (in the head tag) is:
<style type="text/css">
div {
height: 200px;
width: 200px;
background-image:url("breadcrumb_location.jpg");
border: 1px solid green;
font-family:"Courier New", Courier, monospace;
}
</style>
And here you can see the developer tool in IE8, why is the border showing up at the end of the same line for the background image style? As a workaround, I know I can just make a separate selector ( such as div{background-image:url("some-image.jpg");} ) but I don't want to have to do this all over.
I have discovered that this bug goes away if I use the complete background shorthand. This is also not an ideal solution because there are many background images on my pages and ultimately it is adding what I consider unnecessary css resulting in a larger css file (yes, every bit counts, especially when you might have hundreds or more background images in a css file for a whole site.)
Anyway, unless anyone can suggest a better fix for this bug (and in case anyone else doesn't know CSS shorthand), the fix was changing background-image to:
background: white url("breadcrumb_location.jpg") no-repeat top left;
Related
I have an svg sprite sheet which I have created, and I use it on my page using the before parameter as I am using it for my div buttons. There is a lot more css than this, but this is the important bit.
.logout_button::before,
.vat_button::before{
content: "";
width: 1.563em;
height: 1.563em;
background: url("../../images/buttons/test.svg") 0px 0px no-repeat;
float: left;
margin: -3px 10px 0px 0;
background-size: 12.5em 12.5em;
}
Previously I was using png but I wanted the ability to change the colour of my button icons, so decided to change to svg to overcome this problem.
The problem is that I cannot change the colour of the css using this method.
I believe if I use an inline svg I can then change the css, but the problem is this. My svg sprite svg is 60k and I don't want a big wad of code poluting my css file.
Is there a way of including an svg in a separate file in my css without having a pile of inline code in my css file.
I don't really want to use jQuery for this, just css if that is possible.
I have searched an searched for an answer but nothing seems to come close.
Adding my svg to the html is not an option.It has to be in the css as a background image.
Just want to add that I don't want to use css masks as they are imcompatible in a lot of browsers, and take a lot more work to get it to work.
I have a container div with more divs inside for a slideshow effect. "The container" div is over body's the background image.
CSS for the body:
body { background: #333 url(images/bg.jpg) repeat-x top; }
Problem is in IE7 the container div has a background color #333. Firefox shows up properly as clear.
Here is the CSS for the container div:
.cntdiv {
width:100%;
display:block;
margin:0 auto;
margin-top:15px;
overflow:hidden;
}
Any idea why it's picking up the body color and not the image? Again, it works right in Firefox.
IE7 does indeed support URLs for backgrounds. You are correct in saying that it does not support Data URLs, but this is not a Data URL. A Data URL is CSS looks similar to:
url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) .
Note the use of the keyword "data:". The key here is that the data IS the String... not a file.
There are some little catches, however. First, the URL must be in quotes, as in:
body { background: #333 url("images/bg.jpg") repeat-x top; }
IE does, however, interpret the background short syntax differently, so I have found that expanding the syntax helps immensely with IE pre 8 bugs.
body { background-color: #333; background-image:url("images/bg.jpg");
background:repeat-x; background-position:top;
}
Finally, your container div must be explicitly defined with a background color:
.cntdiv {
width:100%;
display:block;
margin:0 auto;
margin-top:15px;
overflow:hidden;
/* This is the line that will do it */
background:transparent;
/* OR EVEN */
background-color:transparent;
}
This code is tested and runs correctly in IE7 and has the same behavior in the others as well. Judicious use of "transparent" is awesome.
It also must be understood that the issue you are facing is not a bug, but a user agent CSS style. This is according to the W3C standards unlike the other div bugs that IE has (such as poor :hover support). Because you didn't define a background for your div, the User Agent (IE7) is allowed to do whatever it likes. This is true of all HTML Elements and all browsers. It is why buttons look a certain way unless you change it with the CSS. Explicit definition of every aspect is the best way to overcome little snafus such as these.
Hope this helps,
FuzzicalLogic
The reason it doesn't work in IE7 is because you are using a data URL, and IE7 does not support them. Evidenced by:
http://www.caniuse.com/#search=Data%20url
For IE7 you'll have to use conditional comments and adjust the way you reference the background image. Here's a quick and simple intro to conditional comments if you don't know about them yet:
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
Ok, I found the problem. I was using the jquery.cycle plugin to rotate the divs into view. Somehow IE7 didn't like it. I tried a different jquery plugin and it works perfectly.
Thanks for your suggestions.
I've got a webpage I'm designing and my design works great in google's Chrome browser but I'm using the CSS 'border-radius' property which as I'm sure you know isn't supported by IE. I'm trying everything I can think of but I've got a few things going on that are causing me a lot of trouble
The 'box' in question that I'm trying to get rounded corners on has a white background with a background image
The page background is a gradient and the outside corners must be transparent to look right.
I've got a green border running around my box.
Here's a sample image that shows what I'm trying to achieve:
alt text http://www.freeimagehosting.net/uploads/77c9ec6c32.png
Let me know if it would help to see my current CSS and HTML. I've tried a lot of different things but they all have one problem or another. The box background is set in my CSS as a non-repeating image set in the lower right and the fading effect comes from it being partially transparent so it fades to white since that's the background color of the box. A fluid solution would be nice but I can use a fixed-width solution just fine.
The background is what's causing my main problem. I can't figure out how to make the background fill the whole thing if I break up the HTML into more than one div.
HTML:
<div class="content">
<jdoc:include type="component" />
</div>
CSS:
.content {
background-color: #FFFFFF;
border: solid 2px #ACD579;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
padding: 1em 2em;
}
.content
{
background-image: url(../img/pagebG.gif);
background-position: bottom;
background-repeat: repeat-x;
}
It would be better if you provide your code, so we can see where you're going wrong.
Also, is the page breaking in IE6? or just IE in general?
To get rounded corners in IE you could use CSS3 Pie, which makes "Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.".
I'm attempting to use a CSS gradient in a div containing some text. With Gecko and Webkit, the text displays fine. In IE7 & IE8 the text appears aliased (jaggy).
I came across this blog stating: "we decided to disable ClearType on elements that use any DXTransform".
IE Blog:
http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx
That was back in 2006; 3.5 years later, I assume this bug would be fixed, but it's not. Is there a way to do this in IE8 without resorting to stuffing a repeating background image in the div?
Here's an example of what I mean.
<style>
div
{ height: 50px;
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
}
</style>
<div>Hello World</div>
<p>Normal text</p>
In IE, the text in the div is aliased (jaggy), and the text in the paragraph is not.
Any solution that doesn't involve images would be greatly appreciated.
There's no good solution to this problem.
Worse yet: progid:DXImageTransform.Microsoft.gradient is horribly buggy so mouse events (hover, click, etc.) pass right trough it - a click on such an element also triggers a seperate click on whichever element that happens to be positions behind it. Beware!
Regardless, you better start considering which fallbacks/workarounds/NastyHacks feel acceptable to you.
Here are a few ideas off the top of my mind - in order of my personal preference:
Just fall-back to a plain solid background-color in IE and move on with your life. (Be sure to place that background rule first for it to be safely overridden/ignored by FF and Webkit.)
Use a background-image in IE. (Again place that CSS rule at first)
Keep using the gradient hack and simply 'suck it up' and accept the jaggy text for IE.
use Javascript (or IE's proprietary CSS expression() syntax) to inject an empty element, apply the gradient to it and place it behind the text.
div {
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
behaviour: expression( jQuery(this).wrapInner('<div class="ie-wrap"/>').prepend('<div class="ie-gradient"/>'); this.runtimeStyle.behaviour='none'); /* disable repeat runs */
position: relative;
}
div div.ie-wrap {
position: relative;
}
div div.ie-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: expression( this.runtimeStyle.height=this.parentNode.clientHeight+"px" );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
}
(Warning: above code is untested pile of crap. and will probably not work as is.)
Keep using the gradient hack and use Cufon to replace the jaggy text with VML rendered text. (Rests on the assumption that your site is using a typeface that allows font-embedding.)
You could try using an IE css 3 html component, like PIE (http://css3pie.com,) which does a fairly decent job of rendering gradients. (Though this is essentially using javascript)
Wrap the content with a DIV then add this to the DIV's css style...
position: relative;
http://cookbooks.adobe.com/post_IE8_clearType_fix_when_using_filters-16676.html
I had a situation where I wanted backgrounds of text areas to be certain colours fading horizontally to white and defined by hexadecimal in the CSS. I wanted to avoid making colour background images in case a non-developer member of my company wanted to add a new colour with hexadecimal only.
The solution I found was to make a 24-bit PNG of white gradienting into transparent set to the width of the area I was making.
I then used this IE-only hack to get the CSS to render a background colour of my choice that fades to white:
background /*\**/: #CCCED4 url('/white_to_transparent.png') repeat-y top left\9;
(the hack could be improved, but it works for me, including IE9)
I found another inexpensive (bit opaque) solution. The text becomes anti-alised back again, when wrapping the text node and setting each element to relative position. Do not ask why...
Lets assume:
<html>
<head>
<title>IE8 filter problem causing jagged fonts</title>
<style>
html, body, div, span, b, i, ul, li, h1, h2, h3 ... to be continued {
position: relative;
}
.gradient {
filter:
progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#e6e6e6');
}
</style>
</head>
<body>
<div class="gradient">
<div>I am wrapped, therefore not jagged</div>
</div>
</body>
</html>
Hope that helps anyone out there. In this case it's not necessary to use background images or derivates.
Working example in jsfiddle: http://jsfiddle.net/SLZpE/2/
This may not count as elegant (or working) solution, but how about using Cufón for IE?
Yes, that's a problem with IEx.
Try using a solid background color:
/*replace #ccc with the color you want*/
background: url(images/gradient-image.png) top repeat-x #ccc
Now, no need to use the expression "...stuffing a repeating background image", since there's nothing wrong with using a background image and repeat it, we should be thankful that we can not only do that, but we can repeat it in X and Y.
Of course, you want to make your repeating background image as efficient as possible, so make it small/thin (depending on your design) and use it, rest assured, you are not doing anything wrong or against any standards or best practices.
Here's a quick and dirty round corners technique I've been playing around with.
<!-- assuming the div isn't statically positioned -->
<div>
<img src="box_TL.png" style="position:absolute;top:0;left:0;"/>
<img src="box_TR.png" style="position:absolute;top:0;right:0;"/>
<!-- other content -->
<img src="box_BL.png" style="position:absolute;bottom:0;left:0;"/>
<img src="box_BR.png" style="position:absolute;bottom:0;right:0;"/>
</div>
Yeah it's ugly, but it's fast, the corners are fluid, it avoids nested divs and requires no javascript. The corner images and content order makes no difference, but I thought it might be more intuitive to order corners and content this way.
Question: How terrible is this technique? Is it passable or should I abandon it completely?
I'd use jQuery Corner Plugin. It's very fast and works in all modern browsers, and also in IE6.
It's terrible. Your markup should be content, and your layout should be in the style. Not intermingled. You should go with:
<div class="whatitis">
bla blah ... content here
</div>
and the style:
.whatitis {
background: whatever;
border: whatever;
border-radius: 1em;
-moz-border-radius: 1em
-webkit-border-radius: 1em;
}
Yes, sure, some browsers won't get rounded corners. But if you hack up a solution that will give properly rounded cornsers even in browsers that does not support that, you will have a complex solution, and odds are that your site will not work att all in some other browsers. So you should ask yourself: What is more important, that the site works at all in some browser X or that you get rounded corners in some other browser Y?
Addition: Using the jQuery plugin mentioned in another answer (or some other pre-packaged solution) might be accepptable. As long as it does not require any extra <div>, <img> or other tags.
It's a terrible solution, sorry :-)
It's true that you don't need any JavaScript or nested div elements. The JavaScript is easily avoidable, no matter what. But is four irrelevant img elements better than a few nested div elements? The img element is supposed to contain image content, using it for layout purposes is basically the same as using tables for layout. Yes, it works, but it's wrong, and it ruins all semantic value.
If I were you, I'd do it this way (excuse the silly class-names, they are just there to illustrate):
The markup
<div class="boxWithRoundedCorners">
<div class="roundedCornersTop">
<div class="roundedCornersTopRight"></div>
</div>
<p>Your content goes here, totally unaffected by the corners at all. Apply all necessary margin and other styling to make it look good.</p>
<div class="roundedCornersBottom">
<div class="roundedCornersBottomRight"></div>
</div>
</div>
The CSS
.boxWithRoundedCorners { background: red; }
.roundedCornersTop {
background: url(topLeftCornerPlusTheTopOfTheBox.gif); /* Should be pretty long. Assuming your corners are 20*20px, this could for instance be 1000*20px, depending on how large the box would ever be in the real world */
height: 20px;
}
.roundedCornersTopRight {
background: url(topRightImage.gif);
width: 20px;
height: 20px;
float: right;
}
.roundedCornersBottom { background: url(topBottomCornerPlusTheBottomOfTheBox.gif); /* same "rule" as above */
height: 20px;
}
.roundedCornersBottomRight {
background: url(bottomRightImage.gif);
width: 20px;
height: 20px;
float: right;
}
Got it? Hang on, I'll put up an example somewhere :-)
Edit: Just threw up an an example!
Anyhow, this method will ensure a complete flexibility regarding height and width of the box, and the layout within the box always works the way it should, unaffected by the corners.
Yes, it gives you some nested divs with no purpose other than the layout - but then again, that's what DIVs are used for. IMGs should always be content-related imagery.
You could do it with all the corners being 15*15px and setting the background-color of the container. However, when stretching these images like this, you get the opportunity to add shadows, gradients or other effects. This is what I'm used to do, so I did this this way with the stretched images.
This method is well tested out, and should as far as I know/remember work fine at least all the way back to IE 5.5.
This is a very old topic, but since it's re-appeared on the front page, I'll add a comment.
In the last few months, a new solution has appeared for rounded corners, which solves the issue for all relevant versions of IE (6,7,8).
CSS3Pie is a 'hack' for IE which allows you to set up rounded corners in your CSS and not worry about it anywhere else. At a stroke, you can throw away all those extra divs in your markup and those jquery plugins, and just specify it in your stylesheet the way it should be.
All other browsers support rounded corners in CSS, and have done so for long enough that you don't need to worry about older versions.
CSS3Pie also helps with CSS gradients and box shadows in IE too, so it's a very big win for cross-browser developers.
you'll come into issues with IE6 using PNGs so you will either need to add the correct CSS filter background to divs instead of images or use javascript to help turn the png images into transparent gifs with the png background added.
http://www.twinhelix.com/css/iepngfix/
If the box is fixed width, then there's an interesting trick you can do which works in IE8 and the rest (but not IE7-):
div.rounded {
width: 600px;
padding: 0 10px;
}
div.rounded:before,
div.rounded:after {
display: block;
content: "";
width: 600px;
height: 10px;
}
div.rounded:before { background: url(images/rounded_top.png); }
div.rounded:after { background: url(images/rounded_bottom.png); }
Unfortunately this doesn't work with anything that has a fluid width, and it's not copatible with older IE browsers, but I still like it :)