In my application, I have a few icons that are drawn on every page. For performance reasons, I have them grouped into a single file and drawn as CSS sprites. For some reason, IE will occassionally draw them incorrectly. If you zoom in on the image, it looks like IE is off by 1 pixel.
This only happens in IE, does not happen in Chrome.
The behavior in IE is inconsistent. For some people, the icons are drawn correctly.
Here is some sample CSS:
.bannerIconLogout {
height: 13px;
width: 12px;
margin-right: 2px;
background-image: url("#{resource['images/common-images.png']}");
background-position: 0px -13px;
position: relative;
top: 1px;
}
Has anyone else seen this? Is there a way to work around it?
Related
There are multiple places on our website where we are using .svg's with the background image rule to create shapes.
For example:
&:before {
bottom: auto;
height: 4rem;
content:'';
display: block;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-image: url('img/layout/press-before.svg');
background-size: 100%;
background-repeat: no-repeat;
#media screen and (max-width: $viewport-xs) {
height: 2rem;
}
#media screen and (max-width: $viewport-sm) {
top: -.1rem;
}
}
This works well on desktop on all resolutions.
But on several mobile devices using chrome there is an issue when the adjected block has the same color.
There seems to be 1 or several pixels which are being interpolated incorrectly which leads to an edge of the underlying element showing.
Things I've tried:
+ use png, jpg instead of .svg to see if the problem relates to the rasterisation of .svg (problem persisted without difference)
+ moving the image up sligthly (line remained)
+ making it slightly larger (line remained)
For reference, see the following images.
issue example 1
issue example 2
Any suggestions are greatly appreciated!
The solution for me was to move the image up a little by adding top: -1px to the pseudo-element.
I tried this before I posted this question here and it didn't work.
This was related to the fact that the parent of the pseudo element was using overflow-x: hidden and because of this the overflow-y was automatically also hidden (I'm adding this for anyone having a similar issue).
Of course this means I need to tweak the shape of the svg's a little because it has moved up 1px.
I'm experiencing issues with dreaded IE again.
I have created a single line divider that separates different elements on a page. The code itself is working great in webkit browsers as it would but I can't seem to replicate the effect in IE. I have attempted to use CSS gradient generators but they do not replicate the fading effect.
My code is below
#home-single-line {
margin: 25px 0;
height: 1.4px;
background: white;
background: -webkit-gradient(linear, 0 0, 100% 0, from(#123f67), to(#123f67), color-stop(50%, #fff));
position: absolute;
top: 55px;
left: 580px;
width: 550px;
}
The effect I am trying to achieve can be seen here
and the background colour is the background colour I am using on my website
Please help, IE will be the death of me!
Thanks for your time.
Use an <hr> element and style it. See CSS Tricks code for your example, it looks identical: http://css-tricks.com/examples/hrs/
Link
The problem is in the jQuery Mega menu. It somehow displays correctly on Google Chrome Linux and Internet Explorer (Windows 8), but incorrectly on Opera (Linux), Google Chrome (Windows), Firefox (windows), etc. If it is displayed incorrectly, last menu when hovered overlays with search input. What could be the issue here? I do not want to change the paddings.
The difference is most likely due to browsers interpreting decimal pixel numbers differently. Each menu item doesn't have explicit width set via CSS so it gets fraction of pixels that are respected in some and gets rounded in some. Now, that only makes 1px difference per element but that eventually add up to 10px, 20px, and more.
So the solution would be to give enough room between menu item and the search bar, maybe make it narrower.
This might help you understand the issue in detail:
Are the decimal places in a CSS width respected?
Dont Know is it right method or not
You have some code in your CSS file on line no 2025
#searchform {
position: absolute;
top: 79px;
left: 744px;
width: auto;
height: auto;
margin: 0px;
display: table-cell;
}
edit the left property value to 764px from 744px;
and on line no 3416
#searchform .text_input {
width:149px;
height: 9px;
padding: 10px;
position: relative;
top: -1px;
vertical-align: middle;
font: 11px Arial,sans-serif;
}
Remove the width property from this chunk of code
Rounded corners on my jQuery sliders only work in Firefox.
Renders correctly in Firefox 17.0.1 (see image below)
Not rendering correctly in Safari Version 6.0.2 (8536.26.17) (see image below)
Not rendering correctly in Chrome Version 23.0.1271.101 (see image below)
Here is the jsfiddle build: http://jsfiddle.net/plasticmonument/TCVH5/1/ (note, I only gave full path url's to the slider images, everything else will be missing)
My HTML:
enter code here
My CSS:
.hero-wrapper {
position: relative;
z-index: 2;
float: left;
width: 100%;
height: 429px;
border-radius: 10px;
border-top-left-radius: 0;
-webkit-border-radius: 10px;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius: 10px;
-moz-border-top-left-radius: 0;
-o-border-radius: 10px;
-o-border-top-left-radius: 0;
-ms-border-radius: 10px;
-ms-border-top-left-radius: 0;
overflow: hidden
}
#feature-slider ul.slider {
position: absolute;
top: 0;
left: 0;
width: 900000px
}
My guess is that it's the old "foreground images aren't clipped" bug.
In some browsers, a border radius may be applied, but foreground images of the elements with border-radius aren't restrained by the radius.
I was under the impression that this was something that had been dealt with by the major browsers, but it's not something I've looked into for a while, so I may be mistaken in that. It certainly looks like it's what you're seeing. I remember it was quite a big issue back in the days of Firefox 3.x, but if I recall correctly, the FF team sorted it out somewhere between v4 and v8.
To prove it, add an actual border (eg border:solid black 2px;) to the element, and see what happens. If the border disappears under the image at the corners as it follows the radius, then this is the bug you're seeing.
If this is the problem, then the solutions are:
Use a background image instead; this won't be clipped.
Add an additional layer of markup -- eg a <div> with the existing <img> inside it, and put the border radius on the <div> instead of the <img>.
Ignore it, and wait for browser vendors to fix the issue.
I have been searching for an answer for a good hour without luck so It may be OK to ask my silly question:
I am trying to overlay a legend over a map. The map is generated with openlayers and lives in a div called map. the legend is an html table but could be a picture as well and lives in another div called legend.
hence the HTML
<body>
<div id="map"></div>
<div id="legend"></div>
</body>
and the CSS
* {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: none;
font-family: Arial;
font-size: 9px;
text-decoration: none;
text-align: left;
}
html, body {
background-color: red;
}
#map{
position:relative;
}
#legend{
position:absolute;
top: 1%;
left: 100px;
}
This works just fine in Firefox, Safari and Chrome, but not in IE8.
In IE8 the legend is shown in its place, the red page background is behind but the map div has disappeared. Note that IE still loads the map tiles etc but seems to be putting them either behind the background or somewhere not on the screen...
If you have any suggestions, greatly appreciated!
Without the whole HTML page, it can be hard to give you a correct answer, to know what's exactly going on. Though you can use conditional IE tags to make your design work in Internet Explorer. More information here.
You will find that most IE8 quirks can be fixed by changing the positioning by a few pixels, position type, the display: value, or making elements at display:none;.
Firebug is your friend.