I am getting a number of strange rendering issues in IE6/IE7 when there are transparent backgrounds applied to the elements involved.
They have included but are not limited to:
When scrolling back up a page a background image appears moved as if padding is applied.
When hovering over a link the background image applied to its containing div appears to disappear.
When using a drop down, hovering over a containing element of the drop down closes calls the mouse out event.
These are just 2 of the 7 I have had to fix so far and as you can see they are unlinked and a pain to debug and I am sure there will be a number more that I will encounter before this project is over.
To stop I have modified a default CSS rule that was setting nearly all elements to have a default image of "spacer.gif" - a 1KB 1x1 transparent image.
Old:
background: transparent;
New:
background: url('../images/spacer.gif');
However I am now worried about the overhead this could have on both the server and client machines. Such as increased loading times (and load on the server) caused by downloading the spacer.gif for each element from a "dumb" browser and a CPU hit on the client side when scrolling through the page as it has to render the additional images.
Are my worries justified and if so how can they be rectified? Or am I just worrying over nothing and this is an appropriate fix for such a stupid issue??
tl;dr - transparent backgrounds on elements (NOT images) causes issues caused by the way they are interpreted in IE. This is not a rendering of images issue this is a IE-logic-fail issue.
Thanks in advance.
I use this css hack for giving IE < 7 a gif file and everything else a 24 bit png with transparency.
background-image:url(/images/sprites/icons-sprite.png);
_background-image:url(/images/sprites/icons-sprite.gif); /* IE<7 gets the crappy icons */
IE 6 supports gif transparency just fine.
Depending on the scale of things really determines how much it'll affect your server load. Ideally if you're planning on making this a significantly big deployment you should already be doing the most suitable standard methods of handling static content: cache headers, separate (sub)domain for static content, reverse proxies, CDN deployment etc.
In terms of the CSS, you either have nasty hacks like Javascript or spacer images to get around IE6/7, or restrict the way you use your page styles so that these problems don't exist because you aren't using the things that cause them. It really depends on what you feel is of greater importance.
IE 6 (and possibly IE7, I'm not sure) has some weird transparency issues.
Check out http://homepage.ntlworld.com/bobosola/index.htm for the fix which I use all that time - just have to add a little javascript and convert any gifs you have to png.
Look at this article: PNG8 - The Clear Winner
You will need Fireworks for this fix. Since I discovered this writing I use it all the time. Major plus: you do not need different images for different browsers. PNG8 is good for all.
Related
i have a standard rails 4/heroku setup. One thing is weird: The different elements of the page appear in different sizes for the local environment and for the production environment.
For example: Although the header-height is set to a specific pixel value it is different in height for the two environments.
Same with the width of the content: I set a max-width of 1260px - the width of the content is different for the two environments.
Everything appears bigger in production.
I found one related question, suggesting that the problem is due to assets which are compiled twice. Thats not the problem in my case...My CSS is loading differently between development and production environments
Whats the reason for this behaviour? Thanks in advance.
Ok, i solved it now. Its embarrassing, but maybe it helps someone else: I activated the browser zoom for localhost unintentionally. The reason why i didn't come up with this from the beginning was, that also search boxes and other elements appeared in a different style - even without any styles! Search boxes without browser zoom have rounded corners in chrome. With browser zoom of -1, search boxes appear rectangular. This is why i thought there are still styles applied, even i disabled all my stylesheets facepalm.
Maybe someone else can save some time with this hint.
I have been working on a little photo slider. It looks slightly different in Chrome than in FF so I thought a CSS reset would make them both look the same. I used the Yahoo! YUI CSS reset model but nothing changed. It looks good in FF but in Chrome the "Resume" button on the right side sticks up too high and a thin gray line at the bottom of the big pictures gets cut off where the main buttons are located. Here is the URL:
http://www.replayground.com/slider/02.html
You can ignore the stuff below the circles. Just testing stuff down there.
Here is what I added to my 02.html file:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
I'd really like advice on how to get CSS Reset working correctly. Not how to fix the specific buttons problem you see. As I add elements to the page I don't want to have to go through this each time.
A CSS reset is not designed to make all the rest of CSS cross-browser. It is designed to set all of the client default rules on all the different browsers to the same thing so that you are always working from a predictable set of CSS rules. How the browsers interpret those rules is still specific to each one.
In your case, you still need to figure out how to write CSS rules that operate the same in both Chrome and FF - the reset simply levels your starting point a little, it doesn't remove the browser rendering differences.
You may find a cross browser CSS framework (e.g. blueprintcss.org or 960.gs) to be more helpful for your current situation. They often use a reset, but also have rules that compensate for the differences in the rendering of the after-reset CSS rules.
jball is very right about the resets. They just allow you to start with a blank page, but you should still write a proper document structure and good CSS to get good and consistent results.
In your case, all elements in your page are loose in the page. This will give you trouble in the end. Some things will shift a few pixels, especially when you don't specify exact height for every item. Fonts are rendered in different heights by each browser. These may be tenths of pixes, but when they get rounded, your website is a little off between browsers.
When you use a little deeper nesting of elements, you can make better use of positioning elements (relative and absolute). If you put in a specific div for the header, and give it a fixed size, you can position each element in there very precisely, which is especially handy for headers and menu's.
I took the liberty of creating a small example, which shows just some basics of positioning. It is not perfect and uses brightly colored borders instead of images for the layout. But it's just for showing the element nesting and absolute and relative positioning, along with a negative margin trick.
http://jsfiddle.net/YwCxQ/3/
In my office everyone is using IE9. On most of the computers the CSS renders correctly. I have text floating to the left and right. On others, the text does not float or acts odd being positioned below other text. The resolution is the same along with the browser version. Ontop of this, the border color doesnt apply correctly too. On one its white, on the rest it has the grey I was expecting to see. Is there a security setting I'm missing that could stop most of the CSS from working and let the rest work?
Use CTRL-F5 to do a cache clear refresh. You might still be seeing some users previous downloads of reference files.
I have built a CSS layout for a page that appears to work in tested browsers thus far and has previously validated CSS and HTML.
Randomly though, the layout breaks and divs move as if they lost their floats. The breaks occur in Firefox 4 and IE8 for sure so it's not browser specific. There have been at times four divs that have moved but at other times only one — so it doesn't break the same way every time. The breaks typically happen after a period of time away from the site and are fixed with either one or two refreshes. The breaks cannot be triggered with an empty cache/cleared browser history. The breaks happen whether the header is on the actual page or as an include. The breaks happen probably one time out of 20 — but it really seems like it's more about the time passed between page loads than about anything else. I am not understanding how this could purely be a cache issue since I cannot recreate the issue when I delete the cache.
Originally, another forum answer said that it was the use of #fontface but today I saw the layout break in IE8 and Firefox with the 2 #fontface fonts loaded....so it is only the layout that broke while the fonts loaded. So I am not sure if that is the issue. The layout is built to work even if the #fontface does not load.
Here is the link to the site that breaks - http://rg.isolatedfilmproductions.com. Screenshot:
Broken layout as seen inIE8 http://rg.isolatedfilmproductions.com/img/css_not_loading.png
The site is on a shared Apache server. My internet speed is 12mbps cable using Windows Vista laptop.
Set the widths of the two divs explicitly, navigation_menu_container and company_name_container and ensure that they're less than 100% of the parent window size. IE has issues with size plus margin and padding (and the box model in general) and it almost always rears its ugly head when floating two elements.....resulting in an element being bumped down.
This is the reason that I enjoy using 960.gs....no need to worry about box model messes on IE.
As an aside, the font is pretty choppy looking on Chrome....
I am having issues with a website that I am working on in which images and background-images fail to load in Internet Explorer 6.
Here is an example of a page on which you might experience this issue:
Example Page
So far I have looked at the following possible issues and pretty much ruled them out:
XML/Extraneous data in the image files (google photoshop 7 internet explorer)
Corrupt image files
I have not ruled out invalid markup.
I have noticed that there are validation errors in most of the pages where this problem has been reported and I am working on getting those fixed where appropriate.
The behavior I see is that the page will load and all elements other than the background image render. There are no javascript errors thrown. When using Fiddler, no request for the image is made. If the browser is pointed directly to the background-image, the cache is cleared and then the browser is pointed back at the HTML page, the background-image will load inside the HTML page.
Does anyone have any additional suggestions for ways to attack this issue?
Twice now I've had people have problems with photos not showing up, and it was because they were in an incorrect colorspace, using CMYK instead of RGB.
this is a weird issue with IE6. I just right click on the image and select "Show Picture" then the image loads properly.
I'm looking at this in IE6 and trying to replicate the problem, but I can't seem to get it to happen - it always seems to load.
Some thoughts on things to try though as there appears to be another two classes that the background is over-riding is to try adding !important after the background assignment, so:
div.gBodyContainer {
background-image:url(/etc/medialib/europe/about_infiniti/environment.Par.7366.Image.964.992.direct.jpg); !important
}
Another thing to try is getting rid of all the . in the filename and cut down the length of it, shouldn't matter, but it may be causing some problems, doesn't hurt to try it anyway.
The other thing you could try is making gBodyContainer an ID instead of a class, or give it an ID as well as a class and assign the background to the ID. Again, it shouldn't matter, but it doesn't hurt to try and see if it works, IE6 does a lot of funny things.
is it only ie6 and not ie7 too? IE is pretty strict with html sometimes, versus firefox lets you get away with more. Not sure if this helps, but I just debugged weird IE6/7 bugs by slowly taking away content. But if it's only intermittent, as in happens with the same code on and off, that's a really weird one.
The problem is the "IE6" part ;-)
I think in some cases you could solve this issue by loading the full size image before the request and hide it with style display: none; so IE6 will load the image from cache.