im new here, I have a page http://www.worldbellydancefestival.com/dance-costumes that the footer can not properly stay on the bottom, i've added clear to the footer block but it is not working. could you please help. many thanks.
the footer css:
#footer{
width: 980px;
margin: 10px auto;
position: relative;
clear: both;
overflow: hidden;
/*border-top:1px solid #ce09d0;*/
/* padding-bottom:20px;*/
background:url(/images/nav-bg-blk0.png) repeat 0 100%;
max-height: none;
}
Related
Below is the code that I'm using to create a footer on my website. It looks the way I'd like it to, but have to scroll down to see it on a page that doesn't have much content on it. I'd like it to be at the bottom of the screen without having to scroll down no matter what size the screen may be.
Does anyone know how I can achieve this? How can I get the footer to stay at the bottom of any screen size without have to scroll down to see it?
<html>
<body>
<br><br><footer class="site-footer" style="font-size: 12px;">MORIKOBOSHI©</footer>
<style>
.footer{display: block;
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 10px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
}
</style>
</body>
</html>
I made a webpage with a sticky header that works fine on a desktop but not so well on mobile. For example, on an iPhone, if you turn your phone on to landscape mode, safari's tool bar will cover my sticky header. Similarly opening a link to my page on instagram will result in the same issue (instagram header will cover mine).
Heres's the HTML
<div id="container">
<div id="infotab-mobile">
<div id=rosemenu>
<div id="rose">
<img class="inforose" id= "roseimg" src="images/rose.png">
</div>
</div>
</div>
and the CSS:
#infotab-mobile{
display: initial;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
position: fixed;
z-index: 999;
}
#rosemenu{
position: fixed;
width: 100%;
height: 20%;
display: inline-block;
}
#rose{
position: relative;
width: 100%;
vertical-align: top;
text-align: center;
background: rgba(232, 232, 232, 0.96);
padding-top: 2%;
padding-bottom: 2%;
}
#roseimg{
margin: 0 auto;
text-align: center;
display: -webkit-box;
}
I've also noticed that using -webkit-overflow-scrolling: touch; disables an ios feature that allows you to scroll to the top of a web page by taping the safari tool bar. Has anyone discovered any work arounds?
As you can see
, there is a 1px border around the widget. It only appears on iOS. I can see the CSS that's causing this in the inspector:
.widget {
...
border: 1px solid #e5e5e5;
...
}
This is the iframe:
<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/307068209&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" scrolling="0" frameborder="0"></iframe>
I know CSS can't effect elements coming from a different domain in an iframe, but client says it looks bad. Is there something that I might be doing to cause this to appear? If not, is there a way I can remove this?
You could hide/clip the outermost 1px of the entire iframe, but that may or may not have a desirable effect. http://codepen.io/anon/pen/evKLMr
div {
overflow: hidden;
width:398px;
height:198px;
}
iframe {
position: relative;
top:-1px;
left:-1px;
width: 400px;
height: 200px;
}
I ended up taking advice from this post:
CSS: Inset shadow by parenting div over iframe
And added this bad boy:
.iframe-wrapper:before{
position: absolute;
content: '';
top: 0;
left: 0;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, .4) inset;
z-index: 1;
width: 100%;
height: 100%;
}
Which hides the border well enough
It should be
frameborder="no"
rather than
frameborder="0"
I have a web-view with blurry text in iOS 7. There are many posts with solutions, however none of them seem to work in my case. The best solution that I've found thus far is to apply -webkit-transform: translateZ(0); to the blurry elements, as seen here. But doing this causes -webkit-overflow-scrolling: touch; to become inoperable. Any advice would be much appreciated.
UPDATE: Here is the CSS associated with the scrolling wrapper and elements containing blurry text
#scrolling_element {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
-webkit-overflow-scrolling: touch;
overflow: auto !important;
}
.elements_w_blurry_text {
position: relative;
border: 1px solid #000;
background-image: url("../path/to/img.png");
background-repeat: repeat;
-webkit-transform: translateZ(0);/* or any other suggested code*/
}
Try adding this into your css:
-webkit-text-size-adjust:none;
I am using select2 and would like to force it show all available options when expanded instead of adding a scrollbar.
Right now it has a scrollbar inside the option area: http://screencast.com/t/fYKPArqz5f
Is that possible?
You can update the CSS in select2.css, roughly line 302:
/* results */
.select2-results {
/* max-height: 200px; comment out the max-height! */
padding: 0 0 0 4px;
margin: 4px 4px 4px 0;
position: relative;
overflow-x: hidden;
overflow-y: auto;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
Or if you don't have access to the CSS, or don't want to change it generally across your site, you can override the specific style in your own stylesheet:
.select2-results {
max-height: none;
}
See this JSFiddle