On an existing website, one block of text is displaying too large on an iPhone, and part of it is white. I've tested it on Android and on an iPad, which pushes the rest of the site down too far, so it doesn't line up with the background. It is the proper size on an iPad, but still showing up white. The text in question is in the top right corner on this page: http://www.ecodzign.com/waterfx2/index2.html
This is how it looks on an iphone:
I've disabled text scaling, and I've tried using inline css, with no effect. Only phone numbers are displaying white, so I assume the iphone is creating some sort of link to call those numbers with the phone, but regardless, that can't be white with a white background.
I apologize for the awful table design and lack of validation, but I'm simply not budgeted to redo the entire site properly. There are no validation errors that have to do with text or formatting, I doubt that has anything to do with what is going on.
This could be the difference between things like pt vs px vs % on your iOS device for that specific block.
After checking your code, I think this is it in fact:
font-family: Arial,Helvetica,sans-serif;
font-size: 8pt;
color: black;
font-weight: bold;
The font-size: 8pt I would bet is the culprit.
There looks to be a lot of inline CSS on the site.
What it you tried this
<span style="color:black !important;">702.233.3200</span>
utilizing the !important keyword.
That most likely has to do with the CSS of the website. Your best option would be to create a mobile friendly site or removing <span style='color:black;'> from the html that wraps these numbers.
Related
In searching for the best way to vertically center a div (age-old dilemma), I stumbled across an issue with missing fonts when flexbox is used.
See this CodePen for live example of what I'll describe below:
http://codepen.io/Mattaton/pen/PNzWEQ
-- All of my testing is on Windows 7 using Chrome --
I used flexbox to do the horizontal and vertical centering on a form. That worked fine until I realized that if a font is missing, the form inputs will run outside of their containers.
In this example, I have 'Open Sans', Helvetica, Arial, sans-serif; for the default font-family on the body. ($font-set1 in the CodePen)
That works fine, but if Open Sans is removed, $font-set2, Helvetica is missing on most Windows PCs and so it should fallback to Arial. Which it does, sorta.
The font face itself changes as seen in the input placeholders. The font looks like Arial, but the input sizes change to something I assume the containers didn't expect and they don't expand to compensate/contain the inputs.
Moving on to $font-set3 where Arial is the first font and installed on Windows PCs, then the inputs look correct again.
All of this only happens when flexbox is used for centering. If I disable flexbox on .form-wrapper then the entire form expands to the full max-width of 800px set on .signup-form.
I'm not sure if this is a bug I can do nothing about or if there's something I can do to fix it. Anyone know?
Here's an image describing the problem:
In the Google Web Toolkit Showcase, the Menu Bar example (http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwMenuBar) displays the menu bar's background as a gradient. However, when I use their css (clean.css from the gwt package), I get a solid background.
Does anyone know how to get the gradient? There are no explicit references to 'gradient' in their css file. FYI I'm testing this with iceweasel 3.5.15 (which is a essentially firefox 3.5.16).
thanks
It is not a gradient css style. Instead a background image is set hborder.png . You can see the style/background image as shown using Chrome Dev Tools or Firefox/Firebug
(The above comment is a bit illegible and I can't edit it).
hborder.png is specified in the css file, e.g.
.gwt-MenuBar-horizontal {
background: #e3e8f3 url(images/hborder.png) repeat-x 0px -2003px;
border: 1px solid #e0e0e0;
}
I would expect this to create the gradient, but it doesn't seem to be having any effect.
I have two tricky issues that are intertwined. I have an inset box shadow vignette on four sides of a box but I have clickable images inside that I can’t click because the shadow/vignette is above the images (which are at z-index: -1). I read some about using the pointer-events: none but I think it is affecting everything in the box when I try to use it so it hasn’t worked. Any suggestions on how to make these images clickable but still behind the shadow?
Also, I’ve read through previous posts about scrolling speed with the box shadows. I’ve made it as small as possible but has anyone figured out how to make that go faster yet? I really like the look but the functionality doesn’t work if the scroll is going to be so slow.
Here are links to the site as constructed so far.
http://www.official-design.com/TEST_PROJECT.html
http://www.official-design.com/TEST_GRID.html
Please be nice – I am a novice at this – I’m an architect not a web designer. Any advice would be greatly appreciated.
Why do you have z-index: -1 for the links? Remove that and the links work fine, and the shadow is still visible.
I would also recommend applying the box shadow to the img or a elements directly, rather than the td that contains them.
Removing the negative z-index won't work with inset shadows. There are 3 things to do to achieve what you need:
Remove superfluous float: left from #makeMeScrollable
div.scrollableArea img rule. This is to ensure that the <a>
element wraps the image properly.
Remove box-shadow properties from .SHADOW rule.
Add the following CSS for your links:
.SHADOW a {
display: block;
-webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25);
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25);
}
Note that I've used rgba value instead of #ccc, since the shadow will be overlaid on the image.
As a side note, there is no need to name classes in all caps. It decreases the readability.
I'm working on a mobile version of a site and I'm emulating the iOS interface. There's a few places on the site where there's supporting background image sprites (chevron turns into loading gif / greyscale icon turns into colored icon).
It works flawlessly in desktop Safari, and is spotty on mobile Safari. The images will load sometimes, not others; the icons will load but the chevrons won't; they load on my iPhone but not my iPad and vice versa.
I'm getting no errors in the Debug Console. Here's the HTML and CSS:
CSS:
footer li a i {display:block; height:24px; width:24px; margin:0 auto;}
footer li a i.foo {background:url(../images/sprite-jobs.png) 0px 0px no-repeat;}
footer li a:hover i.foo {background:url(../images/sprite-jobs.png) 0px -24px no-repeat;}
HTML:
<li><i class="foo"></i>Text</li>
I have also found that if I quit Safari via the multi-task bar and restart the app all background images return, however simply clearing the cache has no affect.
I experienced a related issue yesterday - I have vertical menu in which the currently selected page's menu item has a background "blob" graphic to the left of it. This works fine on all browsers. I then added the same background image as a rollover to the menu, using "a:hover". This works fine on all browsers but mobile/iOS Safari. When I use the menu on the iPad the blob-graphic completely disappears at some seemingly random interval and never comes back unless I update the image and html files on the server. (Clearing the Safari cache has no effect).
This is my guess as to why it happens and how I solved it...
The :hover behaviour on touch-screen devices such as the iPad/iPhone is broken (because you can't really hover on a touchscreen). So the effect of using a hover seems to be that the browser believes the image associated with the hover is redundant and therefore doesn't cache it. However when a page featuring the hover-image is next loaded, the request to the server will detect that the image-file has not been altered, and thus deem it unnecessary to retrieve it (from the server), and therefore try to use the local cached copy which, I am presuming, doesn't exist (or at least not correctly). This causes the image to disappear (all copies of it on the page vanish).
Thus if you use the same physical image-file for the background of the hover-item and for the current-page menu image (or any other image on the page), both/all will effectively disappear when the browser decides to use its (non-existant) cached version.
One solution is to have two identical image files, and use one for the hovered-over menu-item, and the other one for anywhere else it's required. Then it doesn't matter if mobile-Safari discards the one associated with the hover (as there is no rollover-effect on those devices), but it won't effect the graphic associated with any other menu items (e.g. to mark the current page or whatever).
Can you let me know if that solves your problem? I couldn't find anything about this particular bug despite hours of searching.
It's probably not disappearing per se but sliding twice as far down the image as you intended on Retina displays, a la:
enhancing image quality for iphone 4 from 72ppi to 326ppi
Simple test: Double the image vertically and try again. You'll most likely see a 1/2 size version of what you intended appearing there, because of the iPhone 4's annoying way of handling background images.
I have a mobile site which I'm testing on the iPhone, and unlike most other sites, I'm not able to hold my finger on the screen to get the 'copy' menu to appear (with the draggable handles to select an area to copy). Nothing happens at all on my site.
I've tried adding the following to my style sheet but it hasn't made any difference:
-webkit-user-select: text;
I should also state that I have the following also in my style sheet and within the page head:
-webkit-text-size-adjust: none;
I've got these as I didn't want the content to be scalable, and just wanted the content to span 100% of the device width.
Would the implementation of any of the above be causing the lack of selectable text on the site? Out of interest, I tried the flickr mobile website which also is not scalable and uses 100% of the device width like my site, and that also doesn't seem to come up with the draggable/select area for copying when you hold your finger on some text.
Does anyone have any idea why this is or how I can make the text content (or any content actually) selectable for copying/pasting?
Thanks
are there any elements that may be obscuring the items by overlaying them, etc? a z-indexing issue, perhaps?