I have an icon that is absolute positioned at bottom: 50px, while this works fine in every browser, Edge and IE are the exceptions. I understand there are a lot of problems with Microsoft's browsers and how they render differently. Here I see that the browser is treating the mid-way point of the 100vh div as the bottom. What I need help with is to position the icon in IE & Edge the same way it is in Chrome, Opera and Firefox. Thanks.
IE & Edge
Chrome, Firefox, Opera
HTML
.content1 {
height: 100vh;
width: 100%;
position: relative;
top: 0;
z-index: 99;
}
/* this is the icon I was talking about */
.dropdown_blue1 {
width: 25px;
padding: 20px;
position: absolute;
margin: auto;
z-index: 99;
left: 0;
right: 0;
bottom: 50px;
}
<div class="content1"><img class="dropup_blue1" src="../assets/dropup_blue.png" alt=""><img class="dropdown_blue1" src="../assets/dropdown_blue.png" alt=""></div>
Try with this one, i have changed margin: auto; to margin: 0 auto;
.content1 {
height: 100vh;
width: 100%;
position: relative;
top: 0;
z-index: 99;
}
.dropdown_blue1 {
width: 25px;
padding: 20px;
position: absolute;
margin:0 auto; /* change here */
z-index: 99;
left: 0;
right: 0;
bottom: 50px;
}
<div class="content1">
<img class="dropdown_blue1" src="../assets/dropdown_blue.png" alt="">
</div>
I had a similar problem with the two browsers, position absolute was crazy. In style section I had.
td.Cir {width:7in; height:7in; background-image:url('clock.png');
background-size: 45%; background-position: center;
background-repeat:no-repeat; position:relative; font-size:28pt;
min-width:7in; max-width:7in; text-shadow: -1px 0 blue, 0 1px blue,
1px 0 blue, 0 -1px blue;}
In a table I had
</td></tr><tr><td class='Cir'>...</td><td>...</td></tr>
I changed code to
<table><tr><td class='Cir'>...</td><td>...</td></tr></table>
and Edge and IE now work fine
I fixed it! Simply use margin-left: auto; and margin-right: auto; instead of margin: auto;
Related
After searching to center my div all I could get was margin: 0 auto; together with an assigned width, but still it not working.
My problem is simply centering a div. I have no idea why margin: 0 auto; isn't working.
Here is the layout of my CSS/html:
CSS
.countdown-box {
position: absolute;
width: 80px;
margin: 0 auto;
height: 130px;
/*left: 50%;*/
background: #008040;
border-radius: 4px;
z-index: 2;
}
<div class="countdown-box"></div>
It's because you are using position: absolute;. Change it to position: relative; and it will work.
The margin: auto works with elements with relative position. To center with absolute position should be like the following CSS:
.countdown-box {
position: absolute;
background: #008040;
border-radius: 4px;
height: 130px;
width: 80px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="countdown-box"></div>
Actually margin auto will allocate the available space, which means it doesn't has any relation with it is relative or not.
<div class="centerize"></div>
.centerize {
width: 200px;
height: 200px;
margin: 0 auto;
background: yellow;
}
This Blur works well in Chrome, but not Edge or IE. It seems like a Microsoft bug. Can someone find what's wrong in my code so that I can get the expected behavior?
Thanks!
https://jsfiddle.net/o3xpez4s/1/
<div id="MainBackground">
<div id="TextBoxArea">
<div id="BlurDiv"></div>
<div id="TextDiv">TEXT GOES HERE</div>
</div>
</div>
#MainBackground {
background-image: url(http://placekitten.com/700/300);
height: 250px;
width: 600px;
border-radius: 8px;
}
#TextBoxArea {
/* This should float towards the bottom of the MainBackground image */
/* It should have a clean, non-blurred border */
position: relative;
width: 450px;
top: 170px;
left: 60px;
border: 2px solid;
border-color: black;
border-radius: 25px;
overflow: hidden;
padding: 10px;
text-align: center;
height: 45px;
}
#BlurDiv {
/* This should contain the blurred background image */
/* The image is moved a bit so that the eyeballs of the image are visible and blurred */
position: absolute;
width: 100%;
height: 100%;
top: -100px;
left: -50px;
padding-left: 50%;
padding-top: 50%;
background-image: url(http://placekitten.com/800/300);
background-position-x: -134px;
background-position-y: -52px;
background-repeat: no-repeat;
-webkit-filter: blur(10px);
filter: blur(10px);
}
#TextDiv {
/* This just contains text. Text text should not be blurred. */
position: relative;
color: white;
font-size: 40px;
font-weight: normal;
}
CSS3 filters do not work in IE 10 — they are not supported. Some older versions of Firefox also don't support filters.
You can check for support at this link :
http://caniuse.com/#feat=css-filters
I have to centralize an image in both axis and then add a linkable area to that image's top left area. This works great for webkit and ff but ie fails. My html code is this:
<body>
<div class="content">
<img src="images/main_image.jpg" />
Logo
</div>
</body>
and my css code this:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
position: relative;
top: -50%;
}
div.content a {
width: 14%;
height: 9%;
display: inline-block;
position: absolute;
top: -42%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
}
this doesn't work for ie because i use an a tag displayed as inline-block positioned accordingly. Our friend ie doesn't show the linkable part in the screen at all because the text-indent. Can someone help a little bit? Thanks. This demo shall help you more i think.
Take a look at this demo (or results only here)
HTML is not changed. I assume that image has the same height/width as content div
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
padding: 0;
border:solid 1px blue;
width: 1001px;
height: 626px;
/*below will center div on screen */
top: 50%;
margin: -313px auto 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
border:solid 1px white;
/*top:-50% removed. Assuming that image has the same height/width as content div*/
}
div.content a {
width: 14%;
height: 9%;
position: absolute;
/* top: -something changed. Remember that absolutely positioned div is always positioned from closest parent relative div*/
top: 10%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
border:solid 1px green;
}
It looks a like you're creating a container, moving it to the bottom of the screen and then moving the image outside of it to the top-left corner of the screen. This last step is exactly what will fail in many cases. Child-elements usually will be hidden or cutted away when leaving their parent container. IE is more restrictive but correct in this case.
You can achieve your goal easier when you'll place the image outside the container. Keep in mind that body is a container by itself that is allways 100% wide and high (and cannot be changed to be 50% or whatsoever).
Here's the result on js-fiddle
The Html:
<body>
this is the body
<img class="my_image" src="images/main_image.jpg" />
<div class="content">
This is the container
<a href="#" >Logo</a>
</div>
</body>
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
color:silver;
}
div.content {
color:black;
background-color: silver;
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
.my_image {
width:160px;
height:60px;
border:1px solid red;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
left:0;
}
div.content a {
color:red;
font-size:14px;
display: inline-block;
position: absolute;
top: 20%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
}
In general it's the best to avoid negative values. They're misinterpreted in many browsers and produce problems.
UPDATED PROVIDING CONTEXT FOR THE LAYOUT
I have a relatively simple structure for my page. The page is composed of two div's both absolutely positioned. One is centered within the other.
<div id="protocol_index_body_wrapper">
<div id="protocol_index_body">
</div>
</div>
Which has the corresponding CSS:
#protocol_index_body_wrapper {
background: url("/images/stripe.png") repeat scroll 0 0 transparent;
position: absolute;
top: 120px;
left: 0px;
right: 0px;
bottom: 10px;
}
#protocol_index_body {
width: 960px;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
The expected behavior is seen in the image above. This behavior is present in IE8, Firefox, and Chrome. However, in IE7 the div which should be centered is flush against the left side. Any ideas?
Try this:
#protocol_index_body {
width: 50px;
margin: 0 auto 0 -25px;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
background-color: red;
}
Or ...
#protocol_index_body {
width: 50px;
margin: 0 auto 0 50%;
position: absolute;
top: 0;
left: -25px;
right: 0;
bottom: 0;
background-color: red;
}
Unless you need the parent div to have a fluid width (which would be a little silly when you're setting the child div's width), why not just set the parent div's width and add margin:0 auto?
Okay I played around with it and this works identical in FF, Opera and IE7:
#protocol_index_body_wrapper {
background-color:black;
padding: 0 0 20px 0;
position: absolute;
top: 120px;
left: 0px;
right: 0px;
bottom: 10px;
text-align: center;
width: 100%;
height: 100%;
}
#protocol_index_body {
width: 50px;
margin: 0 auto;
background-color: red;
height: 100%;
}
autoCenterAlign = function() {
var bodyWidth = $("body").innerWidth();
var protocolWidth = $("#protocol_index_body").innerWidth();
if(protocolWidth < bodyWidth) {
$("#protocol_index_body").css("left",((bodyWidth-protocolWidth)/2)+"px");
}
}
window.onload = autoCenterAlign;
window.onresize = autoCenterAlign;
jQuery(window).load(function () {
autoCenterAlign()
});
text-align:center to the wrapper, or <div align=center> (ugly, I know, but works)
or with JS:
document.getElementById("protocol_index_body_wrapper").style.marginRight = (document.body.clientWidth - 50)/2_+"px"
works only on IE6+.
I have some div layers on my site that move to the wrong position when you navigate to the page (almost like the margins are being ignored?) this happens in most browsers i.e. Safari, FF, Chrome etc. Does anyone know why this would happen? Interestingly, the site seems OK locally and only seems to play up once I've uploaded it!! I'd appreciate any help/advice anyone can offer....
CSS:
#page-wrap-padding {
width: 1078px;
height: 700px;
margin: 0px auto 0px;
background-color: transparent;
}
#page-wrap {
width: 978px;
height: 610px;
margin: 35px auto 0px;
background: #dc000f;
overflow: hidden;
z-index:1000;
}
#guts{
margin: -15px;
overflow: hidden;
z-index: 2000;
}
#index-innards2{
position: absolute;
background: #dc000f;
margin: 0px 0px 0px 600px;
width: 378px;
height: 550px;
}
#index-innards{
position: absolute;
margin: 104px 0px 0px 230px;
width: 340px;
height: 390px;
}
HTML
<div id="page-wrap-padding">
<div id="page-wrap">
<div id="guts">
<div id="index-innards2">
Content here
</div>
<div id="index-innards">
More content here
</div>
</div>
</div>
</div>
I made a jsFiddle here: http://jsfiddle.net/FPRFJ/
Is it possible you are experiencing the default margins supplied by browsers?
Try adding this:
body
{
margin: 0;
padding: 0;
}