I am using jQuery round corner plugin and border-radius.htc for round corners. It is working perfectly in al browsers othern than IE 8. It is showing some unwanted white borders. I am attaching the screen shot. It will be very much helpful if I get some tips for removing this.
Please check the screenshot here:
http://imageshack.us/photo/my-images/842/gonline.png/
try background:transparent
If it doesn't work, post the code
Related
I have the following code in JsFiddle: http://jsfiddle.net/56mpJ/2/
What I am trying to do is to have the border of the table as a picture that I take from the internet
I obviously tried
border-image: url(http://img.docstoccdn.com/thumb/orig/895007.png)
But unfortunately all I see is a black border.. Any way to help please?
border-image support is limited, see caniuse
your demo works for me in chrome/windows
if I where you, I'd use background-image for outer border, and simple border for cels
I'm looking for any working solution in IE8 for this little issue I'm having. For some reason css pie isn't working great on this server we are working on so we are having to use images for IE8 specific stylesheets to sort some quirks out.
On the right hand side there is a facebook panel that needs rounded corners, so far I have an image on the top of the panel to give it a rounded corner, but ideally we want rounded ones on the bottom too, but I just can't figure out how. Could anyone shed some light? Quick dirty fixes are welcome!
Image attached - see how it is in webkit compared to IE8:
http://i.imgur.com/0A9Ns2v.jpg
Thanks guys!
Edit: My solution was to add an extra div inside the parent. Thanks #Pete.
if you add an extra div inside your #block-facebook-pull-facebook-pull-default and then flip your /images/fb_top.jpg to create a bottom image, you can add the following style to the new div:
#block-facebook-pull-facebook-pull-default > div
{
background:url(../images/fb_bottom.jpg) left bottom no-repeat;
}
you then want to take all the padding off the parent div and put it onto the new div
I have been pulling my hair out on this one all day, and I'm hoping someone smarter than me can figure it out.
I'm working on a new design for my site, and I've run into what appears to be a Firefox bug. I am using background-attachment: fixed for a gradient on the <body> element and then I have a full width <div> with another background image at the top of the page. Only in Firefox, there is a small white border at the top of the page and on either side of the <div> background.
I've tried at least a half-dozen different ways of coding the HTML and CSS, and they all produce the same results. Also, the white gap doesn't appear to be there in earlier versions of Firefox (I noticed it in version 6). I even did a clean reinstall of Firefox without any add-ons, and I'm still seeing it. Any ideas on what's causing this? Is my code wrong in some way?
See simplified test case here: http://mygemologist.com/bg-fixed-test.html
Note: This question may be related to: Crazy CSS Issue in Firefox Only - position fixed and background color, but I'm not sure on that.
Dominic, see https://bugzilla.mozilla.org/show_bug.cgi?id=677095 for this issue and https://bugzilla.mozilla.org/show_bug.cgi?id=677095#c47 for a possible workaround.
Maybe use a smaller width image? It seems firefox has issues rendering it, when zooming it goes from properly displayed to having a 1-2px white border above it.
EDIT
When I change the body css to background-position: scroll the problem seems to go away
body {
background: url("http://www.mygemologist.com/resources/bg-gradient.jpg") repeat-x scroll left top transparent;
}
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
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