CSS ignored when viewing on an iPad - javascript

This is an issue I've only just come across today and was wondering what could be causing such a strange issue.
I've had a look at a few example websites and they all experience the same issue. I've opened up the Chrome developer tools to check and the CSS relating to these elements appear under "#media all".
Basically when viewing a site on an iPad running iOS 8.1.2 it seems to ignore the CSS for specific elements completely. This is what it looks like on an iPad (bad):
http://i.imgur.com/wd4xnq4.png
Now this is what I see when using Chrome on Windows (CSS loads and is used, the good version...):
http://i.imgur.com/3aMNPXF.png
I've never seen this before and the CSS isn't loaded in with JavaScript with JS disabled so I'm completely stumped. Help please.
EDIT
Here is the code. I've double checked and it seems as if a class of .active is added when you click on it to show it is the current selected item.
EDIT 2
Here is all the code instead of just the buttons themselves:
.product-view .product-collateral{
width: 100%;
float: left;
margin:15px 0 0;
}
.product-view .product-collateral #product_tabs ul.r-tabs-nav{
width: 100%;
float: left;
}
.product-view .product-collateral #product_tabs ul.r-tabs-nav li{
float: left;
margin:0 5px 0 0;
}
.product-view .product-collateral #product_tabs ul.r-tabs-nav li a{
padding:10px 15px;
display: block;
background-color: #bcbec0;
color: #fff;
}
.product-view .product-collateral #product_tabs ul.r-tabs-nav li.r-tabs-state-active a{
background-color: #fff;
color: #333333;
}
.product-view .product-collateral #product_tabs .tab{
width: 100%;
float: left;
background-color: #fff;
padding:15px;
}

What browser are you using to test it on the iPad? Google chrome also? Are you using browser-specific rules for your CSS? Some elements need to be declared multiple times according to the browser in use.

I've figured out the issue. I wasn't the developer that originally worked on this so it was a head scratcher to begin with.
It turns out the resolution of iPads fell directly in between the mobile view port size and the desktop view port size so so I just need to place the mobile CSS inside a new media view port specifically designed for iPads. I'll post my findings but this should work (hopefully).
EDIT
Yep, so it turns out there was a media query that was set to big and fell between the two target sizes and the iPad size was right in the middle.
So essentially it was just a display: block; that was outside a media query which meant all the CSS was missed and thus only displayed the text. Solved!

Related

List items in an unordered list are overlapping only in Internet Explorer, everything works fine in all other browsers

I have created the following list item which works fine in chrome and every other browser that I have tried. It, however, does not work in IE.
I have created this application using the vue framework and have had multiple issues with Internet Explorer that have been able to be solved but I have been unable to find anything where other people have had a similar issue to this.
For some reason, once an item within the list has been selected the list then works as normal, but on the initial load of the page, the list is as shown in the images above. Also, the list is unable to scroll in IE until an item within the list has been selected.
Here is the list being CSS.
ul{
background-color: white;
padding-top:10px !important;
padding-bottom: 10px !important;
height: 100%;
max-height: 450px;
overflow: auto;
}
And the code used for the scroll bar that works fine in other browsers.
.col-4, .col-8{
padding:0;
overflow: hidden;
overflow-y: -moz-hidden-unscrollable;
}
html{
-ms-overflow-style: -ms-autohiding-scrollbar;
}
#-moz-document url-prefix() {
.list-group{
margin-right: -16px;
}
}
::-webkit-scrollbar {
display: none;
}
Any help will be much appreciated.
Only IE still honors overflow rules on the html element. try changing
html{
-ms-overflow-style: -ms-autohiding-scrollbar;
}
to
body{
-ms-overflow-style: -ms-autohiding-scrollbar;
}
To determine which Emulation mode IE11 is using in your development environment use the Emulation tab of the f12 dev tool.
If you are upgrading an old application to the newer framework, remove any presentation attributes (align, scroll, background etc) from the html tag.

Getting two divs to share one background image

So I'm trying to get two individual divs which are close in proximity to share one background image but I'm not sure if this is possible. I've uploaded two pictures, the second being designed for a smaller screen (just to further explain what I mean) http://imgur.com/a/2dypd . I can't imagine two separate background images would work as they wouldn't line up when resizing the window.
The only solution I can think of is creating two plain white divs to overlay on one single div but that seems like a dodgy way to go about it. I'm not expecting a hunk of code to be written for me, maybe just explain if it's possible and a reference so I can learn. Cheers.
Based on #cale_b's comment, you can set the same background to both div's and then use the background-position property to do the delusion of background sharing.
Then you can use media queries to make it look good in mobile too.
Here you've got a simple example that looks like the one you posted:
#wrapper {
width: 800px;
font-family: sans-serif;
}
#top {
height: 200px;
margin-bottom: 20px;
background-image: url("https://placekitten.com/800/400");
background-position: 0 0;
line-height: 150px;
color: #FFF;
font-size: 32px;
text-indent: 50px;
}
#bottom {
width: 500px;
height: 100px;
background-image: url("https://placekitten.com/800/400");
background-position: 0 -220px;
}
#bottom ul {
list-style: none;
}
#bottom ul li {
display: inline-block;
list-style: none;
padding: 0 10px;
line-height: 50px;
color: #000;
font-size: 24px;
}
<div id="wrapper">
<div id="top">
I'm a banner
</div>
<div id="bottom">
<ul>
<li>I'm</li>
<li>a</li>
<li>menu</li>
</ul>
</div>
</div>
As I understand, you want to use only one image copy of one image over two div and you dont want to use any overlay.
So you can do the following:
On the bottom div, use background-position-y:-100px or any other desired value. This way you push the image upwards.
This looks promising so far, but you will face an issue with the size of the background size specially if you are making a responsive web page.
I would say that background-size:100% 100%for both div would do the job yet it will make the image stretching (unless you go really responsive).
I still recommend using an overlay or even a ready made image. But if you insist on using two div then the above steps should be enough while you have to make your design suitable for this image.
N.B. keep in mind that you might need to use background-repeat:no-repeat

Making a container to distribute over all the window screen

I am working on a web api, in UI the container is just distributed to certain amount of browser window where there is content but I want to distribute it all over the browser regardless of the content.
CSS
.container {
margin-right: 10px;
margin-left: 10px;
margin-top:20px;
padding-top:70px;
*zoom: 1;
border:none;
background-color:aliceblue;
}
Screen Shot
In the below screenshot it can be seen that the lightblue(aliceblue) is just distributed upto some extent and remaining was grey. I would like it all aliceblue
Add height: 100%; to your container and it should be fine

Iframe Scrollbar css

How do I go about changing the css of an iframe scrollbar?
My problem with the current scrollbar in my iframe is the frame is not very wide and the scrollbar appears bulky in it and takes up too much space.
Using "scrolling="no" makes the scrollbar disappear but then the user cannot scroll.
By the way, My browser is Google Chrome.
This is the css to change the scrollbars in iframes in chrome
body {
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
html {
overflow-y: auto;
background-color: transparent;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
display: none;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height: 30px;
background-color: transparent;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 16px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #666;
border: 1px solid #eee;
-webkit-border-radius: 6px;
}
You can make it by getting scrollbar element in the frame, for example use jquery:
$("#iFrameId").contents().find("-webkit-scrollbar").css("width","5px")
But as others said - it's not a pretty solution.
You can't style a scrollbar (other then to turn it on and off) with CSS at all.
There is some proprietary stuff which lets you apply some styling, but this is supported only by IE and Opera.
Chrome provides no mechanism to do this.
As a commenter points out, WebKit now supports a different proprietary mechanism for styling scrollbars. I've no idea if the Chrome build of WebKit has this merged or enabled though.
You could look at replacing the scrollbar wholesale with JavaScript, and jScrollPane appears to do a reasonable job of not breaking the usual interaction rules.
That said, changing the appearance of user controls is something I'd try to avoid, and making something users need to aim a pointer at smaller sets off the flashing red light marked "Fitts's law".
A better solution would probably be to "Not cram so much information into so little space".

CSS rollover problems with Internet Explorer 7

I wrote some CSS in my HTML code to create rollover buttons. Then i tried to run it with IE 7 and surprise! it doesn't run. In fact it shows both the button and underlying rollover. How can i get around IE's inability to cache background images? Preferably using CSS but javascript 'will' be tried.
Sample CSS:
#Menu
{
width: 100%;
height: 32px;
margin-top: 93px;
padding-left: 13px;
}
#Menu a
{
height: 32px;
line-height: 32px;
width: 123px;
background: url("img/menu.png") top left no-repeat;
background-position: -123px 0;
float: left;
margin-left: 3px;
text-decoration: none;
color: #1e1e1d;
font-size: 12px;
text-align: center;
}
#Top #Menu a:hover, #Top #Menu a.active
{
background-position: 0px 0;
text-decoration: underline;
}
Well firstly you are giving conflicting instructions ...
background: url("img/menu.png") top left no-repeat;
background-position: -123px 0;
... the background is already positioned using shorthand.
I assume that your regular and hover states both share the same image, so why not do both with shorthand? Remove...
background-position: -123px 0;
... and for your hover and active states, use ...
background-position: bottom left;
Then have both your states in one image, one below the other (which I assume is what you've been trying anyway).
Image rollover issue comes mainly because of downloading image every time on hovering a link or tab. This flicker is caused by the delay when the primary image is removed and the rollover image is loaded (even though they are technically the same image, Internet Explorer prefers to treat them separately).
check it out complete fix for rollover issue:
http://faqspoint.blogspot.com/2011/12/ie-rollover-problem.html
if you are using the :hover pseudo-selector, then it won't work in IE unless it is an anchor tag. Try changing the button into an anchor. You can still make it look like a button using css.
If you want to use javascript, then have a look at jQuery.
Try making sure your CSS background syntax is correct. Some browsers let you specify the properties in any order however IE will choke. You should specify the attachment in the form X Y (horizontal then vertical). You currently have top left. Make it left top. Also you have no-repeat at the end of the line, it should come just after the url declaration and before the position declaration.
The order for CSS background shorthand values should be:
background-color
background-image
background-repeat
background-position
background-attachment
eg. background: #fff url(example.jpg) no-repeat left top fixed;

Categories