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.
Related
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.
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 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.
So Facebook displays a popover showing a profile-preview of the person on whose name you're hovering. If you have problems reproducing this, because the popover always appears on top of the name, just scroll down a little, leaving it not enough room to be shown above the name. Here's an example:
http://i.stack.imgur.com/bD1lk.jpg
(apparantly i need 10 posts for images.. sorry!)
There's this little triangle showing its part of the respective background image. What technique was used to achieve this? I haven't been able to come up with a solution, yet. Since it doesn't seem to be css3 masking and generating a single image for each picture would be kinda overkill...
I hope you can help me out here.. Either i'm just using the wrong search queries or the solution is deliberately hiding from me!
Thanks in advance!
Cheers
// edit:
I have played around a little more and found out, that the space around the triangle definitely is transparent as seen in the following picture:
http://i.stack.imgur.com/7jBIj.png
This means it's not the technique shown by kalley (which is a really nice start, tough!).
You could try something like this: http://jsfiddle.net/Z6fYj/
It requires that you know the background color that it's going to be on top of, but you can see the effect.
.img {
background: url(...) no-repeat;
background-size: 500px auto;
/* -10px relates to the top position of :before */
background-position: 0 -10px;
width: 500px;
height: 372px;
position: relative;
margin-top: 20px;
}
.img:before {
background: url(...) no-repeat;
background-size: 500px auto;
/* -40px is the opposite of the left property */
background-position: -40px 0;
position: absolute;
width: 0;
top: -10px;
left: 40px;
content: '';
border-bottom: 10px solid transparent;
border-right: 10px solid #fff;
border-left: 10px solid #fff;
}
I'm not sure if that's exactly how facebook is doing it (can't seem to trigger the mouseover manually...), but this can probably give you a start.
I am using fancybox to allow users to send messages to one another. I have a wierd issue where the fancybox's close button shows four times in google chrome but works just fine in firefox.
Here is the css for the button
#fancybox-close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background: transparent url('fancybox.png') -40px 0px;
cursor: pointer;
z-index: 1103;
display: none;
}
Hmmn.. Seeing example page would help.
This shouldnt happen... but im going to throw in a guess that overflow: hidden; could help.
try adding:
background-repeat: no-repeat;
you might want to mess about with the width and height etc too