H!
I have an issue with the positioning of some elements in webkit-browsers and firefox.
In Safari/Chrome, it looks like I want it to be:
But in Firefox, it looks like this:
Code
HTML
<ul>
<li>
<div class="img">
<a href="#">
<img src="#" />
<p><span class="circle"><img src="white-circle.png" alt="" /></span></p>
</a>
</div>
</li>
</ul>
CSS
li {
position: relative;
}
p {
top: 0;
width: 100%;
height: 100%;
position: absolute;
text-align: center;
background-color: black;
}
p img {
width: 70%;
height: 70%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -35%;
margin-left: -35%;
}
Any idea what's going on there? Does Firefox interprets the position: absolute differently?
When you use absolute positioning firefox seems to always move things differently to Chrome and Safari. My opinion is
p img:{position: relative;}
(relative positions is fine its only when i use absolute).
Good Luck
Apperently, some other messed up CSS rule was at work there. As a temporary fix I used this guide to find a solution working in Firefox.
Probably it's some rule affecting all images, but I could'n find it right now.
Related
I'm having trouble getting a h2 header to appaer within an absolutely positioned element. I've ran through the list of possible errors, but still can't seem to find the answer. The h2 element, after inspecting the screen, has a height of 0 for some reason.
Here's a codepen link
HTML:
<div class="gallery">
<img class='gallery-image' src='https://dummyimage.com/200x400/000000/ffffff'>
<img class='gallery-image' src='https://dummyimage.com/200x400/000000/ffffff'>
<img class='gallery-image' src='https://dummyimage.com/200x400/000000/ffffff'>
<img class='gallery-image' src='https://dummyimage.com/200x400/000000/ffffff'>
<a class='call-action' href='#'>
<h2>Shop Now.</h2>
</a>
</div>
CSS:
.gallery {
position: absolute;
z-index: 2;
width: 100%;
display: flex;
flex-wrap: wrap;
font-size: 0;
img {
display: block;
width: 25%;
height: 50%;
#media only screen and (max-width: 500px) {
width: 50%;
height: 100%;
}
}
}
$call-action-width: 150px;
$call-action-height: 50px;
.call-action {
width: $call-action-width;
height: $call-action-height;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
background-color: white;
opacity: 0.5;
border-radius: 5%;
h2 {
position: relative;
color: black;
font-size: 2em;
}
}
Sorry if the answer is obvious - I've just returned to practicing coding and I'm extremely rough.
Thanks for your help!
The problem lies in your font-size. You can't have an em font within a position: absolute <div>, as em is relative to the parent element.
Simply swapping to a fixed-size font (such as px) fixes the problem. I've created a new pen showcasing this here.
Unfortunately this means that your font can't be responsive. If you want responsive font, you'll either have to use a few media queries, or restructure your HTML so that the <h2> element has a position: relative parent (so you can use em).
Hope this helps! :)
Fiddle: https://jsfiddle.net/z1mdvkgq/
HTML:
<div class="test" style="overflow: hidden; width: 650px; height: 350px; background: #CCC; position: relative;">
<div class='control' tabindex='1'>
<div class='btn'></div>
<i class="icon-search ion-search" style="
content: url('https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png');
width: 55px;
position: absolute;
left: 10%;
top: 8%;
outline: none;"></i>
</div>
<i class='icon-close ion-ios-close-empty'>CLOSE</i>
</div>
How can I fix the "+" is shown in Chrome but not in IE.
css url() not recognized in internet explorer 10 explains to use background instead of content but that doesn't work in my case.
Instead of using content on a non-pseudo element you should use background-image instead.
I've updated your fiddle
But it would go like this:
.icon-search {
background-image: url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png);
background-size: 100%;
width: 55px;
height: 55px; /* make sure to include height as well */
position: absolute;
left: 10%;
top: 8%;
outline: none;
}
It is not correct syntax.
The content property is applicable to the pseudeo-elements ::after, ::before, :after, and :before.
If you want it to be display it in all browsers, you must create a pseudo element in the <style></style> or inside a .css file. Alternatively, you could put a <img/> tag inside you <i></i> element.
Reference # w3schools
I've encountered a strange issue with text positioning in Safari for buttons on a site I've been working on.
1. Is it possible to keep the text center aligned on the buttons while using left: ...; ? Would this fix the issue?
2. Would placing span in a relatively placed div .text-pos with a sub-class .text-pos span ... position: absolute; be bad form? Would it fix the issue?
Code:
.button a span {
z-index: 2;
width: 100%;
position: absolute;
top: 12%;
color: #000000;
text-align: center;
font-size: 4vmin;
}
.button a img {
height: 100%;
display: flex;
}
<div class="button antiques">
<a href="/landing/gallery/antiques/antiques.html">
<img alt="antiques" src="/assets/img_style/plank.png">
<span>ANTIQUES</span>
</a>
</div>
Did not include left: ...; as the text needs to be center aligned on the button.
Result(too new to post images):
http://i.imgur.com/3E55EMH.png
My first thought was that the issue was with vmin, but:
1- Text scales appropriately with browser adjustments.
2- Text on the hover(upper left image frame) also uses vmin, but is
appropriately positioned.
In reference to point two, the text is placed in a relatively positioned div container to force aspect ratio like so:
<div id="wide-container"> /* position: relative; */
<div id="content"> /* position: absolute; */
...
</div>
</div>
I don't have ready access to an OSX machine so any input would be appreciated!
Open minded to any other approaches you may have to offer. Thank you (:
SOLVED
.button {
height: 6vmin;
margin-top:1.5vmin;
margin-bottom:1.5vmin;
position: relative;
}
.button a {
height: 100%;
}
.button:before a {
content: "";
display: block;
}
.button a span {
z-index: 2;
position: absolute;
top: 9%;
bottom: 0;
left: 0;
right: 0;
text-align:center;
width: 100%;
height: 100%;
color: #000000;
font-size: 4vmin;
}
Found the solution by setting the button to be relatively positioned while leaving the text position as absolute. Solution outlined in more detail in the edited question.
The problem came from my misunderstanding of how browsers treat the box model differently. Safari seemed to be taking the contained elements and floating them left individually since the the image had no positioning attributes.
This solution displays more or less the same on Chrome, Firefox, and Safari.
Bit of a strange one, I'm trying to overlay a couple of links over an image, and only in IE (all versions) is it displaying them behind the image. Works in Chrome, Firefox, et al.
I've tried giving each element an appropriate z-index but it doesn't actually make any difference.
I swear I've done this a a million times before with issues.
Here's a JSFiddle for it:
http://jsfiddle.net/SY8xp/
<span>Link 1</span>
<span>Link 2</span>
<img src="http://lorempixel.com/212/43" width="212" height="43" alt="" id="logo" />
.logo-link-a span, .logo-link-b span {
display: none;
}
.logo-link-a {
display: block;
position: absolute;
width: 50px;
height: 50px;
margin: 25px 0px 0px 0px;
}
.logo-link-b {
display: block;
position: absolute;
width: 165px;
height: 50px;
margin: 25px 0px 0px 50px;
}
#logo {
margin-top: 30px;
}
A hackish solution is to add a background-color to the <a /> elements. Adding this to your jsfiddle's CSS worked:
.logo-link-a, logo-link-b {
background-color: rgba(255,255,255,0);
}
what's the reason to hide links over an image? you can wrap the image with <a> tag and create the link without much markup, you can also use image replacement that brings good results for the SEO of page also
here some tricks to image replacement: http://css-tricks.com/css-image-replacement/
here a fiddle: http://jsfiddle.net/9V5g8/1/
HTML:
<!-- option 1 -->
<img src="http://www.starbucks.com/static/images/global/logo.png" alt="">
<!-- option 2 -->
<div class="logo">
<a href="http://www.starbucks.com/">
<h1 class="img-replace">
My Logo
</h1>
</a>
</div>
CSS:
h1.img-replace {
width: 85px;
height: 84px;
background: url("http://www.starbucks.com/static/images/global/logo.png") no-repeat 0% 50%;
text-indent: -9999px;
}
Since upgrading to iOS 7 on multiple iPhones and iPads, we've seen something very strange happening to part of the UI on our website.
The pink box in the image attached is within an absolutely positioned parent and it has two white divs positioned absolutely within it, each with differing opacities. The pink circle is just a div that has border-radius set to make it a circle. There are no images at all in this layout.
For some reason, the browser is intermittently stretching the pink div, but I can't think of anything that would cause it - and I'd have no idea how to achieve this effect if I wanted to!
I presume it's a bug in the browser(s), but I don't know how to fix it.
I haven't included any code as it's all really, really straightforward and there's nothing in there that would cause this (and indeed it works in iOS6). Just hoping someone has seen this before?
Any ideas?
Update
In response to comment by cimmamon here's the code:
<div class="col" style="left: -3920px; width: 280px;">
<div class="periods">
<div class="period3"></div>
<div class="period2"></div>
<div class="period1"></div>
<div class="nodeline colBk">
<div class="node colBrd"></div>
</div>
</div>
<div class="inner">
<div class="group first">
<div class="branch colBk"></div>
<a class="story">
<div class="strip colBk"></div>
<div class="caption">
<div class="text">
<p class="title">Test</p>
</div>
</div>
</a>
</div>
</div>
And the CSS that applies to the 'periods' container and children:
.tls .col { display: inline-block; position: absolute; top: 0; }
.periods { height: 72px; overflow:hidden; position: relative; border-left: 1px solid #fff; }
.period2 { height: 30px; opacity: 0.6; background-color: #fff; position: absolute; width: 100%; }
.period1 { height: 25px; opacity: 0.72; top: 30px; background-color: #fff; position: absolute; width: 100%; }
.nodeline { height: 61px; }
.colBk { background-color: #dd545c; }
.nodeline { height: 61px; }
.node { position: absolute; margin-left: -15px; left: 50%; bottom: 0px; width: 17px; height: 17px; border-radius: 50%; border: 6px solid #dd545c; background-color: #f9f9f9; }
.colBrd { border-color: #dd545c; }
It's such a strange bug - there's nothing in the CSS that could cause this that I can see.
Any suggestions on what CSS I could add that might force it to render correctly? You'd think the height alone would be enough but obviously not.
Fiddle here
I've had this problem, and it's also now in Safari 7.
Here's a simplified version of what was happening in my case
HTML
<ul>
<li>
<a> Some text </a>
</li>
<li>
<a> Some other text </a>
</li>
</ul>
I then had some javascript (in my case the bootstrap tooltip) which was adding in an element which made the html
<ul>
<li>
<a> Some text </a>
<div style="position: absolute" class="tooltip"> Some content here </div>
</li>
<li>
<a> Some other text </a>
</li>
</ul>
The new div was briefly displaying before the whole ul would get stretched down over the top of the new div.
This has got to be a bug in safari, but adding the following CSS to the inserted div works as a workaround.
.tooltip {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
This forces the inserted div to be rendered in a new composite layer which seems to prevent Safari screwing up.
Hopefully this is enough for you to reach a solution but let me know if not and I can flesh this answer out a bit more.
Try using backface-visibility:
-webkit-backface-visibility:hidden;
it caused my headings to stretch, once removed the world was and is a happier place
tested on iOS 6 & iOS 7 & Android 4.2 +
Another apparent workaround that avoids creating additional compositing layers is to add perspective to the elements that are in a GPU-composited context. (In this case, that's the elements with opacity.) Note that if you're positioning things in 3D space with translate3d, this will have a visual impact, and may not be an effective workaround.
.period1, .period2, .period3 {
-webkit-perspective: 1px;
perspective: 1px;
}
maybe this fixes the issue:
add height:17px; to .node so your css should look like
.node {
background-color: #F9F9F9;
border: 6px solid #DD545C;
border-radius: 50% 50% 50% 50%;
bottom: 0;
height: 17px; /*new*/
left: 50%;
margin-left: -15px;
position: absolute;
width: 17px;
}
jsFiddle