My sticky footer with my fontawesome icons is displaying perfectly in all browsers, but in Safari, the links aren't working.
Here is my code:
<style>
h4 {
font-size: 1em;
color: #A0A0A0;
bottom: 15px;
position: relative;
letter-spacing: 10px;
}
.footer{
position: fixed;
left:0px;
width: 100%;
bottom: 0px;
height: 20px;
background: #404040;
padding-bottom: 25px;
opacity:0.95;
}
</style>
......
<div class="footer">
<h4>
<a href="https://twitter.com/">
<i class="icon-twitter icon-2x"></i> </a>
<a href="https://www.facebook.com/">
<i class="icon-facebook icon-2x"></i></a>
<a href="http://wordpress.com/">
<i class="icon-rss icon-2x"></i></a>
</h4>
</div>
Can anyone tell me why this doesn't work in safari? And how to fix it?
I just into this problem. I believe this is caused by safari giving the target no dimensions (i.e. 0px x 0px). If you force inline-block on the <i> element it should to work correctly.
Had the same problem.
I added to the icon's class
display:inline-block;
and it worked fine!
Related
Im creating a radial play button for my player And I use css flex for centering the play icon. Its working fine in chrome but not in safari browser.
In my css I have something like this:
.inset {
width: #inset-size;
height: #inset-size;
position: absolute;
margin-left: 20px;
margin-top: 20px;
background-color: #circle-background;
border-radius: 50%;
border: 3px solid #192D48;
font-size: 50px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-around;
-webkit-justify-content: space-around;
i {
-webkit-align-self: center;
align-self: center;
color: black !important;
top: 0px;
left: 1px;
}
}
I already added display: -webkit-flex; to support flex in safari but unluckily it doesnt work and when I checked it in the debugger styles of safari there is no display: -webkit-flex; on it but space -webkit-justify-around appear.
but when I hardcoded it in style like this:
<div class='scr-button radial-progress'>
<div class="circle-gray"></div>
<div class="circle">
<div class="circle-white"></div>
<div class="mask full" ng-style="{'transform': currTime}">
<div class="fill" ng-style="{'transform': currTime}"></div>
</div>
<div class="mask half">
<div class="fill" ng-style="{'transform': currTime}"></div>
<div class="fill fix" ng-style="{'transform': currTime * 2}" ></div>
</div>
</div>
<div class="inset" ng-click="play()" style="display: -webkit-flex;">
<i ng-class="icon()"></i>
</div>
</div>
Its working fine, can someone explain me why it doesnt work when I put it on a class? Is it browser issue? Or Im doing it wrong?
Specs:
Less,
Safari Version: Version 8.0.8,
Angularjs
I am trying to align a set of "buttons" made out of DIV elements that are arranged along the bottom of a web page using the CSS display: inline-block. I've attached a fiddle which illustrates the issue.
The problem is that this current code works on all modern browsers except Safari (7, 8). I don't know if this is a bug in WebKit that Safari uses, or something that I've allowed to happen by not using the right incantations.
The thing that triggers the unwanted behavior is the nested DIV.btn-sub; however, removing that text is not an option to "fix" the issue.
Here's the expected behavior (snap taken from Firefox 34, similar behavior on IE 9, 10, and latest Chrome):
Here's what happens on Safari:
Any help here would be appreciated!
It's usually best practice to use a list when creating inline-blocked elements in a row/list, such as a navigation.
The issue here seems to be the block being set with a padding directly; relative it's parent. Which somehow is turning it into a margin or something similar.
You can try stripping CSS until you get a full height out of the blocks, and then add another inner div which you can call .btn-padding which contains your top padding.
Here is similar.
body, html {
height: 100%;
margin: 0;
background: green;
}
#wrap {
display: block;
width: 100%;
position: fixed;
bottom: 0px;
height: 50px;
border:0;
background-color: blue;
color: #fff;
}
#btnls {
display: block;
list-style-type: none;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#btnls li {
display: inline-block;
margin-right: 10px;
background-color: purple;
min-width: 158px;
max-width: 300px;
height: 50px;
text-align: center;
vertical-align: middle;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#btnls li .btn-padding {
display: block;
padding-top: 10px;
width: 100%;
height: 50px;
}
#btnls li .btn-padding .sub-btn {
display: block;
font-size: x-small;
margin: 0;
padding: 0
}
<div id="wrap">
<ul id="btnls">
<li>
<div class="btn-padding">Foo
<div class="sub-btn">Bar</div>
</div>
</li>
<li>
<div class="btn-padding">Foo</div>
</li>
<li>
<div class="btn-padding">Foo</div>
</li>
</ul>
</div>
I tried to place an h1 element above a div element using the css property z-index, but it's not working!
Here's my html:
<div id="header">
<div id="headerblock">
</div>
<h1>This is my header text</h1>
</div>
The #headerblock has a black surface including some transparency.
I want the h1 to be appearing above the #headerblock. As I mentioned the z-index property isn't working. Does someone have a solution for this? Or at least a reason why it's not working?
Thanks.
Gotta have a position on the h1.
h1 {
position:relative;
z-index: 500;
}
#header{
background-image: url(img/head.jpg);
background-size: 100%;
height: 520px;
width: 100%;
top:49px;
position: absolute;
margin:0 auto;
text-align:center;
}
#headerblock{
background-color:#444444;
opacity:0.7;
filter:alpha(opacity=70);
width:100%;
position:absolute;
height:200px;
}
<div id="header">
<div id="headerblock"></div>
<h1 style="color:white">This is my header text</h1>
</div>
Maybe I'm missing something obvious here, but so far I've found nothing that makes any sense with this. I have a scrollable div with a canvas inside of it. In FF and IE all works as expected: Using drag scrolling with the mouse, the div scrolls normally. In WebKit, however, things are flipped. If I scroll up, the content moves down, if I scroll down, it moves up. If I scroll with my mousewheel, everything moves in the right direction. It's only using mousedown on the scroll bar that's screwed up. NOTE: I am using a 3rd party library to generate the contents of the canvas, which is where all the inline styles are coming from.
My code is as follows:
#Palette {
height: 420px;
overflow: auto;
}
<div id="Palette" style="position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); cursor: move;">
<canvas width="268" height="420" tabindex="0" style="position: absolute; top: 0px; left: 0px; z-index: 2; -webkit-user-select: none; cursor: move;">
This text is displayed if your browser does not support the Canvas HTML element.</canvas>
<div style="position: absolute; overflow: auto; width: 268px; height: 420px; z-index: 1;">
<div style="position: absolute; width: 1px; height: 1px;"></div>
</div>
<div style="position: absolute; overflow: auto; width: 268px; height: 420px; z-index: 1;">
<div style="position: absolute; width: 1px; height: 700px;"></div>
</div>
</div>
This is apparently an issue with WebKit 36. It is solved in 37.
I am having trouble centering my navigation bar, I have tried display:inline-block and then align center like most posts suggest but it doesn't seem to be working.
HTML:
<!--Navigation-->
<div class="band navigation">
<nav class="container primary">
<div class="sixteen columns">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Projects</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
CSS:
nav.primary{
display: table;
margin: 0 auto;
}
nav.primary ul, nav.primary ul li {
margin: 0px;
}
nav.primary select {
display: none;
width: 100%;
height: 28px;
margin: 21px 0;
}
nav.primary ul li {
display: inline;
float: left;
position: relative;
}
nav.primary ul li a {
display: inline-block;
line-height: 49px;
padding: 0 14px;
color: white;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.08em;
background: ##999999;
}
nav.primary ul li a:hover {
background: #2ecc71;
cursor: pointer;
}
Ok finally got it:
nav.primary ul li {
display: inline;
float: left; <---
position: relative;
Remove the float: left;
Since the navigation is the full width of the containing div, there is no need to mess with floats, the list items will line up with just display: inline;
I tried something else that works... It seems to work better than trying to build in something custom thus far in my experience with Skeleton... Although it produces a bit less pretty markup for the HTML, the rigidity of the final result works for me. Here is my code so that you can see what I did to achieve the desired effect:
<div class="row">
<div class="two columns offset-by-three">
Portfolio
</div>
<div class="two columns">
About
</div>
<div class="two columns">
Contact
</div>
</div>
What you can see here is that the skeleton framework allows for the columns to operate naturally and restack at lower resolutions without any extra code. The only tricky part really is setting up the offset on the left most item.
Have you tried nav.primary ul {text-align: center;}
As well as keeping the left/right margins to auto, this worked for me when I was using the skeleton framework.