When this page is viewed in IE6, you will see extra left and right white borders on the button:
http://pastehtml.com/view/1aycieg.html
They don't appear in other browsers (e.g. IE7, IE8, Chrome, Firefox).
I have been trying hard to fix it by changing the margin and padding values of the <li> and <a> tags but still no success.
I would like to avoid changing the HTML markups if possible.
Anyone got some ideas on this?
Many thanks to you all.
Ie6 does not support png transparency. What should be transparent is white and you are seeing that.
You could try pngfix
Related
I know there might be plenty of other topics about SVG background-images and browser compatibility, but i really can't find out any solution to my problem. I'm using Foundation 5.
So, I've got three divs in a row. Each div has a svg as a bg-image.
See, on Chrome, works perfectly:
Chrome capture
The svg background isn't the bubble itself but the surrounding, that I filled with blue ( so bg-color is white ).
But if I go on Safari, there is a small white line on the border of my divs : Safari capture
I'd like to get rid of this white line on safari. I mean, I want my row to display as in Chrome. So, I know background images width in safari are set in px, and that mine are set with %. But I don't really think it has something to do with it. I really have no idea of how I can resolve this.
edit:
seems to be mac/chrome related problem, works fine on win/chrome, mac/safari, mac/firefox
http://jsbin.com/bezibu/1/edit?html,css,output
You can see a white border inside the cut out in browser.
closeup:
same thing in photoshop, no white border
closeup:
Any idea why is this happening and how to prevent it?
Whether it's as a background image or <img> doesn't seem to matter..
So the problem happens on retine-esque displays only. Solution is to double the size of the PNG and use background-size.
https://code.google.com/p/chromium/issues/detail?id=475227
So I've got a page on a site that displays exactly like it should in both IE and Chrome, but not Firefox. The link is http://www.jakerevans.com/?page_id=61. In both IE and Chrome, the spinning animation (written with D3.js) displays fully through the padding-left and padding-top, but not in Firefox. Anyone have any idea how I can make this padding in Firefox transparent? Any other possible solutions? I'd really like to resolve this through CSS if possible, and not go back to the drawing board with the D3 code. Obviously I will if I have to though.
Thanks a lot for the help!!!
You need to explicitly set overflow: visible on your <svg> element.
The SVG specifications state that all SVG elements that create viewports should have overflow: hidden in the browser's default stylesheet. However, browsers disagree over whether this should include the padding area or not: if you follow the description in the SVG specs, as Firefox does, padding would not be included. However, general CSS/HTML layout does not consider content in the padding to be overflow, so Webkit/Blink/IE browsers do not clip it with overflow:hidden.
it doesn't seem to be the issue of the padding, it's like to be the firefox transform origin thing, see this Setting transform-origin on SVG group not working in FireFox
Internet Explorer 7 and below is not displaying my Borders and if so, it is not displaying them correctly?
http://www.noxinnovations.com/portfolio/nue/
Any ideas? There should be a border placed at the bottom of the whole HEADER TAG and one above the FOOTER TAG.
Take off the border-top-color rule (on the header) and border-top-color on the footer; that appears to fix the issue. It may be that the color is not dark enough; you could try a darker color (I can barely see it on IE7 on the bottom). You can use a conditional comment or the hack *bottom-border-color: none to target IE7 and below.
Hi I'm having troubles with a problem in chrome. I think it might be a bug but I can't find much info on it. Basically I want to apply border radius on an image. The border-radius will be 50% forming a circle. The reason I've set it as a % is because i wont explicity know the width/hieghtt of the image.
Any ideas why chrome doesn't display the border correclty? I haven't tested in FF < 4. but FF4 works well as does IE for a change
What are you trying to do? Do you want a circle to appear behind the image? That is what I see in FF. In Chrome, the circle is clipping the edges of the image.
According to the spec -- http://www.w3.org/TR/css3-background/#corner-clipping -- content is supposed to be truncated.
The content of replaced elements is
always trimmed to the content edge
curve.
Which, to me, means that Chrome is following the spec correctly on this.
Webkit doesn't currently clip corners of images. Remove the src tag from the image and you'll see that the border is being rounded correctly.
One workaround is you could set the background-image property in css: http://jsfiddle.net/tEzwJ/
I figured out a way around it, by adding the border and the border-radius onto the parent . I then applied the border radius to the image too. Although there is a minute gap It works in chrome now. I haven't tested it in FF3.6. But FF4 displays the same result