I'm having an issue with IE7 related to overflow. http://www.photocrayze.com/photos
On Google Chrome, Firefox, or any browser that's not IE7, this layout works as intended. The tags (look specifically at the photos 'City People' and 'Kaleidoscopic') are cut off at the edges and set to half opacity. On mouseover, the edges are revealed and set to full opacity.
However, in IE7, when you mouseover a photo, div.photo-tags-inner expands and messes up the layout. I'm not sure how to explain this better... but how can I fix this issue?
Also, it seems like setting the opacity to 0.5 doesn't work in IE8 (but works in IE7 and IE9 and other browsers)...
zoom: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
opacity: 0.5;
filter: alpha(opacity=0.5);
in your css style
.photo-browser tr td .photo-info .photo-tags {
margin: 0.5em auto auto;
opacity: 0.5;
overflow: hidden;
position: relative;
width: 200px;
}
get rid of overflow hidden and it should work. Next time also use firexfox's firebug to play around with styling to get teh desired output. But then I notice then the horizontal scroll bar comes up that may mean you need to some more digging to find out how to get rid of that.
Giving .photo-tags-inner position:absolute and left:0 fixed the issue in IE7 and also works fine in other browsers.
Related
I was trying to make some animations with transition on css, and all but the height of elements worked.
I'm using chrome, and some people with other browsers like safari told me that it was working, even tho I need it to work on all major browsers, and I'm currently trying to find a fix for chrome. Here is the fiddle:
http://jsfiddle.net/VPCxq/2/
As you can see I have my element (#test), and in my css I have:
#test{
height: 4vh;
-prefixes-transition-property: height;
-prefixes-transition-duration: 0.3s;
}
#text:hover{
height:8vh;
}
but the height isn't animated. In the fiddle I've put other things just to show that they worked. Has anybody got a chrome fix for this?
You can't transition to or from auto. auto gets replaced with 0. Add:
#test {
height: 4vh;
}
http://jsfiddle.net/bFJ29/
So this morning I got an automatic update to IE 11, after checking my eyes it appears that some of my background images are blurry.
I had to check that it was not my image causing the problem, so after firing up Chrome, they were nice and crisp again...
I am completely baffled.
I've now uninstalled the IE11 update and they are once again nice and crisp in IE10... Has anyone else encountered this?
I've included a screen shot showing the images in the different browsers.
Here is a link to a jsfiddle, I don't have IE11 any longer to test but its the same markup and CSS that I am using: http://jsfiddle.net/3g52E/
Well i can see what is causing this problem. It's the border-radius of your ._ui.
Now i can't tell you why this happens. However if you want to fix this you can or don't use border-radius or, which is a better solution i my opinion, use the <img> tag to generate the background.
Use image element
<img src="http://i.imgur.com/DauuVHW.png" />
Now to cut-off your image you can just use position: relative;, position: absolute; and a overflow: hidden;:
.block1 > div
{
position: relative;
overflow: hidden;
}
This will add the properties on ._ui _bre and ._ui _com.
Where the basic image properties are:
img
{
position: absolute;
left: 2px;
}
Now you can just use the top and bottom offset for the the image positioning. Where as you used background-position before:
._bre._ui img
{
top: -68px;
}
._com._ui img
{
top: -24px;
}
This way your image is not a part of the element which has border-radius anymore, which caused this problem. They have a more clear seperation now; 2 different elements.
jsFiddle
There is probably more elegant way to fix blurry images in IE 11.
In our app we have icons on buttons with round corners. Removing round corners or using <img> for icons were not options.
However, what worked for us was "classic" images optimization for retina displays, i.e. saving button background images with twice larger resolution and then specifying original size in background-size.
Looks great in IE 11 and on retina displays.
According to this:How to write a CSS hack for IE 11?
I added this code to my CSS:
#media all and (-ms-high-contrast:none){
*::-ms-backdrop, .my_elements_with_border_radius { border-radius: 0 }
}
With this browser hack the borders are not round anymore in IE11 but at least the background images are not blurry anymore. In any other browsers they are still round.
My site design requires a background image running across the top of the page. You can see what it is supposed to look like in this screenshot. Link to my site.
Unfortunately, I used Firefox to check my work while putting this together. I used FireFox, because it has Firebug. The site looks right in Firefox, but wrong in Safari, Chrome, and IE. In Safari, Chrome, and IE, the background body wrapper background image is below the menu. Example screenshot where background at top is wrong.
Is there an easy fix to the background image, so it will work in all browsers, or do I have to take a few steps backward to fix some basic problems in my markup?
The margin on #nav is collapsing (https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing) because its parent (#wrapper) has no top margin, padding, or border to contain it. A quick-and-dirty fix for your problem would be to add padding-top: 1px; to your #wrapper CSS.
Change the margin property of #nav and add padding to #wrapper equal to the height of your background image.
#nav {
margin: 0 auto;
}
#wrapper {
padding-top: 85px;
}
http://metagraf.github.io has been behaving well in all tested browser until IE10 came along. The top menu is overlaying the entire page when viewed in IE10.
A screenshot of how the page looks in IE10 can be seen here: https://dl.dropboxusercontent.com/u/2897577/ie10.png
Any ideas on how to fix this?
regards Oskar
So when I run the site in question in IE 10, yes indeed, the top menu does look buggy in IE 10.
The immediate source of the problem is the img in the navbar.
If you hit F12 and use IE's developer toolbar, and then if you set the width property of the img from auto to just being un-checked (so that auto is no longer the value, the site all of the sudden looks normal.
Digging deeper into the issue, here's the css setting for img in bootstrap:
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Ok, so what in the world is width: auto\9?
Well, looks like it is an IE hack, but a hack that does not apply to IE 10.
CSS \9 in width property
http://www.paulirish.com/2009/browser-specific-css-hacks/
So as a quick fix, I suppose one thing you could do would be to set a custom css property
on the img in the navbar that is exact about the width of the img.
I'm just starting to build a website, and am just fleshing out the css.
Two problems:
I'm using rgba to get a transparent background, and using a transparent png to emulate this in older browsers. I'm using a cascade like this:
rule {
background: url(/media/img/white_0.9_pixel.png);
background: rgba(255, 255, 255, 0.9);
}
In IE these backgrounds don't cover the whole of the sections they are applied to... Any ideas why?
The drop down menu is incorrectly placed in IE. I'm positioning it absolutely, but adding a margin to shove it into the right place in Webkit - guessing that's the wrong way to align a drop down, and it's not working across browsers. Any suggestions there?
Thanks a lot - just writing questions on here helps me to think!
A link to the site : http://bit.ly/11GGCx
Which IE versions exhibit the problems?
As with many IE bugs, try giving layout to the elements with improperly rendered backgrounds.
When you don't specify the "left" property of an absolutely positioned element, IE rarely generates the value you want. According to the CSS 2.1 spec, "left" should be set to the static position, but the browser can guess this position so it's best to be explicit. The standard method is to give the menu items relative positioning to create a containing block for each submenu and set "top" and "left" for the submenus.
.nav li {
position: relative;
/* note: don't set a box offset (e.g. "left") here */
}
.nav ul {
position: absolute;
top: 1em;
left: 0;
}
Did you specify background-repeat?
Have you tried with css opacity concept?
Try the below code.
rule {
background: #fff;
opacity: .5;
-moz-opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* for IE8 *//* Comes First to apply optacity in all ie versions*/
filter: alpha(opacity=50); /* for IE5-7 *//* Comes second to apply opacity in all ie versions*/
}
Note: Don't change the order of above lines. Also i recommend not to use rgba background.
Try this. Hope this helps