I don't really know how to phrase my problem. My page is working fine and all, responsive included (resizing my PC browser). But when I open the page from a browser in an actual phone, the blue section with icons gets all messed up.
There's apparently nothing wrong with it on the code. The thing that is driving me mad is, and as soon as I change anything from the inspector, it corrects itself (but that's something my users aren't going to do). It doesn't matter whether I change the color of a random text or anything, it reacts correcting itself whenever I make a change in the CSS on the inspector.
Can anyone help me figure this out? I'm attaching a screenshot from my phone before and after changing CSS on the inspector:
In which mobile did you try to show it?
I don't know if you solved it but i try to see your website from my smartphone and i show it correctly.
Related
So i recently got this CSS style for Facebook which is acting really wierd.
It's using a fixed background image and whenever i scroll it's doing this:
Click
Wierd thing is: This occurs on every style with a fixed background, if i completely remove said background the site works like a charm.
Still, I have no idea if it's just faulty code that causes the problem or if it's the browser itself.
I'm not that good at CSS but if I knew where to search or what could cause the issue, I could probs fix it myself.
Sooo... If anyone wants to take a look at the code, here it is: Click
Thanks in advance to anyone who decides to put up with my shit, heh
edit: changed link to Dropbox temporarily
I'm doing some browser testing with a responsive site, and ran into an issue with Safari that I cant track down the answer to. On the top of their page, they want a clickable phone number so that mobile devices and Skype users can easily call.
On every other browser it looks like it's supposed to:
The Right Way!
In safari, however, I get this:
The Wrong Way!
(rep is still too low to post pics, thus the Gdrive links)
What's going on here? Ive formatted the number portion to look as follows:
<h3 id="phone">Seattle <a id="ph-number" href="tel:2065272000">(206) 527-2000</a></h3>
The link works in every browser, it's just safari that's having issues with the display portion. Can anyone help me out with this (probably simple:) issue?
Adding as an answer for future searches:
Hard to tell from just the HTML unfortunately. Any way to shine some light on CSS? What font family are you using (it may be missing glyphs somehow)? Double-check font-size?
this is the picture that my page looks like
this is the picture when i want to print my page
The height is different, when the css class is the same. I really don't know about this problem. Is there anyone experience this problem. FYI, I am using google chrome. When I use firefox, this issue doesn't appear, but the other thing is a mess and I want to do this on google chrome. Please help me.
In my application, I am including one page within another via an iframe. I'm working on a quick prototype here, so I don't want to take additional time right now to implement something fancier].
Everything looks good except for IE10 on Windows 7. From what I can tell, the style sheet of the iframe is being added into the cascade of the style sheet for the page and causing strange display errors. I'm a little dumbfounded this is even possible.
If I comment out the iframe, everything renders correctly.
I can also see the styles changing as the iframe loads:
Pre-iframe: http://screencast.com/t/8qcl2U4Uuy
Post-iframe: http://screencast.com/t/fzR9esWsq
Anyone else experience strange behavior like this?
Thanks in advance.
Thank you for your reply. My coworker was actually able to help me trace this back to an issue with the IE10 developer toolbar.
I was able to create a file that replicates the issue: https://dl.dropboxusercontent.com/u/1686497/iframe.zip
If you open the index, you'll notice that there is no margin on the body. While you have that page open and you open the F12 Developer Toolbar in IE10 (10.0.9200.16540) on Windows 7 (at least), you will see the body becomes padded and the parent window font switches to Times. Hope this helps someone!
I have a strange issue with jQuery mobile. I am using the latest version (1.1.1), though I also had this issue with 1.1.0 .
The issue being that my icons sometimes do not appear, as in, the image itself does not appear. I test this in chrome. I am not able to reproduce it on purpose, it is a problem which seems to occur randomly. When it does occur, it looks like the top header in the image below. However, when I open the element inspector in chrome and uncheck/check the background (or indeed any) property, the icon magically appears. Does anyone have any clue what is going on?
An image to illustrate the problem:
Edit: to clarify, my associate has had the problem as well. This happened in chrome, but on a different computer, so I doubt any nasty plug-in or so is playing evil here.
Edit2: a couple of things I have tried to resolve this problem.
preloading through javascript: implementing a line of code to make sure the background is downloaded.
statically adding a to the page to see if the controls are downloaded.
The strange thing is that nearly everything is drawn, apart from the background-image. This occurs for all the icons by the way, so the ones in listviews etc as well. Navigating through pages or reloading does not matter.
actually your app is not able to locate the jQM's CSS so I would recommend to use the CDN's for getting your css.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
Hope it helps.