I have a page with a button with a background image (sprite). When I do not put my sprite in a table, I get repeated images scattered diagonally across the web browser, and no gallery. In HTML source view, everything looks fine, but if I go to the Inspector, it looks different, repeating buttons that I created diagonally from right to left going down.
Update:
I just realized that another way to get this working was to change:
<a href="../Gallery/Create" class="l_new" />
to
<a href="../Gallery/Create" class="l_new" ></a>
This is no hardship. The only thing I can think of is this must be some bug in my version of #renderbody used with _layout.chtml (I'm using the one generated by visual studio).
Looks like this is going to continue being a mystery but I'll keep my question posted, just in case.
The l_new style contains sprite info:
.l_new
{
width: 170px;
height: 36px;
background-position: -43px -155px;
background-image: url('img/sprites.png?v=6');
background-repeat: no-repeat;
overflow: hidden;
display:block;
}
I could not find anything unusual about the HTML, except the fact that it is in a section tag which I've never used before, and I do not see any javascripts running.
If I enclose the sprite in a table, everything is normal.
Here is what it looks like with Chrome's inspector. It does the same thing in IE9. I have not posted the HTML source, but believe me it's totally normal, and does not reflect the output below.
And here is an example of the index.chtml file which results in the issue:
#model List<AutoShow_MVC.Models.GalleryModel>
#using AutoShow_MVC.Models
#{
ViewBag.Title = "Index";
}
<h2>Photo Gallery</h2>
<a href="../Gallery/Create" class="l_new" />
Related
We are developing a slightly bigger solution using angular - and currently cordova for our native builds (we will change that soon).
In our App we have multiple Input fields. When focused the complete site automatically gets shiftet towards top to display the input field properly - that's the standard behavior of iOS/Safari as far as i am aware of.
Our Problem is that, sometimes, when we enter the input field the page gets shifted a bit too much towards the top. (the amount of shifting is completely random but always relatively small)
So if we leave the input the complete html-tag is slightly offset and there is a space between the bottom of the display and the html-tag itself.
The html-tag itself keeps it size, so its leaving the screen on the top-end.
I have added a red border to the html-tag to hopefully make it more clear:
how it should look (red border at the top is visible)
shiftet html bottom 1 (red border at the top is not visible anymore)
shiftet html bottom 2 (red border at the top is not visible anymore)
Basic html structure
<html>
<head>
...
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no">
...
</head>
<body>
<app-root>
<home-component>...</home-component>
</app-root>
</body>
</html>
css:
html {
height: 100%;
float: left;
display: block;
border: 2px solid red;
}
body, app-root {
display: block;
}
home-component {
display: flex;
flex-direction: column;
height: 100%;
height: -webkit-fill-available;
}
If I add a margin-top to the HTML tag, I can slide it down far enough. If I set the margin-top to a negative number, the HTML tag will align itself correctly again.
I have tried several things now including absolut positioning, playing around with vh, px, %, etc. or the reworking of the whole html/css structure. Also i checked the meta viewport (see html snippet).
Perhaps I should add that we don't move or animate any elements via js or css and that scrolling is only allowed in certain components in our solution
On the android devices or as a pwa the app works flawless. So i think it must have something todo with the virtual keyboard of safari/ios.
This problem is driving me nuts ... i hope someone can help me or direct me into the right direction.
So this is my first question here on stackoverflow, so please dont tear me apart ;)
Ok, so I am working on a javascript application. One feature is a help page for the application. The way I am trying to do it is to have a button that opens the help page - .html - in an iframe contained within a container div.
This works just fine, but I run into the well-known issue of iframes not scrolling in iOS(i.e. on iPads and iPhones).
There is a common fix for this, which involves setting overflow rules in the css for the container div.
So the initial CSS is something like:
#iframeContainer {
position:absolute;
left:0px;
top:0px;
width: 750px;
}
#iframeContainer iframe {
{
width:100%;
height: 600px;
}
and the css with the iOS fix is something like:
#iframeContainer {
position:absolute;
left:0px;
top:0px;
width: 750px;
height: 600px;
-webkit-overflow-scrolling: touch;
overflow: scroll;
}
#iframeContainer iframe {
{
width:100%;
height: 12000px;
}
The overflow rules are added to the css for the container, but in order to work, you have to set a height on the container. You also have to adjust the height of the iframe itself. If I leave it at its initial 600px, it never overflows the container div and there is no scrolling. If I don't set any height at all on the iframe, it hardly shows anything at all. So I have to set the iframe's height to contain all of the contents of the HTML file, which comes to 12000px.
All of this works, and the scrolling issue on iOS is fixed. But here's where I run into the issue in question.
The HTML page being loaded into the iframe has within it a bunch of anchor links that link to other places on the same page. After applying the iOS fix, those anchor links no longer work at all. Nothing happens when they're clicked.
I am reasonably sure that the reason is because when I set the iframe's height to 12000px, the HTML page behaves as though it is all displayed on one page, in which event, nothing happening is the appropriate behavior for anchor links.
So I think understand what is going on, and I'm just wondering if anyone has any ideas on how to make the anchor links work while keeping the iOS fix in tact. If I decrease the iframe's height to make the anchor links work, then less and less of the HTML page will show up within the iframe. If I remove the iOS fix all together, the anchor links will work but the scrolling won't work on iOS.
Open to anything. For the time being, I've abandoned the idea and the 'Help' button just opens the HTML page in a new tab/window.
I built a grid layout using a Codrops tutorial and my own knowledge. The grid is setup using display:inline-block; and nth-child to remove padding from the last element so they do not break to the next line. As the grid size changes, I use a different nth-child in the media query to remove padding from the last element, whether it be the 3rd element, 2nd element, or the 1st.
Everything works swell in all desktop browsers, but does not work on iPad.
For some reason on iPad, the grid is breaking in the wrong place, which looks awful.
I don't know where to begin to test this bug because it works fine when scaling the browser window down. I've tried some testing with iOS simulator to no avail. However, what is interesting, is on the initial page load the grid works fine, then once fully loaded, the grid breaks.
You can view the problem here (on iPad): http://www.eugeniacameronfoster.com/new/paintings/
Thanks!
There are a few issues that a CSS Tricks article points out.
Basically you need to remove the space between the divs in your grid, so that instead of
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
you need to put
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
I will put in a vote for you to just bail on the inline-block idea and go with flexbox or box-sizing: border-box;
There's a workaround that doesn't require to change the html markup.
Using a negative letter-spacing of -0.31em on the parent ul and then resetting the letter-spacing in the li the space between the lis disappear.
ul {
letter-spacing: -0.31em;
}
li {
letter-spacing: normal;
display: inline-block;
}
An example can be seen here: http://jsfiddle.net/c67U4/
This trick is used in particular in PureCSS grids that use inline-block instead of floating elements.
I have attached two pictures, the first shows the "desktop" of the webapp I work on, some of the icons you see open dialogs made of a <div/> containing an <iframe/>, but while on a normal pc it all works properly, on the iPad it seems there is a problem with the z-index of some elements, as shown in second picture.
The small red rounds with number inside are defined as follows:
.countComunicazioni {
position: relative;
background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center;
height: 35px;
width: 35px;
color: #FFF;
top: -105px;
left: 120px;
z-index: 0;
font-weight: bold;
display: none;
}
.countComunicazioni p {
margin-top: -5px;
padding-top: 10px;
}
The markup is a <div class="countComunicazioni"/> tag and a <p/> tag inside.
I also noticed that now the problem also appears in Google Chrome V22, the numbers in red circles are always on top even if they have z-index == 0 and the dialogs have z-index > 1000.
As per this bug report ( http://code.google.com/p/chromium/issues/detail?id=144518 ), the change seems to be intended, even if I would bet it'll broke many layouts, not only ours.
This problem was not present in previous versions of Google Chrome, nor is present on Firefox V15 or Internet Explorer V9, where everything is rendered problem.
How can this problem be solved? I'm no CSS expert, so I must admit I have tried little, if anything, so far... And also, who is "right" here? Is our markup incorrect, or does the problem lie in google chrome new rendering strategy?
EDIT
It seems I've been able to solve the issue shown in the two pics: all the dialogs generated from my web app are placed inside a <div/> with position:fixed placed on the very top of the body, now I tried to move the div to the very bottom of the page, and the layout seems now correct.
There is one more problem though: when opening a modal dialog, the opaque layer that is supposed to be created between the dialog and the below content, is actually created above it, see new screenshot.
How could this problem be solved? Does it require modifying our javascript or is it an issue with jquery ui itself?
Just found out myself that the way that chrome 22+ handles z-index has been altered.
Check out this awesome explanation here that I didn't write here...
http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Basically the way I understand it is that elements which have
position: fixed
now get counted with their own z-index layer so you'll have to adjust your pages accordingly to suit.
Hope that helps!
I developed a good site layout which works like a charm in Webkit and FF based browsers... but in IE 7 and 8 everything get broken up like.
I've never seen so much difference between Safari/Chorme and IE. I tried different DOCTYPEs but there was no difference.
If I remove all the jquery css everything works fine.
You can see it working on [removed]
Can anyone hint me on how to solve this mess?
You have a compatibility issues, I think you need to override the ui-state-default and .ui-state-hover classes on the buyitui.css file to fit IE.
You can use firebug in firefox to go throught the css files.
To overide the css, create one css file and put all the overrides on this file and place it on the bottom of all the css files. Assuming you make sure you are not using inline style sheet.
EDIT:
You need to override this three:
<div class="clear"/>
<div class="separator" style="width: 950px; margin-left: auto; margin-right: auto; float: right;"/>
<div id="pie" style="float: right;">
The Problem seems on the clear class you have above the separator. When you do clear both, all the floating is cleared and the separator is getting up of the page with the height exanding almost all over the page.
Try to change this and you will see the changes:
This could not be the exact solution, but it really points out the problem on your pages.
on the clear class
remove the clear:both; or make it clear:none;
on the separator class
add float:right and margin-right:200px;
on the pie id
add float:right; and margin-right:200px;
the jquery accordion was what was breaking everything, regeneratd and problem solved (just the regular no standars on IE)