I have a div class"selection-detail-container" and I am displaying it as an pop up window.
Css on div is
.selection-detail-container {
display: none;
position: absolute;
top: 30%;
left:10%;
z-index: 100;
width: 65%;
background-color:#003768;
border:1px solid #003768;
padding-bottom: 20px;
margin-bottom: -20px;
}
Now this div is opening properly in all browsers except Safari. On the iPad Air, on Safari, when you scroll away from the first page of content and click on any piece of tagged data, the window(div) opens off the screen/back at the top of the content/browser window. In order to see it, you have to scroll back up to the top of the document. This is not an issue on desktop environments.
Please help.
Related
I'm building a web app with React/Redux and Foundation as a styling library.
What is the best way to have a sticky footer ALWAYS appear on the screen, even when the on screen keyboard pops up? As of now, the keyboard covers the footer, but I would like to see the footer right above the keyboard.
The CSS for the footer...
#footer {
width: 100%;
background-color: #4c66a4;
color: #fff;
position: fixed;
left: 0px;
bottom: 0px;
height: 60px;
text-align: center;
}
I have the following CSS rule for div element in my webpage
#menudiv {
position: fixed;
height: 100%;
margin-left: 5px;
width: 150px;
background: transparent;
z-index:3;
min-height: 680px;
}
This is a menu on the left on my page, and it's fixed positioned. It works well on normal PC displays, while on iPad there is an issue.
When I load the page and I touch the screen with the finger scrolling down, the #menudiv moves together the rest of the page. When I release the finger, the #menudiv returns to its fixed position and then I can scroll up and down the page and it's no longer moves. What am I doing wrong here?
Try to use left property. Also if possible then use top, right, bottom also(as its fixed div)
#menudiv {
position: fixed;
height: 100%;
left: 5px;
width: 150px;
background: transparent;
border: 1px solid transparent;
z-index:3;
min-height: 680px;
}
I have a Twitter Bootstrap based Website with some strange issues on regular old link buttons (like this: http://jsfiddle.net/RK3RC/)
HTML
<a class="button" href="http://jsfiddle.net/">Click Me</a>
CSS
.button {
background-color: #bc4b4e;
color: #ffffff;
display: block;
border-radius: 45px;
border: none;
text-decoration: none;
position: absolute;
font-size: 18px;
padding: 14px 50px;
margin: 0px;
border-width: 0px;
line-height: 20px;
white-space: nowrap;
min-width: 0px;
min-height: 0px;
-webkit-transform: rotate(0deg);
opacity: 1;
left: 220px;
top: 20px;
visibility: visible;
}
.button:hover {
background: #d35559;
}
The buttons work absolutely fine and as expected in desktop browsers, but are not responsive in mobile browsers (touch devices). If you click them through touch, nothing happens - the buttons are non-responsive. However, interestingly, if the link is to an anchor tag on the same page, it will work (just not to an outside page).
Any thoughts/suggestions? I've scoured the Web but haven't found people with the exact same issue, which is a bit odd in itself.
Ok, got it figured out.
It was actually because there was a JQuery-based slider, on a different part of the page, that had a touchenabled setting (which allows the user to go through the slider by swiping). This was affecting the button's response to touch. Once that touch setting was turned off, the buttons everywhere respond as normal.
Thanks for all the help and suggestions. You guys rock.
I am in the process of designing a web page and I'm using the following CSS to create the page header with the main header image centered in a 1000px width page, and for a repeating edge image going across the top of the body and underneath the header to spread across the whole browser page width.
body {
font-family: Tahoma;
background-color: #0184AE;
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
margin: 0;
position: relative;
}
.whole-page {
width: 1000px;
margin: auto;
padding: 0;
text-align: left;
position: relative;
border-radius: 0 0 15px 15px;
}
.header {
width: 100%;
height: 120px;
color: white;
background-image: url('/images/header.jpg');
background-repeat: no-repeat;
font-size: 10pt;
margin-top: 0px;
margin-bottom: 0;
padding-top: 10px;
border: 1px black none;
position: relative;
}
The CSS above works, except when a toolbar appears. I'm using Chrome with a SEO toolbar and it displaces the centered header image correctly, it pushes it down underneath the toolbar so I can see the whole image.
However, the repeated body image is not displaced at all and the toolbar covers the top so many pixels. This puts the whole thing out of whack.
I've tried a few options in the CSS, but so far nothing seems to work. I'm guessing here, but I think the toolbar draws itself using CSS that 'exists' under the body tag.
Can anyone suggest anything, I'd like either the whole header pushed down, or not. Just so it's consistent.
Using the Chrome developer tools (hit f12) you can inspect (click the magnifying glass icon on the bottom) the toolbar element. Doing this you can see that it is indeed inserted to the body of document. This will unfortunately result in the actual behavior you are seeing. In other words, this is not your fault but the fault of the toolbar developers.
One (ugly) work around is to throw an additional div around your content and apply the background to that.
E.G.
HTML
<body>
<div id="notBody">
<!--Rest of your headers, content, etc here -->
</div>
</body>
CSS
body {
font-family: Tahoma;
background-color: #0184AE;
margin: 0;
position: relative;
}
#notBody {
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
}
in your header class change to position: absolute; and use top to set how many pixels you want your header to be from the top of the page.
.header {
position: absolute;
/* all your other styles */
top: 200px;
}
I am using fancybox to allow users to send messages to one another. I have a wierd issue where the fancybox's close button shows four times in google chrome but works just fine in firefox.
Here is the css for the button
#fancybox-close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background: transparent url('fancybox.png') -40px 0px;
cursor: pointer;
z-index: 1103;
display: none;
}
Hmmn.. Seeing example page would help.
This shouldnt happen... but im going to throw in a guess that overflow: hidden; could help.
try adding:
background-repeat: no-repeat;
you might want to mess about with the width and height etc too