IE7 seems to show scrollbars when an item that has position: relative on it USED to cause a scroll-bar (e.g. it would if you took position: relative off).
<div class="box">
<div class="inner box"></div>
</div>
.box {
position : absolute;
top : 5px;
left : 100px;
right : 5px;
height : 100px;
border : 1px solid #000;
}
.inner {
right : auto;
position : relative;
width : 110%;
left : -90px;
}
Demo: http://jsfiddle.net/VE9ne/1/
Wondering if anyone has seen this and knows how to fix it?
Use negative margins instead of negative left
...
left:0;
margin-left:-90px;
Add
html, body
{
overflow: hidden;
}
That's what relative positioning does, it leaves an empty space at the object's original position if you offset it. I guess IE7 is not as smart as other browsers so it will show scrollbars whereas others seem to realize there's nothing but empty space to show.
Here's what w3.org has to say about it:
[...] Offsetting a box (B1) in this
way has no effect on the box (B2) that
follows: B2 is given a position as if
B1 were not offset and B2 is not
re-positioned after B1's offset is
applied. [...]
Source: http://www.w3.org/TR/CSS21/visuren.html#relative-positioning
Using margins and floats instead of relative positioning could solve your problem
Related
I have a glyphicon as such:
<div class="col-xs-4 col-sm-2">
<span class="glyphicon glyphicon-circle-arrow-up glyphicon-large"></span>
</div>
.glyphicon-large {
min-height: 260px;
font-size: 35px;
width: 1em;
display: block;
top: 50%;
margin: -0.5em auto 0px;
}
The glyphicon won't align to the center, vertically. When I open firefox, inspect element, and toggle off/on the top 50% rule, it suddenly works. How come?
Browser Bug Explanation
According to MDN on top:
For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.
Note: Percentage is applied as a percentage of the height of the element's containing block
According to W3 on top:
For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).
Note: Percentages refer to height of containing block
Here's my guess:
I think what's happening is that when the browser is first rendering the visual tree, and sees top:50%;, it looks to the parent to set the height. Since no height has been specifically applied, and it has not loaded any child contents, the height of this div (and all divs) effectively starts off as zero until otherwise indicated. It then pushes down the glyph by 50% of zero.
When you toggle the property later, the browser has already rendered everything, so the calculated height of the parent container is provided by the height of its children.
Minimal, Complete, and Verifiable Example
Note: This doesn't really have anything to do with Bootstrap or Glyphicons. In order to avoid a dependency on bootstrap, we'll add top: 1px that would have been applied by the .glyphicon class. Even though it is overwritten by 50%, it still plays an important role.
Here's a simple set of parent/child elements:
<div id="container">
<div id="child">Child</div>
</div>
In order to simulate the toggling the property in a more repeatable fashion, we can just wait two seconds and then apply a style in javascript like this:
window.setTimeout(function() {
document.getElementById("child").style.top = '50%';
},2000);
Example 1 (jsFiddle)
As a starting point, let's recreate your issue.
#container {
position: relative;
/* For Visual Effects */
border: 1px solid grey;
}
#child {
position: relative;
height: 50px;
top: 1px;
/* For Visual Effects */
border: 1px solid orange;
width: 50px;
margin: 0px auto;
}
Notice that as soon as you resize the window, the browser will repaint the screen and move the element back to the top.
Example 2 (jsFiddle)
If you add top: 50% to the child element, nothing will happen when the javascript adds the property because it won't have anything to overwrite.
Example 3 (jsFiddle)
If you add top: 49% to the child element, then the DOM does have something to update so we'll get the weird glitch again.
Example 4 (jsFiddle)
If you add height: 50px; to the container instead of the child, then the top property has something to position against right from the get go and you don't need to use toggle in JavaScript.
How to Vertically Align
If you just wanted to know how to vertically center something consistently, then you can do the following:
The trick to vertically centering text is to set the line-height equal to the container height. If a line takes up 100 pixels, and the line of text online takes up 10, then browsers will try to center the text within the remaining 90 pixels, with 45 on the top and bottom.
.glyphicon-large {
min-height: 260px;
line-height: 260px;
}
Solution in jsFiddle
Tried centering a glyph icon that was inside an H1 tag, that was taking a while - so I discovered that you can actually change the font size and colour inside the SPAN tag contaning the glyph.
Thus:
<h1><span class="glyphicon glyphicon-envelope" style="font-size: 24px; color: #108db7;"></span> Mes Messages</h1>
actually worked out for me.
Have you tried ? :
<span class="glyphicon glyphicon-circle-arrow-up glyphicon-large" style="vertical-align:middle"></span>
For some reason, I can't get this to work:
Website
(The red and green boxes will be removed once they're properly positioned.)
Thanks for the help.
The overall concept of centering something in css is quite simple. First you need a relative positioned container. The child element to be centered must have a fixed width and height and be absolute positioned at 50% from the top and 50% from the left, and both top and left margins must be negative half of the width and height respectively. In other words:
<div id="container">
<img src="" alt=""/>
<div class="box"></div>
</div>
.
#container { position: relative; }
img { dispaly: block; } /* It fills the container */
#box {
position: absolute;
width: 300px; /* Fixed */
height 150px; /* Fixed */
top: 50%;
left: 50%;
margin-top: -75px; /* 300/2 */
margin-left: -150px; /* 150/2 */
}
As suggested, you can do this with CSS positioning tho for what you appear to be trying to do, you might be better off using an image map
http://www.w3schools.com/tags/tag_map.asp
This allows you to set certain regions of an image as a link.
Try to set the following properties along with position
top:0;
left:0;
you can also set top or left property in order to make the boxes visible at the center
and if you want that your boxes will remain inside the center div then make the div with id splash to position: relative
it will help in solving your issue
I'm trying to center 1 #div box with two small #divs inside of it, to be in the exact middle of the screen/page - ideally across all resolutions and IE 6 +, whats the best approach?
margin:0 auto;
seems to do the trick horizontally, but what about vertically?
If you know the size of the element you want to center, you can set the following CSS for it to center horizontally and vertically:
#centered {
position : absolute;
left : 50%;
top : 50%;
width : 150px;
height : 200px;
margin : -100px 0 0 -75px;/*set the left and top margins to the negative of half the element's width and height (respectively)*/
background : #000;
}
Note that the parent of the element needs to have position set to something other than static:
#container {
position : relative;
width : 100%;
height : 100%;
border : 1px solid #000;
}
Here is a jsfiddle: http://jsfiddle.net/jasper/rcN3P/
P.S. I checked and this works in I.E. 6.
I just read this article on css-tricks about centering, it gives a interesting approach using pseudo elements, but you could just as easily add those elements into the markup instead (it wont be semantic but it will work).
http://css-tricks.com/14745-centering-in-the-unknown/
How can I do this:
an image
a simple small DIV on top of the image, centered vert/horiz, which doesn't appear until the image is rolled-over
Try this:
<div style="position:relative;top:0;left:0;">
<img src="path/2/img.png" style="z-index:1;"
onmouseover="document.getElementById('hidden').style.display='block';">
<div id="hidden" style="display:none;position:absolute;z-index:10;"></div>
</div>
If it works for you, clean it up before you deploy it! :)
NOTE: div#hidden is not yet centered over the image. If you know the width and height of it in advance, you can use this method:
#hidden {
top:50%;
left:50%;
margin-top: -(heightOfHiddenDiv/2)px
margin-left: -(widthOfHiddenDiv/2)px
}
Otherwise you will need to get the computed values of width and height in JavaScript.
If you can have a fixed width and height for the <div>, then I’d suggest this:
HTML
<div class="hover_image">
<img width="250" height="300" src="http://pauldwaite.me.uk/images/professional.jpg" />
<div class="overlay">Hello!</div>
</div>
CSS
.hover_image {
position: relative;
float: left;
}
.hover_image .overlay {
visibility: hidden;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 3em;
margin: -2em 0 0 -55px;
padding: .5em 5px;
background: #006;
color: #fff;
}
.hover_image:hover .overlay {
visibility: visible;
}
http://jsfiddle.net/ZKXgw/
You may need to add some JavaScript to make .hover_image:hover work in earlier versions of IE, which didn’t support :hover on anything except links.
If you can’t have a fixed width/height, it’ll be a lot tricker to achieve.
Things aren't really clear to me, any way you can play with the CSS/style of the element to work around on this.
To center an element you can set the top and left by 50% where its position is set to absolute. Then set the margin-top the half size of its height in negative, and the margin-left the half size of its width in negative.
To place the div in top of the image, its z-index must be higher than the image. But first the image must have the higher z-index until its not rolled-over.
To show the div on top of the image change the z-index of the image lower then the div. Using hover or onMouseOver event. There other ways of doing this, base on your needs.
See jsfiddle in action
You can use z-index property with absolute positioning to place the div on top of the image. Since you want this to be hidden, set the "display" property in css to "none".
The second part of your question can be accomplished by using a javascript function that you can call onmouseover [ http://www.w3schools.com/jsref/event_onmouseover.asp ]. All the function would have to do is change the "display" property of the element from "none" to "block".
This is a simplified version of something I'm trying to do. Works in every browser other than FF:
http://jsfiddle.net/hDFnW/10/
Basically, I'm trying to get an input to apply width:auto; when position:absolute;left:200px;right:0px is set.
It works on anything other than an input... I'm rather confused right now.
How can I accomplish this in Firefox, or better yet, across all browsers?
You can wrap the input with a div and then it works.
CSS
div {
display : block;
position : absolute;
left : 100px;
right : 0px;
top : 3px;
}
input {
width : 100%;
border : 1px solid #000;
background : #FFF;
}
jsFiddle using other examples.
jsFiddle all working.
Example
You can get a similar effect (albeit not the same however) using floats.
Very simple fix...no wrapping required. IE, Chrome, FF - all good.
http://jsfiddle.net/LGn9A/1/
don't mix the pixels w/ percentages :-) (in this case)
ul {
width : 95%; /* here */
font : 12px/1.4 tahoma; /* global aethetics */
....
}
li { ... }
input, span {
display : block;
position : absolute;
left : 20%; /* here */
right : 0px;
width : 80%; /* and here */
}
FF-- will cooperate using white-space:nowrap; works in IE, and Chrome as well.
<li>Title
<span style="border:0px">
<input style="width:100%;left:0px;white-space:nowrap;">
</span>
</li>
http://jsfiddle.net/hDFnW/16/
I came up with two solutions:
http://jsfiddle.net/w6fGY/ - fixed width for <span> and <input>
http://jsfiddle.net/B4MKu/ - all <input>s wrapped in <span> and width:100%.
I hope it's of use.
A simple solution to this problem is to use position:relative on input and assign its left position and width value using percentage and not px. That's because parent ul width is specified in percentage and not px. Otherwise the solution would be easy if a fixed width was given to the ul element
<ul>
<li>Title<input></li>
<li>Title<input></li>
</ul>
ul {
width : 95%;
border : 1px solid #000;
font-family : tahoma;
padding : 5px;
position:relative;
}
li {
background-color : #EEE;
margin : 2px;
padding : 3px;
}
input {
position:relative;
left:20%;
width:75%; /* I used 75% to give an extra 5% room for paddings and margins specified by parent elements ex: li ul) */
}
Check working example at http://jsfiddle.net/t5CvC/1/
It seems -moz-calc would work, but only in FF4.
As you said you don't want wrapper spans or divs.
There's a slightly hacky way in this jsfiddle
Summary:
Change the box-sizing model to contain borders and padding, then add the 100px as left padding so the input text value moves over but the width stays at 100%; - then clip the input to chop off the extra left bit and show the title text again. Only problem is, there's no left border, I tried to add a fake one with a pseudo element.. needless to say the fake border doesn't work in IE8 and none of it works in IE7
Update
updated code to use a background image which now gives a border effect in IE too ==> jsfiddle