This problem appears on every bit of text, no matter if it is table,div or something else
As you can see on every right side of text elements, 1-2 pixels is missing. Adding of padding never helps
Any suggestions please?
You could try to following fix for webkit browsers.
Replace the button span with your text class..
#media screen and (-webkit-min-device-pixel-ratio:0) { /* Safari and
Google Chrome only - fix margins */ your classname { margin-top: –1px;
} }
Have you set the viewport meta tag to specify its width and zoom scale? Maybe that would help? It's documented in the Apple dev docs
You could try using -webkit-font-size-adjust.
Look here for more info on it:
http://webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/
This is happening probably because of
Inherited CSS property
If CSS does not seem to fixed it, check html doctype. Some tags although in rare cases do not work with certain doc types.
use !important attribute in CSS to enforce a certain rule be applied which discards all others.
try to set display: inline-block and a negative text-indent to <span> elements (embedded inside a webkit-only media query)
I have tried to deal with this problem for a month. Here what I have tried and found out. But I could not get actual solution;
I have followed up this thread, unfortunately nothing worked.
Tried several simple html documents with most possible doctypes,css,font-size,font-styles reset ..etc did not worked.
I discovered; when using with a remote url, it seems work fine, rendering is ok. When using embedded html pages, causing the problem.
In Titanium issue list; I have found out that, they represented as a Webkit bug.
https://jira.appcelerator.org/browse/TIDESK-136
Solution might be upgrading webkit version but Titanium has a lot functionality over webkit. So upgrading would not be an easy task.
My solution to this problem in TideSDK in windows was to do the following on the font in question:
font-weight: 600;
Maybe not the best solution for your application, (maybe you don't want to add any space or weight to the font since it seems you may have a much larger table of data to display) , but acceptable by my client.
Related
I have a website (templenaylor.com) that displays fine on firefox or chrome on macs, but on certain pcs displays like so:
How it should display:
I know this is somewhat a vague question without a codepen but was wondering if anyone has encountered this problem before or if it is just my version of chrome. I do not have a lot of PC's to check the site on so I am asking here for input.
Thank you!
Basically, different pc have different length and width . for an example, small imac will display your website just fine, where else a bigger version 27inch imac have different width and size, therefor , it will react differently on screen.
You need to check your css, for an example, its a good practice to use percentage for responsive website..But at a certain situation, its a a good practice to use # media rule. you could set your css to #1300px width(#media rule), Study on this http://www.w3schools.com/cssref/css3_pr_mediaquery.asp regarding the #media rule. Im pretty sure this will solve your problem as i had previously face this problem with my last project. But if that doesnt solve your issue.
You might want to explore more on webkit extensions. https://developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions
i hope with these. it will solve your problem. Cheers.
I viewed this website in Chrome(v56.0.2924.76) on a laptop and it produced the second screenshot (the one you want). However, I believe that the issue relates to the header background image height. You have it set to 100vh, but try 100vmax, which is relative to 1% of viewport's larger dimension. Here's the CSS:
#header {
height: 100vmax;
}
I am stuck at a website error and need help.
My website quantum-leap
Opens perfectly well in Mozilla Firefox, IE.
But it does not open well in Chrome.
Apparently the problem is with max-width tag in the table.
I have tried almost every solution mentioned, like, wrapping table in div, display=block,etc.
But nothing seems to work. It will be great if someone can help me out with this.
Try to remove css attribute white-space: no-wrap from <marque> on the moving text.
However, the consequences is the moving text will no longer become one line.
Just out of curiosity, have you try to use bootstrap or foundation.
Because, it has a lot to offer and I'm quite sure it will remove you from this kind of issue.
using the new vmin css property to get the right font size. works absolutely great!
div.sample { font-size: 1.5vmin; text-align: center; ... }
the problem occurs when the page is resized. for example, if the page is made smaller, the font-size is unchanged, making everything out of kilter.
first, is the browser supposed to handle this?
second, what's the best way to handle it? it seems that if I use a trigger to set the font-size, then I would need to know the font-size values in javascript as well as the css, creating a situation bound to fail.
It looks like vmin is behaving in Firefox.
Here's a jsfiddle I made for testing:
http://jsfiddle.net/noahcollins/Sc8gm/
It sounds like you're seeing the issue in chrome? As Bazzz pointed out, there's a Chrome bug that's still open. I was able to replicate it in Canary. The CSS Tricks article can help you get around it with some javascript if you're so inclined.
Another thing to keep in mind: support for vmin in mobile browsers is very limited at this time, so it will be an issue in the case when users rotate between portrait & landscape.
Supposedly that's a known bug, as stated by CSS-Tricks. They also have a javascript workaround, have a look here under the head "Bugs!":
http://css-tricks.com/viewport-sized-typography/
suggested workaround by CSS-Tricks
To fix this issue (allow resizing without page refresh) you need to
cause a "repaint" on the element. I used jQuery and just fiddled with
each elements (irrelevant, in this case) z-index value, which triggers
the repaint.
causeRepaintsOn = $("h1, h2, h3, p");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
vmin is a nice idea for mobile web design, but browser support is limited. Furthermore, the browser support that does exist exhibits some strange behaviors. For instance, because vmin calculates the font size as a function of the current size of the screen, when you focus on a text input element you are going to have trouble because sometimes the text will resize based on the much smaller window you have with the keyboard open. So at times your text input will spontaneously become tiny, which is incredibly annoying. I therefore recommend using vw, to maintain text size based on the width of the screen. It lends itself to a better user experience. vh has the same issue I talked about above.
See this link - why are the multiline textboxes draggable?
Is this Firefox bug? It just spoils the design like anything.
Even the same in happening is Stackoverflow's textbox. I am using Firefox 5.0
Thanks in advance:)
Edit:
See these photos of SO itself:
This is a feature that's been included since Firefox 4. However, you can switch it off by including resize: none in the css of the given Textarea(s).
That's something happening since some time now even on Chrome and maybe other browsers too. I think it's to allow a better experience for the users who need to type text in the textarea, so I definitely think it's not a bug.
But it indeed can mess up your website layout. You have to use some CSS to fix it, like
#yourtextarea {
width: /* fixed width here */
height: /* fixed height here */
}
In case the above doesn't work, you may also think about use min-width, max-width, and the height equivalents.
I won't mess up with this anyway, since it's a browser feature and so it's something useful for the users.
Why are the multiline textboxes draggable?
They aren't. Dragging just selects the text inside them. They can be resized though, which is great as it lets users make textboxes bigger so they can see more of their text if they have typed a lot.
Is this Firefox bug?
No, it is a feature. I think Chrome got it first.
Here is the url to the site in question: http://www.katiesamsonlaxfest.com/index.html
The site looks fine in all the browsers except IE6 and below. I would like if possible to find an easy css fix because as you can see the content is not contained within the divs.
I recommend the YUI CSS Foundation (Reset, Fonts, Grids). I find far less IE issues when building sites this way and often it requires almost no IE fixes/hacks once built and tested in Firefox.
It may take a little effort to learn, but I consider this to be the easiest fix because it almost eliminates the need for IE specific CSS and it saves you time in the long-run.
There is no "easy fix". You need to address the problems one at a time.
You can add "IE6"-specific CSS by adding things like:
.box {
margin-left:20px;
_margin-left:15px; /* this is the ie-specific fix */
}
...etc.
Also, transparency doesn't work with 24-bit PNG files. Use 8-bit. They're only titles, you don't need 24-bit anyways (or just use GIF). This is why your titles have strange boxes around them.