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.
Related
I've recently been exploring on a site in my free time, and ran across a peculiar circumstance. When viewing an image (direct link) from imageshack, it displays in two (or more) completely different, and sometimes blurry, dimensions.
For instance -- where an image might be small in Chrome or Vivaldi, appears in full scale in Safari or Firefox. Given the differences in the background, as I believe the former two are webkit based, where as the other two use their own engine, I'm not sure if this has something to do with it, as I couldn't detect any outright styling that would force such a difference.
The links are identical when viewed between browsers, on the same machine. Same results occur when attempting on another machine. Any idea as to what might cause this, and how to remedy it for a consistent experience?
Below is a single image link for an example -- one of many instances.
Image
My thanks ahead of time for the input and any feedback or assistance!
I've tried using em as well as px, but I cannot get a certain line of text to display at the same size in every browser. I know I'm reaching for a lot but I'm tasked with achieving a pixel-perfect development based on a mock-up, and need a certain text to span the width of an area left-to-right so that it all flushes from side to side with an image.
My last option is to use an image, which I don't want to do. I know that you can specify certain CSS parameters that work on the different browsers such as -moz-SOMECSSPROPERTY:some value; but can you do this with the font size so that one browser has it at one size, and another as another. Oddly enough too though this is actually only happening in the browsers that are on different OS's, i.e. - on my Mac it's as intended, and on Windows (same browsers) different.
Thanks for advice.
It won't be enough to specify the font on a per-browser basis, because (as you noticed) you'll also run into inconsistencies across platforms and devices.
If you want the text to always fit the image flush, the text pretty much has to be an image, too.
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.
I got a really weird thing going on.
On my currently developing website the background positioning of social and e-mail buttons differ a lot between my mac from other computers.
This is how it looks on my screen on resolution 1600 x 1000 (I also checked on other so it's probably not the case)
(source: mikolajgrzyb.com)
The Question is: Why does it happen and how can i fix this problem (to display correctly on every computer)?
You're mixing em with px when you position the backgrounds in the CSS, which is probably the reason why it looks different.
.bluebtn {
background: url("../images/icons.svg") no-repeat scroll 0 -2.7em transparent;
}
You should use em for font-sizing only.
Check some of these links out for an explanation for when to use what:
em, px, pt, cm, in…
Why em instead of px?
em should be used when you want to define something relative to the size of characters in the current font. Unless you have overridden
font style (using px units for example), this will be affected by the
choice of fonts in the user's browser or OS if they have made one, so
it does not make sense to use em as a general unit of length except
where you specifically want it to scale as the font size scales.
Helpful suggestions
Preload the images. The first time hovering over your buttons makes it lag.
The lists on your right are annoying. Consider a more user friendly approach where it doesn't scroll back up after you mouse out, use the click-to-open click-to-close approach. The approach you're using now makes it difficult to navigate between the list items.
It also seems to get stuck at times.
Consider using a different color than blue for text that aren't links. It can be confusing to the average users who are used to blue text for links.
You misspelled processing, responsive, cutting, preparing and layout.
I should always be capitalized.
I want to know does CSS behaviour changes with different operating system. My css is working bit different for vista and win xp proffesional for same version of browser. I was testing my application on vista + ie8 and xp + ie8. It worked bit different.
Officially the CSS behavior should not change when using the same browser on another operating system(for example FireFox 3 on Windows, MacOs or Linux). Calculations of width and floats are calculated by the browser and not by the OS. However there are some factors which which will cause the site to look a bit different in another OS.
One of the issues you are getting when using another OS (or even another machine) is Font support. If you use some fonts which are only available on Windows Platforms (or are normally only available when installing a certain application) the browser will use another font, this may cause some render differences. I can even imagine it is also possible that a font is a bit different in size in Linux compared to the same font in Windows).
Another issue you are getting are form elements (like textboxes and dropdowns). These are different for each OS and especially dropdown boxes may behave different in various operating systems (the pulldown part may vary in size and textboxes sometimes have a "3d" border and sometimes only a line). You will even notice these differences when switching in XP from the XP style (the blue/green/gray one) to the classic style (the old school gray version) the dropdownfields will be a different style (and if you are aligning them with other elements you will see the size change). But most of the times these differences are only a couple of pixels and are mostly not noticed by users, but for a designer/developer it can be a bit annoying.
What change did you see? There could be minor difference due to the OS theme - elements such as buttons, dropdowns, scrollbars could be styled/sized different.
You can observe some differences even if you change themes in XP (Classic vs XP look).
There are a few things that may change cross-platform:
Fonts
The Windows "core fonts", which are supposed to be cross-platform, are not on most default Linux installs. Also, 10pt in Firefox on my Ubuntu doesn't display the font at 13px like other browsers, it's slightly bigger. Some fonts may have a different line-height too I think.
Form widgets
Buttons, textboxes, textareas, fieldsets and dropdowns are different across browsers and platforms. Opera, for example, uses its own Vista-esque skinning of form controls and each skin is different. Chrome seems to use its own stuff too.
Screen resolution
If the design is fluid like Wikipedia you will end up with very long lines of text that may be difficult to read.
Hardware
The user's hardware may also cause changes in colours or other graphical anomalies.
CSS is platform independent. But, it is browser dependent. Different browsers may implement CSS differently but different platforms with same browser will not show any change. It will be better if you can post your CSS here, so that we can debug. Of course there may be minor differences in the elements because of the theme.
There are a lot of things that can differ from one system to another. There may be differences even between two systems with the same operating system and the same browser.
CSS in itself is an independend standard, and doesn't change. However all browsers doesn't interpret css the same, and the CSS standard doesn't cover every aspect of how the page should be rendered. Also, CSS covers how code that is correct should be interpreted, but if you have something that is incorrect in your code, it's up to each browser to try to interpret it best it can.
Especially text rendering can differ a lot, as there are many factors that control it. Things like the installed fonts, the smoothing algorithm chosen and the user size setting decide how the text is drawn. There are different versions of the same font, so for example Arial on XP and Vista doesn't have to render exactly the same, as details like kerning rules and font smoothing hinting can have been reworked.
Some page elements (like buttons, form fields and slider bars) can inherit their look and size from the operating system and the user settings in the system, so they may look different.
Yes. It may change.
Element styles may be differently rendered in different visual styles[themes] of the OS.
For eg:
In some themes there will be rounded corners for fieldset and in others it won't be rounded.
Problems I am facing in different operating systems are :
1. Text with fixed width is coming in two lines in vista whereas on xp it is coming in same line.
And one major problem I am facing is some part of my design is getting distorted in VISTA + IE8 which is rendering fine in XP + IE8. To make my application compatible with IE8 I have used
tag.