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.
Related
I'm trying to do some styling on Twitter Bootstrap modal close icon. This is the CSS I'm using:
.modal-header .close {
float: right !important;
margin-right: -30px !important;
margin-top: -30px !important;
background-color: white !important;
border-radius: 15px !important;
width: 30px !important;
height: 30px !important;
opacity: 1 !important;
}
It works pretty good on Chrome / IE, however sometimes on Firefox I get strange behavior (image is attached). Is there additional CSS rule that I have to supply to have this work on Firefox as well?
Depending on the version of firefox you may need to add -moz-border-radius: 15px
This proved to be an issue with graphic card(s) on several laptop(s) that were using Intel graphics. Funny thing is that only Firefox was susceptible to this problem.
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.
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 have this page:
http://bable.co.il/static/index1.php?page=safety&id=7
when you hover over articles, you will get a sliding menu.
this menu comes under the the article it self.
I tried to fix the z-index and the position of the menu with no success.
this is for explorer 8
I posted the link because I thought you could check the css by your self and figure what is going on.
anyway, here is the css of the ul that shows up:
.topnav{
display: none;
position: absolute;
z-index: 10000;
border: 1px solid black;
}
and here is the css of the element that comes on top of the menu:
.ac_subitem{
width:90%;
right:6%;
position: relative;
margin-top:1px; /* animate to -200px */
/*background: transparent url(../images/tpl/bg_menu.png) repeat top left;*/
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
can anyone help please?!!
You're totally missing the DOCTYPE in your page which in turn is rendering it in Quirks Mode. Add a proper DOCTYPE and it should work ok.
<!DOCTYPE html>
To use z-index your div has to be positioned absolute in your css. Did you do that?
The new scrollbars in Lion seem to adjust their color in Safari based on the background color of the body element. Is there a way to manually set whether the scrollbar should be dark or light? I know there are webkit CSS options to style the scrollbar which actually predated the new Lion scrollbars. My only issue with using that method is that the bar no longer functions like the real Lion one which fades out after scrolling has stopped. While I suppose that this could be accomplished using CSS animations and javascript for recognizing the start and end of scrolling it would be nice to simply use the real scrollbar w/o all of the "hackery".
Krinkle's fix (or similar) is probably the best, but for those curious, it's somewhat possible to style the scrollbar in Lion, albeit extraordinarily annoying. Here's the basic idea:
html {
overflow: auto;
}
body {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
overflow-y: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-track {
visibility: hidden; /* doesn't seem to work */
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background: rgba(0,0,0,0.5);
}
::-webkit-scrollbar:window-inactive {
visibility: hidden;
}
This is my closest approximation to Lion's default dark scrollbar. Here's where I got this all from: http://css-tricks.com/9130-custom-scrollbars-in-webkit/
From testing on Safari/Chrome it seems it's watching the background color of the body element and the body element only. Not per se the area that is visually underneath the scrollbar.
So when your page has a dark body background-color, it'll show a brighter, contrasting, scrollbar automatically.
For example the following:
html {
background: white;
}
body {
width: 50%;
background: black;
}
.. will trigger a white scrollbar (since the body background is black), however the surface the scrollbar is floating on (the right hand side of the html element) is white, so it's white on white (with a very subtle grey border).
See https://codepen.io/Krinkle/full/aPZNXp in Safari.
Huge thanks to #EdwardLoveall for his answer & corresponding link. This is my variation on his approach for a more iOS-style scrollbar (I'm using Lion + Chrome 19).
::-webkit-scrollbar {
background-color: black;
width: 1.25em /* 20px / 16px */;
}
::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,0.33333);
border: 0.25em /* 4px / 16px */ solid black;
border-radius: 1.25em /* 20px / 16px */;
}
As he noted, you can't really hide the track, but you can but a background on it. Making the background transparent doesn't seem to work either because it sits outside of the HTML element so there is just white below. Also a lot of properties like margin, padding, opacity, etc. don't seem to work but you can add a thick border the same color as the background to give the thumb a little room to breathe.
The only way is to set the light/dark background to html/body so the scrollbar would be of the opposite color and after that add the the desired background to the wrapper.
html,body {
height: 100%;
background: #000;
}
.wrap {
height: 100%;
background: #FFF;
}
The height: 100%; are for stretching the wrapper when there are a little content.