I have a select.
It displays well in Chrome, but not in Firefox.
My code is here: jsfiddle.net/oxtdxq5h/1/
Issue seems to be white-space:pre-wrap or -moz-pre-wrap. I haven't tested it as I just seen your code from my mobile.
After investigating I came to know browser does not support such breaks. Chrome has took an exception over it.
Related
Today i upgrade my phone to iOS7 and find out some weird problem .
(blog.niwyclin.org)
This is a test post page of my web site
On desktop browser it looks fine.
I use Responsivator to check, and its perfect, like this (i.minus.com/ipy6XHEepJcvf.png)
but on browser in iOS7 (include safari and chrome)
(i.minus.com/i2B2Ul5f09WL8.png)
(i.minus.com/iDM5uVFIvegKe.png)
it break a word but i don't know why.
It has white-space: pre set.
Any issues with the my css(less) code?
I found out the solution.
From http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
it seems webkit on iOS 7 changes overflow-wrap property.
so i add pre {overflow-wrap: normal;} manuale, and it's done.
I got a really strange problem, and after so much tries and research I can't get out of it.
I have a website, but SOME (just 5% of visitors) people with the SAME version of chrome, see the text flowing out of divs and text overlapping. It's very strange because I tested the website on all chrome browsers using browser testers, without any problem. And in internet explorer or firefox this problem never happens...
A page is located here
And here are some screenshots of what SOME people see (maybe you won't see this in chrome)
click here
Maybe it is because of the font face I am using? Or maybe some bad coded CSS?
Please help me out of this!
Thanks a lot!
I see you use .svg font. Recently I was hunting some Chrome font rendering bugs and saw this:
http://code.google.com/p/chromium/issues/detail?id=95102
This seem very similar to issues you are having. You could try to serve some other font type to Chrome and if this would fix that.
If you don't want or can't serve some other font type to Chrome, the only thing you can do is wait until Chrome version 24 is out to all users which should be soon (I can't find any announcement)
I tested it in
Chrome 23.0.1271.97 m
Chrome 26.0.1371.0 canary
Chromium 25.0.1334.0 (169326)
# Windows 7 x64 and your page seems fine for me.
I'm working on a specific page:
http://portfolio.jrstrauss.net/work/cg.html
and Chrome is doing a bizarre job of rendering the page. It renders perfectly in all the other browsers, Opera, Safari, Firefox, Camino, but Chrome does not give the same results.
I change nothing in the markup and refreshed, but now the layout is all jacked up. I was working with Chromium yesterday and started having the problem, but it was acting bizarre-- I would load the page and it would render fine every single time, but when I would refresh, it would completely change. Then tried it in Chrome and had no issues, so I passed it off as a Chromium bug. Now tonight it started doing the same thing in Chrome, even though it didn't before, so now I'm starting to wonder if there a problem with my markup. Though I see nothing. Does anyone else see a problem with my CSS or HTML?
If it looks good in Chrome on your computer, let me know via comment. I've taken a screen shot to show what it's supposed to look like and what it's doing weird in Chrome/ium.
Renders correctly:
http://i.imgur.com/qp8mu.jpg
Renders incorrectly (only in Chrome and Chromium):
http://i.imgur.com/iIhdI.jpg
It renders correctly in chrome for me, but it seems highly likely to be a problem with wrapping. If I reduce the width of your div.innerContentBox from 800px to 600px, then it looks exactly like the problem you've shown. As I said, I can't reproduce the problem, but it seems to have something to do with insufficient width.
I'm having some problems with a certain piece of code which sits in my site; this error only occurs in Internet Explorer 7.
Rather than post all my HTML/CSS markup here I have put up a version of the site here.
As you can see I have "Widgets" in columns, for some reason IE7 adds an extra space under the Widget Header while FF displays it fine without any space.
This error does not occur in IE8, FF3, Opera, Safari or Chrome.
Can anyone suggest why this occurring and if possible, a fix?
Thanks in advance!
Add this css to wgt-wrap and it should behave.
zoom: 1
Google for hasLayout for explanation.
[EDIT] This discussion provides more insight into this IE bug. Why does Internet Explorer need the "hasLayout" flag?
Unfortunately IE 7 doesn't run very well on Ubuntu so I'm unable to reproduce your error, but have you tried resetting your CSS with a stylesheet like Reset CSS?
There is also a great site about browser quirks that you might want to have a look at.
Did you start by zero'ing out all of your element by doing a CSS reset? I see you have a few different elements in your div, it's possible that one of these has a default marin in IE7 that is throwing everything out of wack...
The problem is on my blog - blog.dynback.com.
Right panel goes down in Chrome, and stayed normal in all other browsers including Safari 4. And without Firebug its hard to find where is the problem.
You have errors in your markup, fix those first, at least the missing end-tags.
Validate here: http://validator.w3.org/check?uri=http%3A%2F%2Fblog.dynback.com
I think it has do to with the JavaScript. I've noticed the issue appears after code snippets are highlighted. Chrome uses a different JavaScript engine than Safari. Maybe that's the problem.
Try to shrink the width of #main_content