Layered Backgrounds in IE8 - internet-explorer-8

background-image: url('/images/tenticles.png'), url('/images/header.png');
I have the above code, which works in both Firefox and Chrome. However it does not work in IE8. I was wondering if there was a way around this not working. Something similar to HTML5shiv.

There are multiple workarounds for IE's lack of multiple background support. One such technique involves simply creating a div that spans the entire page, and setting its background along with the background of the body element. This technique can be repeated as necessary. For example:
body { background-url('/images/tenticles.png'); }
#background1 { background-url('/images/header.png'); }
<body>
<div id="background1">
</div>
</body>
However, it looks like you want something along the lines of CSS3 PIE (Progressive Internet Explorer), which "makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features". From PIE's website:
PIE currently has full or partial support for the following CSS3 features:
border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image
Other features are under active development.
Note that this question is very similar and has a lot of other useful information and techniques.

Related

SVG fonts in Firefox other than serif and sans-serif?

I am using fonts in an embedded SVG file rendered in Firefox (v26, "Nightly" and future versions). Other than the two fonts serif and sans-serif, what else is available?
My SVG is generated in Adobe Illustrator. Any font-family names I specify only render correctly in Safari and Chrome and I cannot use outlines as a workaround, as I will be annotating the SVG with dynamically-generated label text.
Other than using outlines, what is the process for annotating SVG documents with custom text elements, such that they will render correctly in Firefox?
On making your SVG render pretty fonts
It is entirely possible for Firefox to present SVG text in a custom font. For example, it can be done as follows:
<svg>
<style>
#import url(http://fonts.googleapis.com/css?family=Varela+Round);
text { font-family:Varela Round, sans-serif; }
</style>
<text y="20">I will appear in a custom font</text>
</svg>
This fiddle demonstrates the usage to some extent. Note that in jsfiddle the CSS is included as an HTML style sheet, not directly in the CSS.
The following can be used as a data URL, i.e. you may copy an paste it directly into the address bar. It demonstrates using #import from the SVG directly.)
data:text/html, <svg><style>#import url(http://fonts.googleapis.com/css?family=Varela+Round);text { font-family:Varela Round, sans-serif; }</style><text y="20">I will appear in a custom font</text></svg>)
(Of the current popular browsers, only Firefox supports data URLs in the address bar. Also if you change the data's MIME to image/svg+xml it won't work in Firefox.
In a comment on the previous answer to this question, Robert Longson also shared a link demonstrating an imported font using <link rel=stylesheet. Note that some of the fonts on that page are rejected by Firefox for technical reasons which I don't understand. However, almost all of them work.
Regarding the politics around SVG Fonts
SVG Fonts is a branch of the SVG spec which deals with defining your font in an SVG file. This is totally different to using a font in an SVG file, which I have outlined above.
Mozilla's position on the SVG Font spec, as I understand it, is that the only benefit to SVG fonts is that you can define your font by hand in a text editor. Others have expressed similar opinions. This is why Mozilla have concentrated on WOFF.
The current state of importing web fonts is such that, to achieve cross-browser/device compatibility, you have to provide multiple different font formats. This is unfortunate, but hardly the end of the world in my opinion.
Unfortunately for you, Mozilla has indefinitely postponed SVG font implementation to focus on WOFF. In fact this bug was even labeled on Bugzilla as "RESOVLVEDWONTFIX". Here is the link for MDN and the link on Bugzilla.
Admittedly I do not know enough about SVG Font to know if the CSS #font-face element will work and I also saw reference to Openfont.

IE8 Ignoring Background rules for Fancybox 2 ... Black background regardless of Fancybox CSS

I am using Fancybox v2.1.4 throughout a site with no problem, except in ie8 (even ie7 is ok). When I apply fancybox to a div in ie8, all background css is lost.
Here is what it is supposed to look like, and looks great in all browsers but ie8:
http://hallyb.com/images/good.jpg
And here is how it renders in ie8:
http://hallyb.com/images/bad.jpg
Nothing I change with the fancybox.css affects this black background; in fact, the background color is set to #fff first, with a background image added second Nothing about it says "black".
Thanks for any insight to this problem.
SOLVED!
This one was tricky because I am using PIE (http://css3pie.com) to wonderfully render css3 effects in older IE. For some reason, IE8 does not like it when the PIE.htc behavior file is called on nested elements, such as the fancybox 'wrap' code I am using here. IE7 doesn't seem to care. Remove the duplicate behavior attribute from the fancybox css and all is well.

Border-radius on an image with a border is different on Firefox and Chrome

This is best explained with images.
Firefox, right:
Chrome, wrong:
jsfiddle.
That is a (fully green) image with 2px (red) border and a border-radius of 6px. In my design, the border is barely visible, so the image looks completely square in Chrome.
Is it possible to achieve the correct result in Chrome without extra markup nor javascript?
I don't believe you can do this with Chrome. Images will extend over the bounds of border-radius, and I think that's the intended behavior (or else they just didn't notice).
When using a div, for example, you can see that the background behaves as it should. You could consider using a div instead of img, and using your source image as the background (and forcing its width and height).
Plainly said: In Chrome, there does not seem to be a way to force your image to be hidden by the border of itself (or even of its container) unless it is set as a background. In fact, the issue has been asked about before, and blogged about as well (and, in fact, patrickzdb's comment there may help you).
Apparently it is a bug in chrome..
I normally apply box-shadow for chrome instead of border.
so, if you don't mind to apply css hack to workaround it without javascript: http://jsfiddle.net/3cuHU/

CSS3 PIE: rounded corners slow down IE9, even though it supports them natively

I'm using CSS3 PIE to add support for rounded corners to IE7/8. I've found that when I have lots of elements on the page with rounded corners, performance in IE9 drops considerably when PIE is enabled: scrolling becomes laggy, simple hover effects (like link color changes) become significantly delayed, etc.
But according to PIE's own documentation, PIE "does nothing" in IE9 if the browser natively supports the particular CSS3 feature you're using. Theoretically, then, if I'm only using border-radius (which IE9 supports), enabling PIE should have no effect on performance.
What could be causing this?
I added -pie-poll: false; to all the elements on the page that had PIE applied to them, and this sped up IE9 considerably, to the point that it's on par with IE7/8. I believe by default, PIE polls all elements every 250ms for updates; setting -pie-poll to false prevents any updates from occurring until the element is rendered and/or interacted with.
This still doesn't explain why PIE is polling elements in IE9 that aren't using any non-native CSS3 features, but it does resolve the problem.
Try using conditional comments so IE9 won't even load the code.
<!--[if lte IE 8]>
// CSS3 pie scripts
<![endif]-->

Why doesn't my webpage scroll in Internet Explorer 8?

So I've spent a significant amount of time coding and designing this webpage, and it works perfectly in every browser I've tested it in: IE7, IE9, Firefox, Chrome, Safari. But when I view the webpage in IE8 (and only IE8), the vertical scroll is disabled. The scroll bar is there all right, but it's turned off and I can't use it or the mouse scroll wheel.
I'll post the code for the webpage if I absolutely have to, but first I wanted to see if anyone had ever heard of this happening before or had any initial thoughts.
Okay, I figured this out. If you put height: "100%"; in the html tag of your page's CSS stylesheet, it will break scrolling in IE8, but other browsers will still work. Go figure.
Here is a hack way of getting the scrollbar to work with a height of 100%. Not the best solution but it now scrolls in IE8.
html {
overflow-y: hidden\9;
}
html, body {
height: 100%\9;
}
body {
overflow-y: scroll\9;
}
mainly three things you should see
If you have given style as overflow:hidden
If you have given hight in page percentage.
if you have given float:static.
Fix this issue your IE 8 problem will be solved.
Reason : IE 8 is different than nything else for CBC check IE frist! To the topic, IE 8 hides (only scrolling bar) of scroll bar if you have overflow as hidden, secoundly if you have places hight as 100% IE 8 takes overflow as hidden (can say takes by its own!) n float is element who can go beyond page size if you have it as inherit or relative but static dose not increase dynamicly.
You tried on other IE8 (not your local ie8)? Maybe the problem is in your ie8.
Run with no-addon mode or try to disable all addons (including bars)
Restore advanced settings. Tools -> Internet Options -> Advanced -> Restore Advanced options.
I have also faced this type of problem many times.Scroll bar with IE8 , should not visible in a plain HTML page. So, please check the content inside your <body></body> tag . There may be is some margin or padding tag.
I am using IE8 currently , but there is no such scroll bar is showing. No need to fix the height:100% for HTML or BODY. Please check your page deeply.
If you are using CSS, it may come in handy that you need a reset CSS value so that the page renders properly in IE8. I have provided the link as well as the snippet from http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/ . This may help you. If anything this is a nice site to read if you are starting development.
A reset to where it all started…
The concept of CSS Reset was first discussed formally way back when dinosaurs still roamed the internet (2004 to be exact) by Andrew Krespanis. In his article, he suggests using the universal selector (*) at the beginning of your CSS file to select all elements and give them 0 values for margin and padding, like so:
* {
margin: 0;
padding: 0;
}
The universal selector acts like a wildcard search, similar to regular expression matching in programming. Since in this case, the * isn’t preceded by another selector, all elements (in theory – some browsers don’t fully support it) is a match and therefore all margins and paddings of all elements are removed (so we avoid the spacing differences shown in Example 1).
Applying the universal selector margin/padding reset to our earlier example, we now remove all inconsistent spacing between all browsers (in other words, we don’t make the browsers think for us, we show them who’s boss).
Example 2: Applying the universal selector margin/padding reset
But now we don’t have any spacing in between paragraphs, so somewhere below our universal selector reset, we’ll declare the way we want our paragraphs to look like. You can do it a number of ways – you can put margins (or padding) at the beginning or top of your paragraphs, or both. You can use ems as your units or pixels or percentages.
What’s important is that we choose the way the browser will render it. For our example, I chose to add margins (instead of padding) both at the top of the paragraphs and at the bottom – but that’s my choice, you may want to do it differently.
Here’s what I used:
* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }
Example 3: Declaring a style rule after the universal selector.
Note: The example I used for discussion is a simplified example. If you only used paragraphs for your web pages and no other elements, you wouldn’t want to reset your margins to 0 using the universal selector only to declare a style rule right after it for your paragraph. We’ll discuss this more fully along with other best practices later on down the page.
Shortly thereafter – CSS guru Eric Meyer further built on the concept of resetting margins and paddings. In Eric Meyer’s exploration, he discusses Tanek’s work undoing default HTML styles (which he called undohtml.css) which not only resets margins and padding, but also other attributes like line-heights, font styles, and list styles (some browsers use different bullets for unordered list items).
After many iterations and refinements, we come to a wonderful solution called CSS Reset Reloaded CSS Reset, which not only makes this CSS reset method more accurate than the universal selector method by using higher specificity by naming all possible HTML tags (because the universal selector fails to apply the reset to all HTML tags), but also sets default values for troublesome elements like tables (in which the border-collapse attribute isn’t rendered consistently across browsers).
Of course, there are other methods of resetting your CSS (such as Yahoo!’s YUI Reset CSS which I currently use on Six Revisions), and you can roll your own based on your preference and project needs.
SITE: http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
NOTE: I am kind of new at this, so please bear with me.

Resources