Problem:
Position absolute with parent align center is not working in IE, but working in Chrome/Safari.
Expected:
Should behave the same with IE 11 browser.
IE 11 screenshot
.selectContainer {
position: relative;
display: flex;
align-items: center;
}
.selectContainer .select {
border: 1px solid #8e99ab;
border-radius: 4px;
font-size: 1rem;
width: 100%;
background-color: #fff;
height: 50px;
padding: 12px 42px 12px 12px;
}
.selectContainer i {
color: #707070;
background: red;
position: absolute;
right: 0px;
padding: 0 16px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="selectContainer">
<select name="" id="" class="select"></select>
<i class="fa fa-sort"></i>
</div>
You can use top:50%;transform:translateY(-50%); for .selectContainer i I tested it.
.selectContainer i {
color: #707070;
background: red;
position: absolute;
right: 0px;
padding: 0 16px;
top: 50%;
transform: translateY(-50%);
}
You could add the CSS bottom: 16px; property to the .selectContainer i, like this:
.selectContainer i {
color: #707070;
background: red;
position: absolute;
right: 0px;
bottom: 16px;
padding: 0 16px;
}
The sample output in IE11 browser:
Related
I have an website and wanted to add a whatsapp icon to the left side of my screen as shown in the image below:
Down below the html code is for adding the whatsapp icon
<a class="whats-app" href="#" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>
and this is the css styling I have used
.whats-app {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 15px;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
}
.my-float {
margin-top: 16px;
}
From the above css and html this is the outcome: . In css I changed left:15px from right:15px but still the second image.
Can I know where it went wrong?
Though I have commented the above css then also it is showing the whats app icon and css properties in the console
Try with this CSS.
.whats-app {
position: fixed;
width: 50px;
height: 50px;
bottom: 40px;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 3px 4px 3px #999;
left: 15px;
z-index: 100;
}
.my-float {
margin-top: 10px;
}
try this.. here i unset the right value
css
.whats-app {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
left:0;
right:unset;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
}
.my-float {
margin-top: 16px;
}
You needs to add left: 0 or left: (pixels you want) in .whats-app css. and needs to remove right: 15px from css
Try this hope it will help you.
.whats-app {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
left: 15px;
}
.my-float {
margin-top: 16px;
}
<a class="whats-app" href="#" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>
You can do something like the below code.
.icon-bar {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.icon-bar a {
display: block;
padding: 16px;
color: #448edd;
border-radius: 50px;
}
.whatsapp {
background: #53d365;
color: #448edd;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
<i class="fa fa-whatsapp"></i>
</div>
I have a "small" issue on my website with Firefox. On Google Chrome and Safari it is working just fine.
What it should be (Chrome and Safari):
Issue on Firefox:
.headline {
line-height: 1.5em;
position: relative;
}
.headline:after {
content: ' ';
position: absolute;
display: block;
width: 230px;
margin: 5px 2%;
border: 2px solid #64c800;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
left: 50%;
transform: translateX(-50%);
}
<h2><span class="headline">Contact</span></h2>
The expected result is that the green line should be below the header (in this case below "Contact".
Reproducible code:
Important forgotten note; I use Bootstrap 4 too.
<style>
#wrapper {
position: relative;
margin: 25px auto 5px auto;
max-width: 820px;
min-height: 600px;
padding: 1px 0px 30px 0px;
background-color: #ffffff;
color: #603813;
text-align: center;
}
.headline {
line-height: 1.5em;
position: relative;
}
.headline:after {
content: ' ';
position: absolute;
display: block;
width: 230px;
margin: 5px 2%;
border: 2px solid #64c800;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
left: 50%;
transform: translateX(-50%);
}
</style>
<div class="container-fluid">
<div class="row-fluid">
<div id="wrapper">
<div class="row">
<div class="col-md-12">
<h2><span class="headline">Contact</span></h2>
</div>
</div>
</div>
</div>
I think the problem is that you don't define a vertical position (top or bottom) for your line, so the browser kinda just does anything.
Try adding
.headline:after {
top: 100%;
}
JSFiddle: https://jsfiddle.net/0p7948Lx/2/
I can't reproduce your issue in Firefox 60.8 on Debian. However, here is a somewhat simplified approach that works without position, transform and border. I find it a little more elegant.
Maybe it fixes the issue as well?
h2 {
width: 230px;
text-align: center;
}
.headline {
line-height: 1.5em;
}
.headline:after {
content: '';
display: block;
width: 100%;
height: 8px;
margin-top: 1em;
background: #64c800;
border-radius: 4px;
}
<h2><span class="headline">Contact</span></h2>
Does anyone know of CSS property that I can use to achieve the same result as clip-path to make rounded shapes around a div? My site needs to be compatible with the latest version of IE, but I checked on www.caniuse.com and clip-path is not supported on IE 11.
This is what I am trying to do:
My current code works as you can see in this codepen: https://codepen.io/CodingGilbert/pen/BqwoGm?editors=1100
The problem is, that this code won’t work in IE, how can I solve this? Surely there must be another CSS property which does the same.
.card {
width: 80%;
height: 16.5rem;
border-radius: 5px;
background-color: #fff;
text-align: center;
padding: 0 1.5rem;
margin:10rem auto;
}
.card__inner-wrapper {
height: 55%;
position: relative;
margin: 0 auto;
display: flex;
justify-content: center; }
.card__img {
height: 100%;
position: absolute;
bottom: 50%;
clip-path: circle(50% at 50% 50%);
background-color: #fff;
border: 0.8rem solid #fff; }
.card__text-content {
position: absolute;
top: 6rem; }
.card__heading {
font-size: 1.8rem;
font-weight: 500;
color: #5fc0c3;
margin-bottom: 1.5rem; }
In this case, border-radius: 50%; on the .card__img will give you the same result, and it's compatible with IE9 and above.
Demo:
body {
background-color: gray;
}
.card {
width: 80%;
height: 16.5rem;
border-radius: 5px;
background-color: #fff;
text-align: center;
padding: 0 1.5rem;
margin: 10rem auto;
}
.card__inner-wrapper {
height: 55%;
position: relative;
margin: 0 auto;
display: flex;
justify-content: center;
}
.card__img {
height: 100%;
position: absolute;
bottom: 50%;
border-radius: 50%; /* instead of clip-path */
background-color: #fff;
border: 0.8rem solid #fff;
}
.card__text-content {
position: absolute;
top: 6rem;
}
.card__heading {
font-size: 1.8rem;
font-weight: 500;
color: #5fc0c3;
margin-bottom: 1.5rem;
}
<div class="card">
<div class="card__inner-wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Light_bulb_icon_red.svg/2000px-Light_bulb_icon_red.svg.png" alt="Bulb icon" class="card__img">
<div class="card__text-content">
<h4 class="card__heading">We help charities</h4>
<p>Share knowledge and working practice to make the best technology choices.</p>
</div>
</div>
</div>
you could use inline SVG to clip an image as it has great browser support - http://caniuse.com/#search=inline%20svg
I have different results for different browsers in the following code:
.flexsearch--wrapper {
height: auto;
width: 50%;
max-width: 700px;
min-width: 100px;
top: 20px;
overflow: hidden;
background: transparent;
margin: 1px;
position: absolute;
}
.flexsearch--form {
overflow: hidden;
position: relative;
}
.flexsearch--form {
padding: 0 66px 0 0;
/* Right padding for submit button width */
overflow: hidden;
}
.flexsearch--input {
width: 100%;
}
.flexsearch {
padding: 0 25px 0 200px;
/* Padding for other horizontal elements */
}
.flexsearch--input {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 30px;
padding: 0 46px 0 10px;
border-color: #888;
border-radius: 3px;
/* (height/2) + border-width */
border-style: solid;
border-width: 2px;
/*margin-top: 10px;*/
color: #333;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
-webkit-appearance: none;
-moz-appearance: none;
}
.flexsearch--submit {
position: absolute;
right: 0;
top: 0;
display: block;
width: 32px;
height: 32px;
padding: 0;
border: none;
margin-top: 4px;
/* margin-top + border-width */
margin-right: 5px;
/* border-width */
background: transparent;
color: #888;
font-family: 'Helvetica', sans-serif;
font-size: 30px;
line-height: 30px;
-webkit-appearance: none;
-moz-appearance: none;
}
.flexsearch--input:focus {
outline: none;
border-color: #333;
}
.flexsearch--input:focus.flexsearch--submit {
color: #333;
}
.flexsearch--submit:hover {
color: #333;
cursor: pointer;
}
/* UPLOAD ICON IMAGE */
#uploadIcon {
/*width: 10%;
height: 100%;*/
padding-top: 10px;
min-width: 80px;
max-width: 80px;
position: absolute;
margin: 0 1% 0 77%;
/* left : 77%;*/
top: -3px;
}
/* SIGN UP / SIGN IN*/
.Signin {
position: fixed;
/*left: 85%;*/
margin-left: 86%;
top: 24px;
/*border : 1.5px solid grey;*/
padding: 3px;
margin-right: 2px;
float: right;
}
/*#Signup {
position: absolute;
left: 93%;
top: 20px;
border : 1.5px solid grey;
padding: 3px;
margin-right: 3px;
}
*/
<div class="flexsearch">
<div class="flexsearch--wrapper">
<form class="flexsearch--form" action="#" method="post">
<div class="flexsearch--input-wrapper">
<input class="flexsearch--input" type="search" placeholder="search">
</div>
<input class="flexsearch--submit" type="submit" value="➜" />
</form>
</div>
</div>
<img src="upload_icon.png" id = "uploadIcon">
Sign In/Sign Up
<!-- Sign Up -->
The problem is that arrow and the Sign In and Sign Up with Firefox works perfectly :
But with Chrome or Safari it doesn't:
Is the problem from my code? or do I need to add some customized code for each browser. And if yes, how can that be done? Can it be done with -webkit or -moz Because I tried this, but it didn't work. Probably, I haven't written it well.
i have an issue with floating div's in responsive template. You can see empty spaces on images below. And it happens not at every page, at some pages blocks fill all space properly.
Here is the code of a simple block:
<div class="movie-item ignore-select short-movie">
<div class="movie-img img-box">
<img src="/templates/movie-groovie/dleimages/no_image.jpg" alt="text" />
<i class="fa fa-info show-desc"></i>
<div class="movie-img-inner">
<i class="fa fa-play-circle-o go-watch pseudo-link" data-link="#"></i>
</div>
<div class="movie-series">Поле зеленое</div>
<span>доп поле</span>
</div>
<a class="movie-title" href="#">TITLE</a>
<div class="movie-tags nowrap">Some text</div>
<div class="movie-desc">
<div class="movie-date">2 март 2017</div>
<div class="movie-director"><b>Доп поле название:</b> доп поле Джеймс Кэмерон</div>
<div class="movie-text">Some text</div>
<div class="movie-rate"><i class="fa fa-thumbs-o-up"></i><span id="ratig-layer-5846" class="ignore-select"><span class="ratingtypeplus ignore-select" >0</span></span></div>
</div>
</div>
and it's styles:
.short-movie {
float: left;
width: 18%;
margin: 0 1% 20px 1%;
}
styles.css:146
.movie-item {
position: relative;
z-index: 50;
margin: 0 10px;
max-width: 200px;
}
.movie-img {
height: 210px;
z-index: 50;
border: 4px solid #fff;
box-shadow: 0 0 0 1px #e3e3e3;
border-radius: 2px;
}
styles.css:6
.img-box {
overflow: hidden;
position: relative;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
styles.css:155
.show-desc {
position: absolute;
right: 0;
top: 0;
z-index: 150;
font-size: 18px !important;
cursor: pointer;
border-radius: 0 0 0 3px;
background-color: #fff;
color: #487a1b;
width: 30px;
height: 30px;
line-height: 30px !important;
text-align: center;
}
.movie-img-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
border: 5px solid #97ce68;
opacity: 0;
background-color: rgba(0,0,0,0.6);
}
.movie-series {
position: absolute;
left: 0;
bottom: 0;
z-index: 50;
width: 100%;
background-color: rgba(151, 206, 104, 0.8);
color: #487a1b;
padding: 10px;
font-weight: 700;
text-align: center;
}
.movie-title {
display: block;
margin: 10px 0 3px 0;
height: 36px;
overflow: hidden;
color: #333;
}
.movie-desc {
position: absolute;
left: 100%;
top: 0;
z-index: 150;
width: 400px;
padding: 20px;
background-color: #FFF;
display: none;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.3);
min-height: 80px;
border-radius: 4px;
}
I can't find what causes the problem. Tried it on OS X Chrome and Safari. Does anybody know what can it be?
Just set:
.short-movie {
height: 275px;
}
To make all movie items be of the same height and stop them being affected by the previous elements height.
Set standard height for this div, For Example
.img-box
{
height:300px;
}