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....
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've noticed some strange behavior with both Chrome and Safari on my Mac:
Mountain Lion
Safari 6.0 (8536.25)
Chrome 21.0.1180.89
The page is a simple fixed div with some text in it, I added a second div that does a simple CSS translation over 5 seconds so you can easily see the difference. My web app is using CSS transitions to show and hide portions, and while it was doing this large portions of the screen seemed to shift.
I've placed example code and a .mov file out on a server so hopefully you will see the same issue:
http://physicaltable.com/index.html and http://physicaltable.com/CSS_JIGGLE_TEST_2.mov
The strange bolding doesn't occur in Chrome on Windows 7, nor does it happen on the iPad 2 (v5.1.1)
Has anyone else seen this type of issue?
I realize this isn't much of an answer, but I've found that it's mostly because of the rendering of the elements. If the element needs to use hardware or any other type of graphics rendering, it basically takes an image of the text, adjusts it, then rerenders the text (if it can).
The "taking a picture" is where the boldness is lost, since the browser/display/something is adding the flair that makes the text look good. Of course it doesn't look that good, but that's just me.
I've noticed with different colors other than all white/black, it can behave differently. I'm hoping things will get smoothed out as browsers and rendering advances.
I found solution for this bug
its enough simply force your browser to rerender that at moment move is stopped
E.g.
$("your_element_selector").css("color", "color");
where color can be even same color as your text has
I've been working on a website for a little while now, doing most of my testing in Chrome, Firefox, and IE. As I'm wrapping things up, I've tried viewing it in Safari (on Mac, iPad, and iPhone). I've noticed that certain elements are misplaced in Safari. I've tried playing with the CSS, but I've had no luck.
The page can be viewed here - http://staging.princewebdesigns.com/gallais/
See specifically the logo (being pushed down into the banner), the font of the tagline in the banner (wrapping beyond the banner and extending too far to the left), the 'Featured Work' title wrapping, the project names wrapping, and the footer wrapping.
Here is how the page should look - http://staging.princewebdesigns.com/gallais/images/chrome.png
To see how it looks on my iPhone, change the link above to .../iphone.png
Any help is appreciated.
The issue is (I think) that you have your browser's text zoomed in.
I loaded the page in Safari 5.1 on Mac OS 10.7.3, and it loaded fine initially. When I zoomed normally, the layout stayed intact. As soon as I tried zooming just the text, the layout broke per your description.
That being said, you may want to think hard about how to make the layout more 'flexible' in the event a user does have their text size increased. In IE, for example, the default zoom is full page zoom, but a user can still increase their text size apart from zooming. It's worth testing your layout in those situations to make sure it doesn't completely derail. I'm not saying it has to be perfect, but still legible.
One idea is to try out different units. I've found that when declaring horizontal lengths (e.g. margin-left) using relative measurements works, but when declaring vertical lengths, (e.g. margin-top) using pixel measurements works better. For super critical items, like the site logo, positon:absolute may be a good route to try.
I created a simple page with a series of divs. In all of the modern browsers, it appears fine, but in Internet Explorer 6, it falls apart. I have no idea what is causing it to happen.
You can view the page here: IE 6 Test Page
If you have IE6 installed, I included the Firebug Lite JS file on the page, so just click the firebug icon in the bottom right corner to inspect an element.
Here's a screenshot using Browserlab to view the page in Firefox and IE6: Comparison Screenshot
The 3rd div named 'content'(With the Manager Email field) moves everything to the right forcing the next div to the next line. Also, none of the row div's reach all the way across as they should(see Comparison Screenshot)
I did some research and have found that there is some problems in IE6 using floats which I use here, but I'm not sure how to fix it.
Why does my page not display correctly in Internet Explorer 6? And better yet, how can I fix it? :)
It looks like the third div isn't clearing the float properly. Perhaps give each of the row divs the style clear: both
Do you really need to support IE6? Even Microsoft is fighting it nowadays and the market share is starting to be irrelevant except for China.
There's a difference between "not working in IE6" and "not looking perfect in IE6".
As has already been said, IE6's market share is low and continuing to fall -- it's below 2% in most of the developed world (see http://gs.statcounter.com/ for country-by-country stats).
Given those stats, I would say that if the page is usable in IE6 then your work is done. IE6 users are by now used to web pages looking bad. Many popular sites don't work at all in their browser, so one with a few layout glitches won't phase them at all. They'll still use the site.
If it is actually broken to the point of not being usable then it's a different story; in that case, you'd need to consider how important those few IE6 users are to you vs the time it'll take to do the work, and fix it accordingly, but that doesn't seen to be case here: the page seems to work. It looks a bit naff, but it works.
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.