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.
Related
I'm having a PITA issue with a website.
The Safari mac browser (the desktop one, specifically, mobile safari appears to work) is randomly ignoring some of my CSS -- most notably the background color applied to the HTML element. Refresh and it may -- or may not -- go away. Even more perplexing, the browser clearly knows that style is there! I'm using media queries to create a responsive site, and if you change the width enough to trigger a style sheet switch... it suddenly comes back, and everything works properly.
How the heck can I debug this? There's no error output in the console, the same data is getting sent every time (as far as I can tell...), it's not that one of the files is failing to be found (some of the CSS that is being applied is from the same stylesheet as the background...).
I'm at a total loss as to how to even begin debugging this one.
Edit:
If it's helpful, I just noticed that reader mode doesn't work on the refreshes the exhibit the broken behavior, even after the changing width trick fixes the background.
Edit:
This bug apparently also effects the mobile version, but instead of hitting the site-wide css, it's attacking my media-query based layout css.
You could, assuming you have the developer menu enabled, check Develop -> Disable Caches. This sounds like a caching issue.
If you don't have the developer menu enabled, enable it with settings (cmd+,) -> advanced -> show Develop menu in menu bar.
I'm seeing this in Safari 5.7.1 on Windows 7. It looks to me like Safari is actually ignoring commented out CSS. I removed all the comments, and now Safari seems to be behaving. But this is random for me as well, so I am not sure.
I'm working on building a website, and everything is pretty much done, but I'm running into issues that, from what I've read here, are a result of webkit in firefox and ie.
Here is one of the pages that is having problems:
http://prdesignstudio.com/Seattle.html
When you load it in Chrome or safari it works fine, the images are reflected at the bottom, and there are no images on a lower row. When you open it in Firefox or ie, on the other hand, there are no reflections, and the last image in the set is on a lower row. Another thing that's odd is that the problem doesn't occur on every page, and it also doesn't seem to be based on the number of images in the gallery. (The different pages can be found by clicking on portfolio)
Anyone know how to fix this? Also, if fixing it requires me to remove the webkit portions of the .css, does anyone know of something else I can do to get the reflections? They're not necessary, but I like them XD
All the page's code can be found here: http://jsfiddle.net/2DvSP/
Thanks in advance for any help.
As for the images appearing on a lower row and the occurance of this on not all but some pages, you have inline styles set
div calss="container" style="width: 2080px;"
If you increase the width, this problems does not happen in FF4.01 and IE9.
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 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.
After fiddling around with an issue I am having I have come to this conclusion:
my list Elements are displaying smaller in Safari on my Macbook than they are on Safari on my PC. IE, and Firefox are displaying properly also.
What might be causing this difference? It is hindering my ability to complete this design.
www.christopherbier.com/gbg
Please let me know if there are any css tags that might be causing this.
Here is my previous question that includes my css etc. CSS spacing issues with Safari?
Any help is appreciated.
You might want to consider including css reset stylesheet. You can find a good one here:
YUI CSS Reset
This basically "removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers".
Hopefully that will solve your problem!
My guess is that it may well not be a css tag that's causing the issue, but just a difference in defaults on the two different browser versions. Each version is probably tailored to the OS to some extent, and may look different, which is expected.
Overriding this default behavior should raise a warning flag, because you're changing the overall look and feel, and it may not match well with the OS layout in general. It doesn't mean don't do it, but it does mean that you might want to proceed with caution.