having a hard time figuring out how to fix my layout issue in IE.
For centering my site title in my header I am using css transform.
.herobox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
This works fine in chrome, firefox, mobile, etc...
But when i view the site in IE, it causes a huge horizontal scroll bar that i cant seem to get rid of.
It seems IE thinks that the element is still not moved to the center of the screen and is still on the right side of the page.
If i remove just the the transform element from the css, i get this.
.herobox {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
}
When I remove the herobox element all together, It removes my site title and all that fun stuff, and the horizontal scroll bar and white space on the right side of the screen goes away.
I'm stumped.
UPDATE
My current header css styles.
/*------------------------------------*
#HEADER-STYLES
\*------------------------------------*/
header {
height: 75vh;
color: #fff;
/* NEEDED TO POSITION ELEMENTS INSIDE HEADER */
position: relative;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(cssimages/header-footer/headerbkrnd3-xsm-min.jpg) no-repeat center center;
background-size: cover;
}
I had to change temporarily to using margin: 0 auto and top:25% until i can figure out why css transform is not working in ie 11. It wouldn't bother me as much if it didnt work before IE 9, but many people still use IE11.
Related
I have a page that displays correctly in Google Chrome, Firefox, and Opera, but has an error in Internet Explorer 11.
Here is the HTML, with the unnecessary parts stripped out:
<div class="container">
<div class="page-content">
<div id="corner"></div>
... page contents here
</div>
</div>
And here is the CSS:
.container {
margin: 0;
min-height: 100%;
padding: 0;
}
.page-content::after {
content: "";
display: block;
height: 1px;
}
.page-content {
background: linear-gradient(137deg, transparent 121px, #ffffff 20px) repeat scroll 0 0 rgba(0, 0, 0, 0);
margin: 190px 100px 150px;
max-width: 64em;
padding: 10px 120px 145px;
z-index: 2;
}
.page-content {
margin: auto;
max-width: 64em;
padding: 0 1em 1em;
}
#corner {
background-color: #ffffff;
background-image: url("corner.png");
display: block;
height: 200px;
left: 120px;
position: absolute;
top: 20px;
width: 200px;
z-index: -1;
}
As you can see in this screenshot the #corner element is not positioned correctly.
I'm really not sure what to try, since this is specific to Internet Explorer. Been trying different things with the code over the past couple of hours with no luck so far.
try adding position:relative to the containing elements of div#corner, .container and/or .page-content
position:relative on a containing element sets the bounds of an absolutely positioned element equal to the parent element, rather than the whole page.
so a value of left:0px isn't equal to the top left side of the page, but the left side of the parent element.
It is somewhat surprising this only occurs in ie11 though as its a pretty straightforward issue which makes me suspect that there could easily be a secondary solution, but then again, having had to support IE since ~ie6 I guess I'm not really all that surprised if its just IE sucking.
Side note: Not sure if this is what you're trying to do, but min-height:100% does not make content's size to 100% the height of the screen.
Replace that with this:
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
Anyway, you've set #corner to
position: absolute;
top: 20px;
left: 120px;
And that's where IE is placing it, relative to the entire page. It's doing what you're telling it to do. With the other browsers, it's position is absolute compared to that header. But to take a guess, you probably wanted to set it to position: relative.
Just in case this helps someone else:
I had a similar issue. It looked like ie11 was ignoring the 'right' property:
right: -320px;
but it turned out to be because I had set the 'left' property to:
left: initial;
Turns out the 'initial' keyword is unsupported by ie11:
left: initial doesn't work in internet explorer
I have a simple page with two offcanvas menus, one in which side, they both work normally when in english, but since I also need to support arabic, I use the dir="rtl" in the html tag, and with it the right offcanvas menu have some weird behaviour on Chrome, looks like a repaint issue, when I resize the window it goes to the right position (sometimes it goes randomly after a few seconds as well).
I'm using transform: translateX(); and transform: translate3d(); in the body to achieve this, and as far as I can see there's nothing wrong.
Here's a codepen example of the bug: http://codepen.io/Ghostavio/pen/WbgXXZ
Its a simple thing I did Hope This is your answer
What I did was made the body position Fixd
in body:
position: fixed
Your New CSS will look like this:
box-sizing: border-box
body
padding: 5%
position: fixed /*Changed Here*/
overflow-x: hidden
transition: .3s ease-in-out transform
&.left-offcanvas-active
transform: translateX(270px)
//transform: translate3d(270px, 0, 0)
&.right-offcanvas-active
transform: translateX(-270px)
//transform: translate3d(-270px, 0, 0)
header
text-align: center
position: relative
img, svg
vertical-align: middle
a
text-decoration: none
.logo img
width: 240px
max-width: 100%
.gc
fill: #8E8E8E
.content
text-align: justify
.hamburger-icon
position: absolute
top: 10px
left: 0
cursor: pointer
.second-icon
left: auto
right: 0
.left-offcanvas, .right-offcanvas
witdh: 270px
min-width: 270px
height: 100%
background-color: #BABACA
position: fixed
display: block
top: 5%
.left-offcanvas
left: -270px
.right-offcanvas
right: -270px
.offcanvas-links
display: block
padding: 20px
color: #117EBF
border-bottom: 1px solid #E1E1E1
font-weight: 800
text-decoration: none
span
background-color: #C80428
color: #FFF
padding: 0 5px
border-radius: 2px
font-weight: 400
float: right
Hope this helps you.
I had a similar issue creating a sticky header on a horizontal scrolling table for RTL. What I found is that in order to get position : sticky to work for RTL without JS, I had to assign z-index to both the sticky column (sticky header) and the scrollable columns.
At first I used JS to position everything and add offset padding to get the sticky header effect. But after a walking away in frustration and returning to it days later did I come up with a CSS only solution.
JSfiddle example
Would just like to ask what could possibly go wrong, I'm using wordpress and modified the theme css few years ago, I havent check the site for years and upon looking the hover for each element of circle was staying on hover effect even if it is not hovered. On its normal view, the inner circle which is dark gray together with the post title should not be visble until it is hovered please see the image:
Any thoughts? the site is -- --
Thanks
the h3 in the a tag has colour values
div.caption.boxcaption a.view h3 { color:Transparent; }
div.caption.boxcaption a.view:hover h3 { color:White; }
You need to position the background blocking image on the a.view instead of the div.boxcaption changing its position to off screen on a.view:hover
div.boxcaption {
background: url("images/circle_caption.png") no-repeat scroll center top rgba(0, 0, 0, 0);
height: 112px;
left: 0;
margin-left: 21px;
padding: 65px 10px;
position: absolute;
text-align: center;
top: 21px;
width: 210px;
z-index: 1000;
}
I have a wordpress website which is facing compatibility issues in Internet Explorer 8. http://www.sunsetbaycharters.net
The navigation menu is not loading properly in IE8 & IE7.
Bad Nav in IE8
Also, the content boxes in my site are not transparent in IE8. I understand that is because I'm using RGBA and I need to know how to fix it.
Please tell me how can I fix the navigation menu in IE8 & IE7 and the rgba transparent box.
CSS Code for Nav Menu:
div#top-menu, div#top-menu.et-fixed {
background-color: white;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 1000;
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.8);
height: 80px;
text-align: center;
}
For the content box background transparency you'll have to use a background image (as IE8 doesn't support transparency). Just make a 5x5 square PNG of the color/transparency you'd like to use and set it as a background repeat. For example:
.target-element {
background-image: url('images/your-transparent-tile.png');
background-repeat: repeat;
}
As for the box spacing issue, you'll have to give us a look at your CSS. It'll probably be something to do with IE8's lack of display: inline-block support.
I have a header with these properties:
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.5);
font-size: 20px;
width:100%;
height: 45px;
z-index:100000000000000000;
http://regaderamay.es.vu/cumpled
In all browsers it looks good, but in chrome only looks a header height 1px. I think it has to do with the slider images of wallpaper. But do not know how to fix it. Any help?
In Chrome for mac:
I highlighted in red is what is left of the header
#Jaumesv, I think this has to do with the z-index Chrome bug. As far as I can tell, the bug has not been fixed. You might want to try to use position: absolute instead of position: fixed, although I tried that out in web inspector and had no luck.