the site I am working on has a number of different overlays which are controlled by CSS as follow (with different properties for each but same way):
.box_4, .box_5, .box_6 {
position: fixed;
top: -1900px;
left: 50%;
z-index: 101;
width: 883px;
margin-left: -400px;
}
These properties get applied when I close the overlay.
However on the iPad something strange happens, when I scroll the site just to check it out some of the overlays appear and disappear as soon as I touch the screen again.
Could that be due to the css?
There are many issues with mobile devices and position:fixed;
Instead of positioning them outside the viewport, you better hide/show the boxes.
Some references:
http://www.8164.org/designing-for-the-ipad/
http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/
http://blog.mspace.fm/2009/10/01/iphone-mobile-safari-css-position-fixed/
Related
So I'm creating a new layout for my blog, www.thatgirlmag.com, and I want a fixed navigation bar at the top (which goes with you when you scroll down). I've written the CSS right (I think), but now I can't see it because it's behind the bar that shows up when you're logged in to wordpress. I could just move it down, but then viewers who AREN'T logged in to wordpress will see something weird, right? It looks weird when I view it from an incognito window.
I'm assuming there has to be a better way to do this. I just want the navigation bar to sit right at the top of the VISIBLE portion of my blog. Help?
Here's the CSS we're looking at
#main-nav {
position: fixed;
top: 0px;
left: -10px;
width: 110%;
height: 25px;
background-color: #000;
}
Also, I have the bar positioned at -10 and 110% wide because I want it to go 100% across the page (and setting width: 100% makes the nav bar just go across the width of the element, which has margins). There must be a better way to do that as well. Can someone help me? I'm not sure I'm explaining this right.
What you're dealing with is called z-index. You need to add a z-index value to a positioned object - like #main-nav - to place it in visibility context with other objects with or without z-index values and positions.
Briefly (from https://developer.mozilla.org/en-US/docs/Web/CSS/z-index )
The z-index CSS property specifies the z-order of an element and its
descendants. When elements overlap, z-order determines which one
covers the other. An element with a larger z-index generally covers an
element with a lower one.
Take a look at other answers to z-index questions on SO: https://stackoverflow.com/search?q=z-index And see Understanding z-index and The Z-Index CSS Property: A Comprehensive Look | Smashing Magazine
For the WordPress admin bar specifically: move it down (only for logged in admins) to account for not being able to override the 9999 z-index value in WP core CSS by targeting the admin-bar div:
body.admin-bar .header {
position:fixed;
top: 28px;
z-index: 1000;
height: 40px;
}
See http://wahldev.com/making-fixed-nav-work-with-the-wordpress-admin-bar/
Try adding a z-index to to main-nav. It would look something like this:
#main-nav {
position: fixed;
top: 0px;
left: -10px;
width: 110%;
height: 25px;
background-color: #000;
z-index: 9999;
}
I used a large number for z-index because wordpress might give a z-index to the div on top of that.
Summary: Responsively-scaled sprites sliding and occasionally displaying incorrect sprite.
Background:
I've googled and perused SO for answers to this -- and found a few, such as this one -- but they haven't told me anything I haven't already been over time and time again. I've been working on this over the past week, and I'm feeling extremely frustrated. :(
Problem:
I'm trying to responsively scale chip and card sprites for use in a poker game. I have the scaling working perfectly (and in-game everything repositions and scales perfectly according to table size), but the sprites appear to "slide" during its resizing, and occasionally showing the incorrect card. While endeavoring to discover a solution to this most unseemly behavior, I've encountered numerous sites using scaled sprites correctly, but I cannot for the life of me determine what I'm doing wrong with mine.
Example:
I've prepared a jsfiddle with only the relevant portions displaying the issue, here: http://jsfiddle.net/VsfZD/2/
Applicable CSS: (to satisfy the jsfiddle+code requirement):
/* Cards are 47x64 (spritesheet is 53 cards wide, so 2491x64 px) */
/* Spacer is 47x64 */
.card {
position: absolute;
width: 4%;
max-width: 47px;
z-index: 306;
overflow: hidden;
}
.card img.card_spacer {
display: block;
height: auto;
width: 100%;
}
.card img.card_img {
position: absolute;
top: 0px;
left: 0px;
max-width: none;
max-height: 100%;
}
.two-clubs img.card_img { left: -200%; }
.six-diamonds img.card_img { left: -1600%; }
.ace-diamonds img.card_img { left: -4900%; }
.card_back img.card_img { right: -5200%; }
Please, if you can help me fix this I'll be greatly in your debt!
Additional req's: css only. no frameworks, no bootstrap, no js. must work in IE8
Webkit's penchant for rounding decimals to whole numbers of pixels causes the sliding of sprites. Unfortunately, no amount of css can alter this behavior, rendering my above question impossible.
That said, there is still a way to use scaled sprites within webkit, though by necessity it uses javascript.
As you must ensure that the scaled sprite sizes are always in whole pixels, you should pick a sprite size ratio (such as 3:4) with as frequent (whole-number) multiples as possible, and then only update the displayed sprites' sizes when your scaling results in one of these. It isn't perfectly smooth, and definitely not passive, but it does allow for working, cross-browser scaling.
I've resized our sprites to 66*88, and using this I finally have scaling cards working. At the start of window resizing, javascript hides all of the sprites (cards, chips, etc.) and updates their sizes and locations upon completion. This effectively hides any jittering from the user during resizing, and greatly simplifies animation handling.
I am working on a site and I have to align the bottom of the right box (Affiliation) with the bottom of the right box (Contact Us).
The problem is, I can make it work in Chrome, IE and Mozilla and even Safari on Windows, but NOT when it is Safari on Mac. I don't have Mac but I am using Adobe BrowserLab to see how it is (and the client says it doesn't work :P)
I've tried several codes / CSS including #media but still no luck (if you see the code / layout is changing then it may be me working on it).
Both the markup and CSS is simple and standard one, just need help to make it work in major browsers, Chrome, Firefox, (modern)IE, and Safari on Mac.
Current code:
#bottom-aff{
display:inline;
height: 145px !important;
}
but as I said, I am working on it.
Please help, thanks.
Definitely not the most elegant solution, but it seems to work:
#contentleft {
position: absolute;
top: 0;
bottom: 0;
}
.postarea {
position: absolute;
top: 0;
bottom: 10px;
left: 0;
right: 0;
}
It basically lets the right sidebar decide the height of #content, and then forces the left content to expand to fill the remaining space. Content might get cut off if the left column is taller than the right sidebar.
Please try to use max-height,min-height property.
I am looking to achieve a similar effect to this website i found: http://www.august.com.au/
When on this website if you zoom in/or out ctrl +/- the background doesn't change. Only the content zooms.
I want to be able to set a background image for my website and have it so that the background image always fills the screen regardless of the screen resolution or zoom options.
I understand that you can use the width:100% to make it fill the page, however my understanding is that this is applied as the page is loaded and if the user zooms after loading the image will not re-sized.
Does any one have any suggestions on where to start with this one? I have tried search the web for information but wasn't able to find very much.
Also i am guessing this will be achieved using something like JavaScript and not css??
This worked for me in chrome, firefox
.someImage {
width: 7%;
height: 0;
padding-bottom: 7%;
background-image: url('../img/myImage.png');
background-repeat: no-repeat;
position: fixed;
bottom: 5%;
left: 5%;
background-size: 100% 100%;
}
Turns out there is a nice Jquery plugin for this:
http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/
Seems to work as i expected.
The search section in my site www.anahatainternational.org displays correctly across FF, Chrome, and Safari. But in Safari mobile it displays in the middle of the page.
#search_section {
position: absolute;
right: 490px;
top: 10px;
z-index: 5;
}
Thanks.
I would suggest making few changes to the layout of the page so that you could make the #search_section relative to the header.
I have create a skeletal structure for it. http://jsfiddle.net/AACuy/
Also remove the left, top and position:absolute properties.
There are too many classes in the site for me to make changes using firebug and show the result.