I have a div with margin-top:-200px. I want the div to move up/behind the div above it.
Works great in all browsers except IE so far. margin-top:200px works, so I know it's not a collapsing margin issue.
Is there a bug I am not aware of here?
IE doesn't like negative margins and doesn't render them properly. Position your elements relatively or absolutely and use top: -200px instead.
Note: positioning them may change the layout significantly and you may have to rework your styles.
Negative margin hide the div…
Here is trick
use zoom:1, position: relative
Problem:
.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
}
in IE red area of toolbar div hide itself. even we are using zoom: 1. to get rid of this problem we need to add position: relative too.
Solution:
so your css class will become
.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
zoom: 1;
position: relative;
}
http://trickyclicks.com
If the above doesn't help: make sure there's a div around your offending div. Now add a width of 100% to the offending div and float it to the left. Like this. Got rid of all my negative margin ie woes...
div.container {}
div.offender /*inside div.container*/ {
width: 100%;
float: left;
margin-bottom: -20px; /* ie fix */
zoom: 1; /* ie fix */
position: relative; /* ie fix */
display: block;
}
give position as relative. inline style is advisable. It may give some problem if you use external css.
In order to support negative margins in IE, I've fixed similar issues with display: table;. Other fixes like zoom: 1; and position: relative; don't always work (at least in my experience). If you only want to add this style to IE, I'd suggest using https://modernizr.com/
// using comment to show that .no-cssreflections belongs to the html tag
/*html*/.no-cssreflections .container { display: table; }
Related
Our website engine uses 960.gs grid system and I am trying to modify it to 3 columns Fixed(100px)-Fluid(max to width)-Fixed(100px) view. Unfortunately all 960.gs online generators makes just or full-fixed or full-fluid grids. So I am trying modify originally generated full-fluid grid to this view:
<------------100%--------------->
======== =============== ========
| fixed| |max to screen| |fixed |
======== =============== ========
<-100px> <-100px>
The Code (after modification):
http://jsfiddle.net/vZm8x/
Problem 1) I am not sure how to make central content area max to left
on the screen. Because width:auto; doesn't work at all, width:100% just wrapping divs.
Problem 2) after fixed to 100px all div it continues wrapping down
anything. (display:inline; doesn't help any ideas?)
My question is: Is that possible to modify 960.gs template according to our needs? If yes please give me any advice to fix the problems? Thank you in advance!
With fixed-width side columns, it's actually very easy. You're going to want to use floats, and may need to do a faux columns trick, depending on your specific design needs.
You'll want something along the lines of:
<div class="left"></div>
<div class="right"></div>
<div class="middle">Content</div>
and:
div {
/* border-box, to make sure "width" is our intended width */
-moz-box-sizing: border-box; /* Firefox still uses prefix */
box-sizing: border-box;
}
.left {
float: left;
width: 100px;
background: #f00;
}
.right {
float: right;
width: 100px;
background: #00f;
}
.middle {
width: 100%;
padding: 0 100px;
background: #ccc;
}
See it in action here (this is without the faux column effect, but should give you a starting point). If you change the width of the section with the output, you'll see that the columns stay put, and the content stays within the bounds of the outer columns.
The content column needs to be last, because it's still in the document flow, so the right column would end up below the content.
Alternatively, you can use position: absolute; on your side columns with something like this:
.wrapper {
position: relative; /* Constrains the columns within their parent. Not needed if parent is <body> */
}
.left {
position: absolute;
top: 0;
left: 0;
}
.right {
position: absolute;
top: 0;
right: 0;
}
.middle {
padding: 0 100px;
}
div {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
These tricks will work in IE8+, Firefox, Chrome, Safari, and Opera. IE7 might have issues due to using the W3C box model ("content-box") and not recognizing the box-sizing CSS, but there are a few tricks to make it work if you need it. IE6 should be okay, because it uses "border-box" based box model by default. (You may need to play with z-index to get IE to behave. If so, then set .middle{ position: relative; z-index: 1} and add z-index: 2 to the left and right columns.)
The position: absolute trick does have the advantage over the float one in that your sidebars can appear before or after the content div, making it the potentially more semantic option.
The reason these work is because a) your side columns are fixed, so we just set the padding to the width of those columns, and b) position: absolute and float: [left/right] take the elements out of the document flow, which means that as far as the document is concerned, they aren't there and take no space. This allows other elements to move to where those elements used to be, layering them over top of each other.
It works in chrome , and not in ff/opera.
Demo here: http://booksnearby.in/browse_items.php . The 'location: Dhoolsiras Village, delhi' line 'hangs' in the middle. I am trying to make it stay at the bottom of its container.
For this I tried
Child span tag- {
bottom: -5px;
font-size: 11px;
left: 115px;
line-height: 20px;
position: absolute;
}
Parent:- element.style {
height: 100%;
position: relative;
}
But it doesn't work, except in chrome. Please help
Thanks.
Do you have to use a table? Because your problems come from the td element's height. Tables have the worst cross browsers support out of all the html elements :)
Is it possible to change the structure to use div elements instead?
OR you could give the position: relative to your .listtd instead of the div (which means remove the position property from the div). This solution will do the trick.
If I remove the clearfix div, above the footer, the text falls into place, as it does on Firefox.
But that breaks other things. I don't understand how that clearfix can be affecting the footer at all though...
My page:
http://www.craftonhills.edu/Current_Students/Counseling/Assessment.aspx
It looks like your footer element as these style rules associated with it:
#footer {
clear: both;
font-size: 1.4em;
height: 150px;
margin-top: -150px;
position: relative;
}
If you remove the margin-top: -150px rule, it looks like that clears up Chrome.
In the #content style, it looks like you have a padding-bottom: 150px; rule that is pushing everything down quite a bit. Might want to reduce that a bit as well.
If your goal is a Sticky footer, for some reason adding the margin-bottom: -150px; rule to the #container element worked in Firefox, Chrome, and IE for me. However, I think it's a bit higher than 150px.
I ended up adding a .push div below my clearfix div, giving it a height of 180px (the correct height, with padding, rather than 150px). Not semantic, but it seems to fix Chrome.
I have this slideshow that I'm trying to simply move up, but I can't position it right to get it up. Right now there is all this white space. Can someone help me out on where I'm going wrong? Just view it in Firefox or IE to see the whitespace. It works in Chrome of course, b/c everything works in chrome.
http://modernd-i.com/
I try to use position in css but in these browsers it doesn't budge.
IT looks like you're using a table for the layout. the <td> that contains the image gallery has an a vertical alignment set to vertical-align: baseline; if you change that in the html to valign="top" it will make it work. Checked it in Firefox, not IE.
In your styles.css, line 4 you have:
...tfoot, thead, tr, th, td {
background: none repeat scroll 0 0 transparent;
border: 0 none;
margin: 0;
padding: 0;
vertical-align: baseline; /* this is what is causing it */
}
Change that last one to: vertical-align: top
Baseline as a global declaration isn't the best idea, unless it's intentional.
Hope this helps.
This should work:
#yourslideshow {
position: relative;
top: (-X)px;
}
*-X represents the number of pixels.
Since you don't have a jsfiddle I can't tell you exactly how much. But if you use top, that is how many pixels are in between your slideshow and the top of the page. (you could also use bottom, and not use a negative value).
ex.
#yourslideshow {
position: relative;
bottom: (X)px;
}
I know you said you used position, but I'm not sure which type of position you used since you didn't specify.
THEN
If position still doesn't work, you can try either a positive margin-top or a negative margin-bottom
#yourslideshow {
position: relative;
margin-bottom: (X)px;
}
OR
#yourslideshow {
position: relative;
margin-top: (-X)px;
}
I have a square div of fixed size and wish to place an arbitrary size image inside so that it is centred both horizontally and vertically, using CSS. Horizontally is easy:
.container { text-align: center }
For the vertical, the common solution is:
.container {
height: 50px;
line-height: 50px;
}
img {
vertical-align: middle;
}
But this is not perfect, depending on the font size, the image will be around 2-4px too far down.
To my understanding, this is because the "middle" used for vertical-align is not really the middle, but a particular position on the font that is close to the middle. A (slightly hacky) workaround would be:
container {
font-size: 0;
}
and this works in Chrome and IE7, but not IE8. We are hoping to make all font lines the same point, in the middle, but it seems to be hit-and-miss depending on the browser and, probably, the font used.
The only solution I can think of is to hack the line-height, making it slightly shorter, to make the image appear in the right location, but it seems extremely fragile. Is there a better solution?
See a demo of all three solutions here:
http://jsfiddle.net/usvrj/3/
Those without IE8 may find this screenshot useful:
If css3 is an option, then flexbox does a good job at vertical and horizontal aligning:
UPDATED FIDDLE
.container {
display:flex;
align-items: center; /* align vertical */
justify-content: center; /* align horizontal */
}
How about using your image as a background? This way you could center it consistently everywhere. Something along these lines:
margin:5px;
padding:0;
background:url(http://dummyimage.com/50) no-repeat center center red;
height:60px;
width:60px;
This is REALLY hacky, but it is what we used to do in the ie6 days.
.container {
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
margin-top: -12px; // half of whatever the image's height is, assuming 24px
margin-left: -12px; // half of whatever the image's width is, assuming 24px
}
I may be missing something in this example, but you get the idea.
Have you tried the following:
img {
display: block;
line-height: 0;
}
I usually use this hack, but I haven't really checked it that thoroughly in IE8.
Here is a small JS Fiddle I have made: http://jsfiddle.net/rachit5/Ge4YH/
I believe it matches your requirement.
HTML:
<div>
<img src=""/>
</div>
CSS:
div{height:400px;width:400px;position:relative;border:1px solid #000;}
img{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}