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.
Related
I have the following attempt, trying to make a simple sticky footer.
My problem is the footer is not sicking to the bottom, I suspect it might be a css problem.
Would greatly appreciate it if someone can give the following code a scan and provide some advise.
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: red;
position: absolute;
bottom: 0;
}
<footer class="footer" id="footer">
<div class="footLeft" style="width:75%; float:left;">
</div>
<div class="footerRight" style="width:25%; float:right; padding:25px;">
<button class="btn btn-danger" style="font-size:20px;">Sign Up</button>
</div>
</footer>
The Problem Im having / Output
Add the following rules to body
body {
min-height:100%;/*or 100vh */
position:relative;
}
Explanation:
The min-height property will make sure that the body at least takes 100% of your viewport height. This way even if you have less content your footer will always stick to the bottom of viewport.
Position: relative rule is set so that the footer is positioned absolute relative to the body and not any other wrapper
You can just use this native class to achieve sticky footer in bootstrap--
<div class="footer navbar-fixed-bottom">
Another possibility is using position:fixed, without influencing the body css.
In that case the footer would be always at the bottom of the page event if a scrollbar is present
Example
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: red;
position: fixed;
bottom: 0;
}
See fiddle
I am not looking for a different solution to the question of centering elements; I am looking for an explanation why the solution presented here doesn’t work.
Consider the following jsFiddle:
http://jsfiddle.net/6Xyq8/2/
Here’s the HTML/CSS code for reference:
HTML
<div class='outer'>
<div class='middle'>
<div class='inner'>
Text should be centered
</div>
</div>
</div>
CSS
.outer {
position: absolute;
left: 200px;
top: 50px;
width: 100px;
height: 100px;
border: 2px solid #00f;
border-radius: 10px;
}
.middle {
position: absolute;
left: 50%;
top: 50%;
line-height: 1em;
}
.inner {
position: relative;
left: -50%;
top: -50%;
width: 5em;
}
The element inspector in both Chrome and Firefox tell me that both middle and inner have the correct width and height, and indeed the horizontal positioning is working correctly, but for some reason the top: -50% rule is ignored. However, it is only ignored if .middle doesn’t have an explicit height — if you add one, it works, even if the effective height is the same as what it is already. Why is this?
This is the behavior as as specified in the old CSS 2 specification (emphasis mine):
<percentage>
The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom'). For 'top' and 'bottom', if the height of the containing block is not specified explicitly (i.e., it depends on content height), the percentage value is interpreted like 'auto'.
In the current CSS 2.1 specification that restriction was removed, so I’d say it’s a cross-browser bug now. Firefox has a very old bug on this here that was marked as invalid because of the original spec; and there is a newer bug here could use some votes to get more attention.
For those coming after me try to add display:grid; on the parent of container
<div style="display: grid;">
<div _ngcontent-serverapp-c11="">
<video _ngcontent-serverapp-c11="" onloadedmetadata="this.muted=true" autoplay="" loop="" muted="" playsinline="" class="lazy vid-mobi"><source _ngcontent-serverapp-c11="" src="https://cdn3.blablabla.com/gtb/videos/intro_lg.mp4" type="video/mp4">
</video>
</div>
</div>
It works for me
[edit: clarified that box-sizing: border-box doesn't seem applicable, since I'm using absolute positioning]
The following code illustrates my problem. I'm using absolute positioning, because I found this even trickier with flow-based layout, but I'm open to suggestions. What I want is borders around arbitrary elements, without the borders affecting the positioning of the nodes. (The borders may clip or be overwritten by the content, but that doesn't matter.)
In particular, the borders of a parent must be able to overlap with the borders of its children, which is not the default behaviour. The CSS box-sizing attribute can be set to border-box to achieve the effect I want, but only (I believe) with inline elements. It has no effect on elements with absolute positioning (as I understand things).
So, my approach has been to use a negative margin to offset the positions of the children by the width of the border. This does indeed seem to cancel out the effect of the border's presence, but unfortunately not in a way which is consistent across scaling factors. At large scales, things look ok. At the default browser zoom in Chrome, the element positioning goes a bit off (they appear too high); if I go smaller, then the element position goes off in the other direction.
But if I remove the borders entirely, the layout seems to scale ok.
So my question is: is there a reliable (scalable) way to have borders on HTML elements with no impact on the positioning of the elements?
[In the example, I've used different colours for some of the borders. I would like to see only black, but at some zooms I can see red and green borders, showing that the element's position is being affected by the presence of the border.]
thanks
Roly
.bordered {
position: absolute;
height: 18px;
border: 2px solid;
margin: -2px;
}
<span class="bordered" style="width: 55px; left: 30px;">
<span class="bordered" style="width: 8px; left: 0;">
(
</span>
<span class="bordered" style="border-color: green; width: 47px; left: 8px;">
<span class="bordered" style="border-color: red; width: 39px; left: 0;">
<span class="bordered" style="width: 8px; left: 0;">
5
</span>
<span class="bordered" style="width: 31px; left: 8px;">
<span class="bordered" style="width: 23px; left: 8px;">
Nil
</span>
</span>
</span>
<span class="bordered" style="width: 8px; left: 39px;">
)
</span>
</span>
</span>
Try out CSS2 outline property:
.bordered {
outline:2px solid blue;
}
Outline does not affect element position.
You can also use CSS3 outline-offset as seen here: http://www.css3.info/preview/outline/
I also discovered that using a border of zero width (so that it doesn't affect layout), and then adding a box-shadow to emulate a visible border, seems to work well.
Six years later...
The other answers didn't work for my situation since the box I was styling already had a box-shadow. I needed a border on just one side like border-left and a border-radius, but without the border affecting the position or width of the element. The solution I came up with was to apply the border on an inner element of the absolutely positioned element.
.outer {
position: absolute;
width: 200px;
height: 100px;
border-radius: 5px;
background-color: #c8c8c8;
}
.inner {
height: 100%;
min-height: 100%;
min-width: 100%;
width: 100%;
border-left: solid 5px #097fee;
border-radius: 5px;
}
<div class="outer">
<div class="inner">
Some content
</div>
</div>
So I am making a little site just for fun - and to learn HTML a little better.
I have four divs. I want the to be arranged kind of like a collage. I have three of them in the perfect positions, but the fourth one does not show up at all unless I make the other three invisible with display:none in the CSS...
Anyone know why this would happen? Im using Chromium on Ubuntu.
<body>
<center>
<div id="content1">
</div>
<div id="content2">
</div>
<div id="content3">
</div>
<div id="cont4">
THIS ONE DOESN'T SHOW UP.
</div>
</center>
</body>
Here is the CSS:
#content1{
width:230px;
height: 160px;
background-color:blue;
border-radius:10px;
position: relative;
left: -240px;
}
#content2{
width:230px;
height: 350px;
background-color:red;
margin-top: 10px;
border-radius:10px;
position: relative;
left: -240px;
}
#content3{
width:230px;
height: 520px;
background-color:red;
border-radius:10px;
position: relative;
top: -520px;
}
#cont4{
width:230px;
height: 350px;
background-color:purple;
position: relative;
left: 240px;
}
From what I saw in Chrome and Firefox, cont4 is showing up, but it's way down on the page (you have to scroll to see it). I don't know exactly where you want it, but adding top: -1040px aligns it at the top of the page with the rest of the divs.
#cont4{
width:230px;
height: 350px;
background-color:purple;
position: relative;
left: 240px;
top: -1040px;
}
Give #cont4 a top: -1040px;. This means, for the previous div, you applied a -520px top to make it align top. So this lengh + height of that div (520+520=1040) is required for your purple div to appear. Here is the demo.
But this is not my solution. Use margin-top: -520px; instead of top: -520px; to your third div. This will shift the fourth div along with the third div. But top wont do this. top is for tweak an element with use of position property. margin-top is for measuring the external distance to the element, in relation to the previous one.
Also, top behavior can differ depending on the type of position, absolute, relative or fixed.
Here is the corrected demo
The tag center is deprecated as Jared Farrish said. Actually, you should use CSS more carefully to get this types of layouts. There are lots of example is available. Trying to search with "Multi Column Layout with CSS". You can check THIS tutorial.
Also, THIS is very useful resource. THIS tool is interesting one. You can check this as well.
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.)