I am having a very odd opacity/hover problem in IE. Everything works in FF and Chrome.
Consider this page:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#outer").css("opacity", .7);
});
</script>
<style type="text/css">
#outer
{
position: absolute;
width:600px;
background: #111;
z-index:2;
overflow: hidden;
}
#outer div
{
float: left;
}
ul
{
list-style: none;
margin: 0;
padding: 0;
}
ul li
{
width: auto;
margin: 2px 4px 2px 4px;
padding: 2px 4px 2px 4px;
font-size: 11px;
color: White;
}
ul li:hover
{
background: red;
font-weight: 600;
cursor: pointer;
}
</style>
</head>
<body>
<div id="outer">
<div id="one">
<ul>
<li>111</li>
<li>222</li>
</ul>
</div>
<div id="two">
<ul>
<li>333</li>
<li>444</li>
</ul>
</div>
<div id="three">
<ul>
<li>555</li>
<li>666</li>
</ul>
</div>
</div>
</body>
</html>
Here's the problem. The mouse-over is intermittent - you may or may not see a red background and font change in IE (7 or 8). You will always see the cursor change. If I take the background and font-weight out, I still see the cursor change. But if either the background or the font-weight are there, The cursor will still change but the background or font may or may not.
If the opacity is NOT set on #outer, everything works everywhere. Again, FF and Chrome are fine.
What do you think?
UPDATE: This semes to be restricted to IE8. When IE8 is in compatability mode (acting like IE7) all is well!
But, including this tag in header:
<meta id="metaIE8IE7" http-equiv="X-UA-Compatible" content="IE=7" />
does NOT fix it.
Had the same problem and found a solution (although my solution was for a:hover not an li:hover and I've not tested)
Basically, make sure element 'has-layout'. For example, display:block, etc. Then reset transparency for that element. -ms-filter: "";
just got the perfect working combination:
display: block;
zoom: 1;
opacity:0.4; /*for ie9 and other browsers */
filter: alpha(opacity=40); /*for ie older browsers*/
As Bob sayed the 'has-layout' is essential for it to work in ie 8. Here the 'display: block;' does the job.
More CSS cargo-cult for me! I have no idea, but focing IE8 into IE7 mode fixed the problem. I was wrong about it not working in the question. Still good in other browsers too.
Related
What in this CSS doesn't work in IE8 & IE7?
nav {
position: fixed;
top:60px;
left:30px;
color:black;
float:left;
}
nav div#button {
width:205px;
height:50px;
text-align: center;
padding-top: 5px;
margin-bottom:10px;
font-size: 23px;
}
nav a {
color: #000000;
text-decoration: none;
}
nav div#button:active {
width:250px;
height:65px;
}
nav div#button.home {
background-color: #79b22c;
}
nav div#button.links {
background-color: #3b50cc;
}
nav div#button.aanbod {
background-color: #BA3BCC;
}
nav div#button.forum {
background-color: #1CAEB2;
}
nav div#button.contact {
background-color: #daa520;
}
It works fine in IE9 & IE10. But IE8 & IE7 displays no-styled text.
I have tested with browserstack.
Who can help me please?
<nav> and other HTML5 elements were defined after IE 7 and IE 8 were released, so the browsers aren't aware of how to handle them.
They can, however, be instructed to handle them. And, the html5shiv can help with this:
Include the HTML5 shiv at the top of your <head> in a conditional comment after any stylesheets.
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
Try using:
<!DOCTYPE html>
Also you don't need:
div#menu You need #menu
At the top of your code
Delete color and just use background
Position: fixed not work in ie7. Use should use expression() for this in css and position absolute.
I'm trying to integrate a responsive menu to my website here but I also have a colorbox script running on it. The thing is, The css of the responsive menu ( which i got here) is messing up my colorbox css. the css is as follows:
colorbox css:
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999;
overflow:hidden; }
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
the Responsive menu css is as follows:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
nav {
width: 90%;
margin: 50px auto;
}
nav ul {
list-style: none;
text-align: right;
/* overflow: hidden; */
}
nav li a {
background: #444;
border-right: 1px solid #fff;
color: #fff;
display: block;
float: left;
font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 12.5%;
/*TRANSISTIONS*/
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}
/*HOVER*/
nav li a:hover , nav li a.current{
background: #222;
}
nav li a:visited {
color:#FFF;
}
nav li:last-child a {
border: none;
}
/*SMALL*/
nav small {
color: #aaa;
font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
text-transform: none;
}
...more responsive css STUFF ( unimportant)
I've located the Issue. I need help fixing it. when I open up the colorbox pictures, the box itself is smaller than the rest of the popup. so It looks aweful, I'm testing it in FireFox 18.0.1 but if I use Chrome Version 24.0.1312.56 m and it works in Chrome ( it shows teh whole thing)
The issue is with this line in the menu css:
-moz-box-sizing: border-box;
and I'm not too familiar with it to know what its doing, but I know If I take it out, my resposive design menu doesn't work preperly, but my colorbox does. I'm thinking of taking it away from the "*" portion of the css and add it somewhere else, but how can I do this? can I hard code it to a div or something? here is my html:
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="stylesheet" href="stylesheets/menu-css.css">
<link rel="stylesheet" href="colorboxjs/colorbox/colorbox1.css" />
<script type="text/javascript" src="jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="colorboxjs/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
$(".gallery3").colorbox({rel:'gallery3', transition:"none", width:"75%", height:"75%"});
});
</script>
</head>
<body>
<!-- Primary Page Layout
================================================== -->
</div><!-- container -->
<div class="container" style="background:lightgray; padding: 15px">
<h3> 5 menu right </h3>
<nav>
<ul>
<li><a class="current" href="#">First</a></li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
</nav>
</div>
<div class="container" style="background:lightgray; padding: 15px">
<P>THIRD TYPE - No Transition + fixed width and height (75% of screen size)</P>
<a class='gallery3' href='images/slider-1.jpg'>Pic 1</a>
<a class='gallery3' href='images/slider-2.jpg'>Pic 2</a>
<a class='gallery3' href='images/slider-3.jpg'>Pic 3</a>
</div>
<br/><br/>
<!-- End Document
================================================== -->
<script>
jQuery('a.gallery').colorbox();
</script>
</body>
</html>
THanks for all the help in advanced. ~Myy
What box-sizing: border-box; does is, it will include all border and padding widths/length in your content-width. so instead of 1px border + 50px width = 52px total width, border-box will always force the total-width to be 50px.
You can always use media-queries and start using the border-box from a certain screen-size, that would seperate your normal and mobile css pretty well, but it will cause similar errors on the small screen which you need to fix.
Here's a quick intro about media-queries: http://css-tricks.com/css-media-queries/
Alternatively you can get rid of the border-box and manually nudge any changes you see back in place (use FF's firebug or Chrome developer tools for this). But I do want to add that border-box is pretty cool & handy, you should consider leaving it in and nudging your default code.
body {
background: gray;
font-family: sans-serif;
width: 960px;
margin: auto;
}
header {
background: green;
border: 10px solid black;
}
nav {
margin-top:10px;
background: #62D99C;
border-radius: 10px;
padding: 10px;
}
Header and nav background does not work in IE8. It does work in Chrome and FF. What should I do?
Thanks!
You should apply display:block to the header and nav elements:
header {
display: block;
background: green;
border: 10px solid black;
}
nav {
display: block;
margin-top:10px;
background: #62D99C;
border-radius: 10px;
padding: 10px;
}
It seems you also need to include the following js:
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
</script>
<![endif]-->
The reasons for this can be found here:
http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/
Put simply, IE8 doesn't support HTML5 elements by default, but by having this javascript execute (only for IE8 or less) it starts to recognise those elements. Most developers use some form of html5 shim to fix this.
http://code.google.com/p/html5shim/
Looks like IE8 does not support features of HTML5 that were not present in HTML4 (this includes the new elments header and nav). See the answer on the question Does IE8 support HTML5 and CSS3?
Try replacing the elements with the old, working way: <div class="nav"> and use the CSS-selector .nav.
Background color not working on Internet Explorer (IE)
IE apply some filter before rendering web page . that's why some page colors changed .
you can add following line in your CSS class to avoid it.
filter: none !important;
I apologize for the headline, I don't really know a better way of putting it (let me know if you have a better way, I will change it). Please consider the following code:
<html>
<head>
<title>IE 6 Menu Test</title>
<style type="text/css">
.nMenu {
border: 1px solid black;
}
.nMenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nMenu a {
display: block;
padding: 3px 0px 3px 5px;
background-color: #fff;
border-bottom: 1px solid #eee;
font-weight: bold;
text-decoration: none;
}
.nMenu a:hover {
background-color: #dddddd;
}
</style>
</head>
<body>
<div class="nMenu">
<ul>
<li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li>
</ul>
</div>
<hr />
<div class="nMenu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
</body>
</html>
In firefox, both the top and bottom menus display exactly the same. But in IE6, the bottom version, which is identical to the top except for the carriage returns after each list element, displays with extra padding above each element. The top version, without the carriage returns does not. This is especially apparent (the extra padding) when rolling over the items in the bottom list.
It seems that IE6 is rendering the carriage returns for some reason. For now we have just resorted to formatting our code like the top example, but this is less than ideal. Is there something we can put in the CSS to make this look proper in IE6?
Apply display: block; to the li, tell IE6 to make the a 100% in width, and tell all browsers to display the a as a block instead.
.nMenu li {
display: block;
}
/* hack for IE6 */
* html .nMenu a
{
width: 100%
}
.nMenu a {
display: block;
padding: 3px 0px 3px 5px;
background-color: #fff;
border-bottom: 1px solid #eee;
font-weight:bold;
text-decoration:none;
}
Tried it in IE6 and both lists look identical, and renders exactly the same in Firefox.
I don't have a solution to the main issue, but you could change your code formatting to look nicer and still work in IE 6.
<div class="nMenu">
<ul>
<li>One</li
><li>Two</li
><li>Three</li
><li>Four</li
><li>Five</li>
</ul>
</div>
Try adding overflow: hidden; to .nMenu li.
I am trying to create a rather simple effect on a set of images. When an image doesn't have the mouse over it, I'd like it to have a simple, gray border. When it does have an image over it, I'd like it to have a different, "selected", border.
The following CSS works great in Firefox:
.myImage a img
{
border: 1px solid grey;
padding: 3px;
}
.myImage a:hover img
{
border: 3px solid blue;
padding: 1px;
}
However, in IE, borders do not appear when the mouse isn't hovered over the image. My Google-fu tells me there is a bug in IE that is causing this problem. Unfortunately, I can't seem to locate a way to fix that bug.
Try using a different colour. I'm not sure IE understands 'grey' (instead, use 'gray').
The following works in IE7, IE6, and FF3. The key was to use a:link:hover. IE6 turned the A element into a block element which is why I added the float stuff to shrink-wrap the contents.
Note that it's in Standards mode. Dont' know what would happen in quirks mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
a, a:visited, a:link, a *, a:visited *, a:link * { border: 0; }
.myImage a
{
float: left;
clear: both;
border: 0;
margin: 3px;
padding: 1px;
}
.myImage a:link:hover
{
float: left;
clear: both;
border: 3px solid blue;
padding: 1px;
margin: 0;
display:block;
}
</style>
</head>
<body>
<div class="myImage"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></div>
<div class="myImage"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></div>
</body>
</html>
In my experience IE doesn't work well with pseudo-classes. I think the most universal way to handle this is to use Javascript to apply the CSS class to the element.
CSS:
.standard_border
{
border: 1px solid grey;
padding: 3px;
}
.hover_border
{
border: 3px solid blue;
padding: 1px;
}
Inline Javascript:
<img src="image.jpg" alt="" class="standard_border" onmouseover="this.className='hover_border'" onmouseout="this.className='standard_border'" />
Try using the background instead of the border.
It is not the same but it works in IE (take a look at the menu on my site: www.monex-finance.net).
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
put that in your header, should fix some of the ie bugs.
IE has problems with the :hover pseudo-class on anything other than anchor elements so you need to change the element the hover is affecting to the anchor itself. So, if you added a class like "image" to your anchor and altered your markup to something like this:
<div class="myImage"><img .../></div>
You could then alter your CSS to look like this:
.myImage a.image
{
border: 1px solid grey;
padding: 3px;
}
.myImage a.image:hover
{
border: 3px solid blue;
padding: 1px;
}
Which should mimic the desired effect by placing the border on the anchor instead of the image. Just as a note, you may need something like the following in your CSS to eliminate the image's default border:
.myImage a img {
border: none;
}