I'm having unexpected issue on mobile Safari and Chrome that I can't replicate on the desktop. I was modifying a nav to fixed at the top, but found when I scroll down the footer hides the nav on the mobile browser.
I recorded an example to show you what I mean:
What's expected and works on desktop browser (footer slides under nav):
https://drive.google.com/open?id=1bmUMsfEpauuXx2Jhyf7l2YQrORj6E__z
What happens on mobile Safari and Chrome on iPhone (footer slides on top of nav):
https://drive.google.com/open?id=1-ri1DqmWPY8hrUP4LaUr-aGpnfH3eVhC
Site is available here:
http://michaelespinosa.com/projects/eskimo/index.html
Here is the css for the nav:
#eskimo-sidebar {
position: fixed;
top: 0;
left: auto;
right: auto;
width: 100%;
height: 200px;
margin-bottom: 60px;
z-index: 99;
}
Here is the css for the footer:
#eskimo-sidebar {
position: relative;
background-color: red;
}
I feel like I must be missing something obvious. Appreciate the help in advance.
Your website has a lot of problems, especially on mobile. What about the issue you mentioned, try to set z-index: 10 (or 100) to the element with eskimo-sidebar id.
Related
I am working on testing a site on all browsers before starting device adapting with media queries.
I have found an issue: when any element is dynamically affected, the overflow:hidden property does not work anymore for that element on Chrome.
You can see it here: http://germanalvarez.net/5/
After loading the site, click on the MENU button on the bottom right of the panel, and click on any section:
If you are in Chrome, the top part of the panel (classified as .titlePanel) will no longer remain overflow:hidden, so the overflowed part of the icon will go out of the titlePanel (see image). This only happens when changing section.
If you are in Firefox, even after changing section it will remain hidden, so here, it works OK.
I found a supposed solution on the web: style elements on its tag. If you check my code you'll see .titlePanel has this opening tag, but it doesn't work either:
<div class="panel titlePanel expanded" style="overflow: hidden;">
This is caused by the use of position: fixed :
.titlePanel [class^="icon-"]:before,
.titlePanel[class*=" icon-"]:before {
font-size: 16em;
left: 79%;
line-height: 100%;
margin: 0 0 0 50px;
position: fixed;
}
As you're using fixed, your pseudo-element is totally out of the flow. It's no longer affected by any overflow: hidden on its parents.
To fix it, remove this fixed position and use absolute instead :
[class^="title-"] {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
[class^="title-"] i {
position: absolute;
right: 0;
top: 0;
}
I am using position: fixed and bottom: 0 to affix something to the bottom of the screen. The name, however, appears to go off of the screen, on my 11" Air, and you can see the site here. I've posted my CSS code below for the div.
Broken JSFiddle: http://jsfiddle.net/MgdQv/
#credits {
color: #363636;
bottom: 0;
padding-right: 10em;
text-align: right;
position: fixed;
width: 100%;
opacity: 0;
-o-transition:1.5s;
-ms-transition:1.5s;
-moz-transition:1.5s;
-webkit-transition:1.5s;
transition:1.5s;
}
#credits:hover {
opacity: 0.8;
}
Add right: 30px (30px being the value of margin-right of parent body) and it should behave as expected.
Edit: and maybe remove padding-right: 10em. Forgot that I had desactivated it in Firebug before answering...
Also do not post link to a website: after you've fixed your problem, your question will become meaningless to future visitors of this question because the link will have changed... Please post relevant HTML and CSS reproducing your problem (and a fiddle)
You only must add an height-attribute to your #credits.
I found fluidvids.js and am using that on my site, but it only accounts for width. I have some users who have more of a panoramic, narrow height viewport for their browser, and can't see the controls on my video because the window is so wide (900px) that the video width doesn't scale for the height. I'd like to have responsive height, and have looked at several posts on AListApart, etc, and can't find the obvious solution. Let me know if you have any tips or see the glaring thing I'm missing.
Just learning about CodePen, but my relative links to all the js seems to make that a little complicated (sorry).
Here's the link: http://chrisphoto.com/masters2/index.html#chapter-2
Here you can get some awesome tricks on responsive videos in CSS, youtube iframe too.
For both Vimeo and Youtube videos, wrape the iframe in a div giving it a class "video_wrapper"
.video_wrapper{
margin: 82px auto;
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0; width: 80%;
}
.vdo_span iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80%; /* Adjust height to your own need */
}
I'm fixing a prestashop theme and I'm about ready to tear my hair out over a very small issue. I have a search positioned absolutely beside my navigation, but the top is 10px lower than firefox in chrome, so basically, if it is centered in firefox, it hangs low on chrome. below is my search box css:
#search_block_top {
background: none repeat scroll 0 0 transparent;
height: 30px;
position: absolute;
right: 20px;
top: 215px;/*this is correct in firefox*/
z-index: 1005;
}
you can see the site in here: http://goo.gl/sfFYT reset is given my stylesheet and I have tried manually setting search block's font-size and line-height to zero, but it hasn't worked. I have no idea what to do with this. Thanks a lot for helping.
Sorry, I didn't view the answer before mine, and gave a totally duplicated answer. withdraw that. and here is the new one:
#menu {
overflow: hidden;
}
#search_block_top {
top: 205px; /* you can modify the original rule */
}
the main idea: create a BFC for #menu with overflow: hidden;
PS: that code is unbelievable. :(
stay away from that, and have a nice day.
Hey all - I've been googling this as much as possible, but nothing I do seems to help.
I've been working on a website (www.philipdukes.co.uk), and although the nav seems to work fine in FF, Safari, chrome, even IE6 (miraculously), on my system here it fails miserably in IE8: the navigation links don't work.
I hover on them, get the rollover animation, but they're not "clickable". They're basic text links, text-aligned off the screen, and then the area that they represent should be clickable. The image that fills the space isn't the link. If I remove the image I can click the area, and if I remove the text-align I can click the link text (but only the link text).
It's driving me nuts, as its the last thing I need to sort before everythings fully working...
The code for the nav bar is here:
<div class="navHolder">
<div class="nav current-home">
<div id="home"><img src="images/nav/home.png" alt="home." />home.</div>
<div id="bio"><img src="images/nav/bio.png" alt="biography." />biography.</div>
<div id="media"><img src="images/nav/media.png" alt="media." />media.</div>
</div>
<div class="nav2 current-home">
<div id="press"><img src="images/nav/press.png" alt="press." />press.</div>
<div id="pdr"><img src="images/nav/pdr.png" alt="plane dukes rahman trio." />Plane Dukes Rahman Trio.</div>
<div id="contact"><img src="images/nav/contact.png" alt="contact." />contact.</div>
</div>
and the css styling is here (any optimization here is also welcome!):
/*
*
* BEGIN NAV SECTION
*
*/
.navHolder{
position: relative;
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
.nav, .nav2 {
width: 600px;
height: 50px;
position: relative;
overflow: hidden;
margin: 0 auto;
padding: 0;
top: 0;
}
#home, #bio, #media, #press, #pdr, #contact{
position: absolute;
top: 0px;
overflow: hidden;
width: 200px;
height: 50px;
background: url(images/nav/nav-back.png) 0 0 no-repeat;
}
.nav a, .nav2 a{
position: absolute;
z-index: 100;
display: block;
top: 0px;
height: 50px;
width: 200px;
text-indent: -9000px;
}
.nav img, .nav2 img{
position: relative;
z-index: 50;
width: 200px;
height: 50px;
}
#home, #press{
left: 0;
}
#bio, #pdr{
left: 200px;
}
#media, #contact{
left: 400px;
}
.current-home #home, .current-bio #bio, .current-contact #contact, .current-press #press, .current-pdr #pdr, .current-media #media{
background-position: 0 -246px;
}
You are missing:
.nav a, .nav2 a {
left: 0;
}
That should fix the problem. Always set a vertical (top or bottom) and horizontal (left or right) placement when using position:absolute.
UPDATE
Anytime a background is set, it starts working as expected. Through a lot of testing, you will probably find a different way of fixing the problem. But this is what I would do:
BEST WAY:
Either get rid of the img tags or hide them, and instead apply them as background-image to your a tags.
Change the position on the a tags to relative instead of absolute as they would be the only visible child of the parent div
QUICK WAY
.nav a, .nav 2 { background: url(/images/shim.png) }
Where shim.png is a 8-bit fully transparent, one pixel PNG. A 8-bit PNG shim is smaller than the same dimension (1 pixel) gif, and everything will still work as planned.
Serve the same styles to IE8 that you serve to IE7, and then put the following element in the document head:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
This will make IE8 emulate IE7. Because you are having no issues with IE7, I presume this would work for you.
Not entirely sure what's going on there, but seems to be some kind of problem (maybe an IE8 bug) with the layering of the link and image elements. When I change the z-index of .nav img, .nav2 img to any negative value instead of 50, then the links become clickable.
I'm not sure if that is a practical possibility in this case, though, since the negative z-index might cause the images to no longer be visible.