Given the following CSS:
body {
font-family: Corbel, Calibri, Verdana, Helvetica, sans-serif;
font-size: 9pt;'
}
.heb {
font-family: Bwhebb;
}
.heb, .eng {
font-size: 25pt;
cursor: pointer;
display:none;
}
.slideshow, .cardface, .card {
width: 100%;
height: 15%;
text-align: center;
position: absolute;
}
and the following HTML
<div class="card" id="wordID">
<span class='heb cardface'>
some word
</span>
<br />
<div class='eng cardface'>
some translation
<br />
<a href='#' class='right' >correct</a> |
<a href='#' class='wrong' >incorrect</a>
</div>
</div>
I get two different results on Chrome and Firefox. Chrome centers everything on the page while Firefox places the span .heb .cardface WAAAAAYYYYYYYYYYYYYYY to the right.
I am pretty sure I'm doing something wrong, could you help me figure it out?
If I remove position: absolute; from your CSS, in the last line, having .slideshow, .cardface, .card {width: 100%; height: 15%; text-align: center;}, it is all centered.
Is that what you're after?
You have an absolutely positioned div with an auto left offset. That means its left edge should be placed where it would go if its position were static.... and since the parent element has centered text, that means at the center of the parent element. Chrome gets this right if you have any text in the parent element, but wrong if the parent element has only positioned kids. See the testcases at https://bugzilla.mozilla.org/show_bug.cgi?id=671491
Oh, and the upshot is that left: 0 should do what you want, I would assume.
The problem in firefox is that <div class="card" id="wordID"> is in absolute position, and <span class='heb cardface'>some word</span> is also in absolute position.
You can either remove the absolute positionning, according to #Nightfirecat suggestion.
Or you can remove the absolute positionning for either .card or .cardface. It's better if you remove it from .cardface, since then, .card content will be what's inside .cardface (Remember : Positionning something in absolute moves it out of it context! Aka, the parent element won't use it to define it's size/will act quirky.)
Related
I have recreated my problem on this pen:
https://codepen.io/brennerp/pen/wOEebK
.example {
margin-right: 100px;
height: 100px;
max-width: 130px;
font-size: 16px;
line-height: 24px;
white-space: normal;
word-break: break-word;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
top: calc(50% - 8px);
right: -21px;
width: 16px;
height: 16px;
border-radius: 50%;
background: blue;
}
<div class="example">
<span>
<span class="relative">
<span class="relative__label">
Wrong one asdsdasadsadsdasadas ts asdsadasdasdsadsajdkhsdjahas
</span>
<div class="absolute"></div>
</span>
</span>
</div>
I wanted to have a text of any size with an element absolute-positioned by its end, does not matter what size the text is. I have a relative-positioned inline element with two children: one inline element with its text and other absolute-positioned element with top:0 and right:0.
Just like the "Right one test[...]" example, the little blue circle is at the end and aligns with the middle of the text. However, the "right" property of the absolute element seems to respect one of the SMALLER LINES. In other words, if "right: 0;", the absolute element does not go to the right end of the relative element, but to the end of one of the smaller lines, just like the "Wrong one [...]" example. Which is NOT what I want. I want it to respect the size of the relative element, just like I forced on the CodePen.
Does anyone know the reason for the "right" property to respect the smallest line and not the relative element's width? Is that how inline elements work? Is there a solution for what I want: an absolute element that respects the end of a text element, whether if its 20px or 300px wide (just like the examples I put)?
Here is my code.
The HTML:
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic1.jpg" title="Bottle in the mirror"><img src="images/250-width/pic1.jpg" alt="" width="250px" height="250px" id="Bottleinthemirrorpic"></a>
<span id="Bottleinthemirror" class="spanlink"><p>Bottle in the mirror<p></span>
</div>
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic9.jpg" title="The empty glass"><img src="images/250-width/pic9.jpg" alt="" width="250px" height="250px"></a>
</div>
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic10.jpg" title="The last drop"><img src="images/250-width/pic10.jpg" alt="" width="250px" height="250px"></a>
</div>
The CSS:
#Bottleinthemirror {
width: 250px;
height: 90px;
position: absolute;
background-color: rgba(0,0,0,.55);
margin-top: 10px;
color: white;
line-height: 20px;
font-size: 12px;
}
.column1of4 {
margin: 50px;
float: left;
}
The Javascript:
$('#Bottleinthemirror').hide();
$('#Bottleinthemirrorpic, #Bottleinthemirror').hover(function(){
//in
$('#Bottleinthemirror').show();
},function(){
//out
$('#Bottleinthemirror').hide();
});
Basically, I have three pictures, two of them beside each other and the third one is below the first one. Which I hover over the first picture, I want the #bottleinthemirror span to appear, which it does. The problem is, even when the span is hidden, it still rearranges the layout of the website and moves the picture below it to another place even though it's position is set to absolute. Any idea why? When I remove the span, the website layout is normal. It changes when I put in the span even though the spans position is absolute.
Probably the problem is that span can not contain p, and in your code there are technically 2 p elements in the span (both p tags are opening). When browsers fix this incorrect markup, part of the last p may appear outside the span. If there is a need to have p inside .spanlink, it's better to use div instead of span. But is the p really necessary here?
Add
display: block;
to
#Bottleinthemirror
I set this up in a jsfiddle: http://jsfiddle.net/r2XG2/1/ and it appears to be working for me in Chrome. What browser are you in? I would try the following if it's still not working for you:
Set z-index: 100 to see if that will force it to appear over the other elements. You could also try setting the top or left values in css, that may also force it to appear in the correct place. Adding display: block; couldn't hurt either.
Edit: Updated fiddle with latest update from asker it also appears that IE won't load jsfiddle. I added position: relative to the parent div to see if that helps.
#Bottleinthemirror {
width: 250px;
height: 90px;
position: absolute;
background-color: rgba(0,0,0,.55);
margin-top: 10px;
color: white;
line-height: 20px;
font-size: 12px;
z-index: 100;
display: block;
}
.column1of4 {
margin: 50px;
float: left;
position: relative;
}
I have two divs both have position relative on them. The inner div has left and top position. They work fine in all browsers except in IE7 it appears the left position needs to be about 100px less. I'm wondering if I can fix this without having to have a IE specific stylesheet.
Here is the code
<div style="position:relative;">
<div class="edit-photo-div">
<a href="#">
<span class="edit-photo-icon">Edit</span>
</a>
</div>
</div>
and my css:
> .edit-photo-div {
background-image: url("/images/editphoto.png");
background-position: 9px 6px;
height: 28px;
left: 143px;
position: relative;
top: -27px;
width: 35px;
margin-bottom:-29px;
overflow:hidden;
}
.edit-photo-icon{
padding-left:35px;
position:relative;
top:6px;
color:#7c7c7c;
font-weight:bold;
}
jsFiddle link
I've run into issues before older versions of IE when I put "position: relative" into span elements. Try taking that out and see if it makes a difference. Also for ".edit-photo-div" try making that absolutely positioned. You already set the "top" and "left" so it should stay in the same place.
Sorry I can't post complete code, I'm working on proprietary stuff. Basically I have a problem where a DIV that has z-index 6 is being blocked by an overlay DIV that has a z-index of 5. Is there ANY scenario that would make this happen? I'm wracking my brain trying to figure out why this is happening. It just doesn't make any sense. Anything having to do with nesting DIVs, or CSS position maybe?
I apologize for the vagueness. I tried to recreate in JSFiddle but it works as expected, unfortunately. Only the actual code is wonky.
Structure:
<div id="window">
<div id="wall">
<div class="box" /><div class="box" /> .... many boxes
</div>
</div>
<div id="overlay" />
CSS:
#window {
position: relative;
width: 960px;
height: 700px;
overflow: hidden;
background: #666;
}
#wall {
position: relative;
width: 1640px;
height: 1600px;
-webkit-perspective: 2000;
}
#overlay {
position: absolute;
z-index: 5;
background: #000;
}
.box {
left: 0px;
top: 0px;
position: absolute;
width: 228px;
height: 228px;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 0.8em;
-webkit-transform-style: preserve-3d;
z-index: 4;
cursor: pointer;
}
Overlay dimensions are set via jQuery upon a certain event:
$('<div id="overlay"></div>').css({
'left': $('#window').position().left + 'px',
'top': $('#window').position().top + 'px',
'width': $('#window').width() + 'px',
'height': $('#window').height() + 'px',
'opacity': 0.8
}).appendTo('body');
Even though one of the boxes has a z-index of 6, and the overlay is 5, the overlay is still over said box.
The overlay is supposed to go over the window, but let one of its boxes through.
Why the heck does this JSFiddle work but my actual code does not?! http://jsfiddle.net/csaltyj/2gzTc/
z-index only works on elements with position: relative,absolute, or fixed. That seems to trip many people up.
In addition, a child can never be below its parent. This example, also on Jsfiddle illustrates it.
Based on the example you added it's clear the trouble you're having:
z-index is only relative to its parent, which in most cases is the document itself. If the z-index of one sibling is lower than another, nothing you change about first sibling's children can move it above its parents sibling. Read more about stacking context if you're interested.
Here is a visual:
Crossed out in red is what you want to do, and it is not possible with CSS (considering those small boxes are children of the bigger box, with markup which might look like this:
<div class="one">
</div>
<div class="two">
<div> I can never be above "one", if my parent "two" isn't. </div>
</div>
A solution would be to move the "overlay" inside the wall, or better yet use a pseudo element (which is rendered as a child of the element it is applied to), because the overlay sounds like it something presentational, and thus should remain in the domain of CSS if an overlay div would add no semantic meaning.
Yes, I know doesn't work with position absolute, but is there a way to display elements "below" (after in code) not behind them?
Example:
<img src="image.jpg" style="width: 500px; height: 400px; position: absolute; top: 0;" />
<h2 style="padding: 15px" >This text is behind not below the image</h2>
Is there a way of displaying the h2 below the image excepting positioning it absolutely too?
Example:
http://jsfiddle.net/fDGHU/1/
(yes, I have to use absolute in my case, and dynamic margined content below, and I'm lost :D)
The only way I was able to do what you are asking is setting the top property of h2, aka positioning the text after the image. Fiddle.
PS: position:block doesn't exist. Only absolute, relative, static, and fixed.
For h2:
specify a top margin equal to the height of your image.
eg.
img {
position: absolute;
top: 0;
}
h2 {
margin-top: 400px;
padding: 40px;
}
Simple , just remove position absolute . (tested)
If an object is not defined it will automatically go to the right of its neighbour or below
How about wrapping the image and the title in an absolute block? This solution puts the title after the image because h2 is a block by default and your content is still absolutely positionned.
<style type="text/css">
.wrapper{
position: absolute;
top: 0;
}
h2 {
padding: 40px;
}
</style>
<div class="wrapper">
<img src="image_url" alt="image!" />
<h2>Am I invisible? (not!)</h2>
</div>