Has anyone ever seen this before, Chrome is calculating my values, even in the body too specifically. Meaning the values are in the millionths if not billions decimals places:
Example:
width: 281.6477355957031px;
I do not have this problem with IE. I normally wouldn't care, but these fractional pixels are really screwing up an effort to add a sticky header to a common grid control we've developed to work with OData.
This issues seems to happen when just a body tag is on the form with no other lower level controls. I am baffled.
Does anyone know of a way to reset the entire html page or even better, just reset a particular element so that every element beneath it calculates using whole or near whole values?
thanks!
EDIT
Just to be clear, I have taken everything off the page except the main container, with no styles and Chrome is calculating this parent html tag, with a value of 1508.1817626953125px. This element has no styles attached
To answer my open question, the cause is Visual Studio 2012. Since I was using localhost to run my site, some plug-in or setting is set to force chrome that specifies dimensions much more specific than any normal human would want. Upon not using machine name instead of localhost the dimensions are back to normal. If i find the exact setting, i will report back later.
EDIT:
Upon further discovery, its not VS, its my browser zooming. At certain zooming in Chrome pixels in the development console are calculated to a sub pixel level. I imagine due to some inner division calculation. This throws off my calculations for allowing the a staic table header at different zoom levels. I will be forced to deal with CSS pixel rounding in my own calculation to handle these.
Related
I am having an issue with a specific mac that is not displaying a certain website I have built correctly. Every other mac and pc I have tested displays the website correctly but this one specific mac in all browsers on it is displaying incorrectly the issue I am getting is inline block elements are not next to each other, I have all the 'hacks' in place and like mentioned this displays correctly on every other computer.
This question here is the exact same issue but it doesnt seem to have been resolved.
https://discussions.apple.com/thread/6650689?start=0&tstart=0
I know I could try floats but I would rather find the route of this cause, does anyone know of any reason this might be happening?
If browser renderings vary only on a single or a few machines, fonts are a possible culprit. Make sure all computers use the same fonts to render your page, actually even that the same version of the font is used.
A lot of fonts get slightly modified over time, often the kerning (space between two characters) or the hinting (how the curves that describe fonts should be mapped to pixels on the screen) might change, resulting in very minor differences in the width some text consumes when being displayed.
If indeed the font version is the culprit: Remember that visitors of your page might also have this "bad" version of the font. So it is advisable to try to improve your HTML layout.
I've often observed that leaving a few percentages empty helps to deal with such font issues. For example: having a div (width=100%) that contains two elements in each "row", the first one a label of about 1/3rd the width, and the second one being some control, taking up the rest of the space. Having them defined with width:33% and width:67% often results in the case that the second part is laid out below the first part instead next to each other. Changing the widths to something like width:32% and width:65% often fixes this, as it allows for some rounding errors in the browsers when laying out the elements.
I am a self-taught web designer with a staggering 3 sites or so under my belt. I just finished the first page of a website for a client who is a friend and therefore a lot more patient than a "real" client would be.
I love the way the sites looks, it is fairly consistent in the spectrum of popular browsers, and overall I was quite proud of it until I realize a major problem that to be honest is about two steps away from making me drop my dream of becoming a web designer.
When using Chrome, Safari, or older versions of Explorer the website's layout falls apart if someone has their zoom set to anything other than 100%.
It is frustrating me to the point of near depression. I used a div to surround the whole body, and the pages layout, which in this case is a MENU is done almost entirely with ULs (unordered lists) positioned absolutely.
The site is made up in such a way that all the parts connect (almost like a puzzle) and if some parts are out of line, it is dreadfully obvious.
I heard the zooming rounds up figures and could call for a couple of low alpha pixels here and there, but in my case some block elements are literally 25-50 pixels out of place.
http://www.stevemarcella.com
No need to get your dreams crushed just yet :> There is always hope.
First thing you should do is check all of the errors, which according to validator are 536 errors on the homepage.
I suggest you run the validator and correct errors one by one. It could solve your problems. First error I noticed is that you have a div element outside of body. You should keep everything inside the body tags.
This is outside of body.
<div class="wrapAroundBody" id="IdWrappingWholeBody">
Hope it helps.
I have been looking into responsive design using Omega subthemes. It seems very powerful when combined with the context and delta modules. However, I am having difficulty understanding how to selectively remove parts of a page in a responsive website. When I say remove, I don't mean hide, but actually prevent the specified content from rendering (that way a mobile browser doesn't have to waste time downloading content which is never displayed).
Omega provides the ability to apply different CSS to a page based on browser size (by using media query tags). Delta and context modules to be used to change the arrangement of page elements, or even remove page elements, based on certain conditions. However, I have not been able to work out how to combine the two.
For example, is it possible to, not only apply different CSS at different browser window sizes, but also prevent certain page content being rendered at the same time?
I have not been able to find any information on this. I am guessing since page content is rendered on the server side and media queries work on the client side, that it is probably not possible. I would be interested to know if anyone has any ideas on how I could achieve this.
You should take a look at the Context Breakpoint module. It allows you to set Context conditions based on the end-users browser size, aspect ratio and resolution.
http://drupal.org/project/context_breakpoint
Not sure if works for you but when I do a display: none - everything disappears and the surrounding divs shuffle nicely:
#include breakpoint($phone){
.l-header_search {
display:none;
}
}
Dear FB Developer Team,
we have an issue with the FB.Canvas.setAutoResize() function of the app iframe.
The frame extends vertically to the height of the first request, but on subsequent requests to pages with a lower height, the iframe doesn't resize vertically.
While we tried the FB.Canvas.setAutoResize() function, it seems not to work.
Could we somehow solve this issue?
Would be great to receive an answer here.
Best,
Max
This is a known Facebook issue, they're renaming setAutoResize to setAutoGrow for exactly this reason.
When your page shrinks in size you should use FB.Canvas.setSize to lower the height https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/
There have been several bugs reported about how
FB.Canvas.setAutoResize doesn’t set the height of the iframe correctly
in some scenarios. We have been trying to fix this and and have pushed
various fixes to ensure that it works correctly for the case when the
iframe grows in height. We however came to the conclusion that it is
hard for us to do this accurately when the iframe shrinks in height.
As a result we are renaming this function to FB.Canvas.setAutoGrow so
that it accurately reflects its functionality. If your iframe is
shrinking for whatever reason we recommend that you use
FB.Canvas.setSize with a height parameter to set the iframe height
explicitly.
As part of this change, you should be able to use
FB.Canvas.setAutoGrow today. FB.Canvas.setAutoResize will work for the
next 90 days and we will remove support for this method on January
1st, 2012. Here is some sample code to test the grow functionality.
https://developers.facebook.com/blog/post/565/
I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.