I've recently added an image to my website, where the image is wrapped in an anchor tag, like this: .
The problem is, that this image has a border, but only in firefox; no border is showing in chrome. I want the border to go away. I have set in the css for both the a and img tags, the following:
text-decoration:none;
border-style:none;
border:none;
outline:none;
box-shadow: 0;
-moz-box-shadow:0;
background:none;
color:white;
The image is a small gray icon on a white background, and I have double checked it in gimp and there is definitely no border around the image. So, what have I missed? Where is it coming from? Why does it only appear in firefox? And how do I make it go away?
Firefox version is 17.0.1
So, what have I missed?
The 90s and 00s.
Where is it coming from?
It's coming from the browser's default stylesheet.
Why does it only appear in firefox?
Browsers seem to make up their own rules on whether they display a border around linked images or not.
And how do I make it go away?
a img {
border: none;
}
Unbelievably, I found the answer - turns out that I had zoomed in, and I didn't notice because it was only by one. Wasn't until I went and pasted the entire contents of my page in jsfiddle that I noticed the sizes were marginally different.
Apparently, when firefox zooms in it adds borders to images. Can't imagine why, but once I zoomed out the borders went away. Problem solved, I guess. Just wish I'd found this sooner - it's been bugging me for days!
Related
I am sorry for all of the confusion and wrong post type. I will keep playing with it or try to get all the css in order so I can paste it correctly on here.
Thanks for the info and help that you were able to give.
Grady
I am not sure if anyone can help me but for some reason I can not figure out why my nav bar has a 'shadow' without any shadow tag. It is very annoying and I can not figure it out. I am able to change the entire navbar to the same color as the background but then it does not stand out. If you can offer me any advice or things to try that would be great!
Here is a picture of the nav during regular view and then I zoomed in and took another shot.
https://dl.dropboxusercontent.com/u/11217802/nav%20bar%20issue.png
I have tried border: none and box-shadow: none but nothing seems to remove that little overflow.
UPDATE:
I should have posted this to start with. I do not have the complete html/css as I'm using wordpress so the code is not exactly mine to share. You are welcome to view our site here, http://jrummy16.com/test/
I have just been using the console in Chrome or Firebug in Firefox to style it to that point.
Thanks in advance
Grady
This has nothing to do with overflow or box-shadow. What you are seeing at the edge is just the continuation of the background of the parent element.
You can fix this by correcting the positioning of your blue support nav so that it properly aligns to the far edge and doesn't leave the small section showing at the end.
EDIT:
Looking at the actual code, there are two "rogue" pixels that account for your excess right spacing. The first pixel is from the border from css line 394:
#mainmenu.scaled li.menu-item a {
border: 1px solid #E2E2E2;
}
You can either leave this here so the 1px border around elements stays constant, or you can remove it from your last nav using the :last-child pseudo-selector to set border-right:none;
So second rogue pixel comes from a clearing div that you have in the navigation. Deleting this div and applying a CSS clearing fix seems like the best solution. A basic clearing would be setting overflow:hidden; on the container element, but there are more robust css clearing you can use if your situation calls for it.
My guess is it's your padding on your grey box. Set padding:0px; on that get box element and see if that does it.
After having went through the GWT StockWatcher tutorial, I find a small UI problem, as shown in this image
When I change the background color of body from white to green manually, a small white square becomes visible. I have seen several examples of this, so I'm pretty sure it is not a programming error that I have made. On the contrary, it seems to stem from one of the hidden iframes inserted by GWT, since it disappears when I delete the iframe or all of it's contents.
Also it seems to be a Chrome- or Chrome-GWT-plugin specific issue, since I could not replicate it in Firefox.
Does anyone know the cause/fix of this problem?
Disclaimer: I just tried this and it seems to work but its not very well tested.
The body had a margin of 8px on all sides. I set it to 0px with
body{
margin: 0px;
}
This seemed to have removed the problem. If you wanted the margin you would have to add it back to a nested element inside your body.
I'm developing a website and I suddenly noticed that in IE9 nearly only layout of mine has such issue (different from other websites that I recently browsed)
There is a gray border around my page which I cannot remove.
I already have body{margin:0;padding:0;} and I tried html,body{margin:0;padding:0;} but it still continued to exist.
Here is a small screenshot
Help me remove this border please.
Those borders are from Internet Explorer itself, you can't remove them.
To remove that spaces just add this to your css:
body {
margin:0px;
}
Google Chrome is acting buggy using border-radius, background color, and top and bottom borders. Here's the evidence and code to reproduce:
http://jsfiddle.net/6ADtd/4/
<div></div>
div {
background:blue;
border-top:10px solid red;
border-bottom:10px solid red;
border-radius:20px 20px 0 0;
height:100px;
/*
border-right:1px solid transparent;
*/
}
The border-right:1px solid transparent; is a trick suggested in the comments which did help remove the unwanted middle solid bar, but when you resize the window/browser - it appears again. It has something to do with the proximity of the element to the edge of the browser window, I can't quite understand it. You have to resize then hover over the element sometimes.
Videos from my desktop:
http://www.screenr.com/6wU8 (without border-right)
http://www.screenr.com/NVU8 (with border-right)
I've tried -webkit- prefixes on several properties and was unable to fix it.
I first posted this because I needed a quick fix for a specific website, but now I'm noticing it show up on several sites and I've nailed down what causes it. That's what I get for not testing in anything but Firefox. This is probably a bug and I should report it, but I'm still stuck in need of a fix in the meantime.
The ideal solution is with CSS, so I can write one or two selectors in the CSS file for the fix instead of digging through loads template files and in the database to apply div-wrap or other markup fixes. Does anyone know any tricks to get rid of this bug?
At the time of me looking into this question, there was still an issue on the prod website visible when the browser is resized to force horizontal scrolling on the document:
The "solution" I used was to apply both
border-left:1px solid transparent;
border-right:1px solid transparent;
to #header with developer tools - this seems to force the issue to go away regardless of resizing, at least on a Mac Chrome 18.
This seems like buggy behaviour to me - I'd speculate it would have something to do with blending corners where colors intersect, which, because of a bug, end up bleeding into the element itself.
I've attempted to, rather fruitlessly, look into the possible connection between a border radius higher than the border width causing this behaviour. This was, of course, untrue - playing around with different x-/y-radii yielded no results without having the "solution" from the above applied. Good to know I guess.
Sorry I was being a bit lazy with my initial reply.
What about wrapping a div with the border properties around the header with overflow hidden: http://jsfiddle.net/jugularkill/Jsdcz/
I've never seen such behaviour in Chrome, very buggy indeed.
Anyway, you can get rid of border-bottom and it will work alright. If possible, just add a <div> with background red at the bottom. Something like this:
http://jsfiddle.net/6ADtd/5/
Or a CSS only solution, add content after your div:
http://jsfiddle.net/Cthulhu/6ADtd/6/
See this link:
http://lsp2.tpdserver2.co.uk/test.htm
Displays fine in IE/Chrome but in Firefox (6.0.1) there is a 1px border around the blue header.
If I add a background color to the #header-content, the 1px white border dissapears. This seems crazy.
I cannot work out what is going on with this and the related page I am trying to build depends on not having a background colour for the 2nd fixed container.
Here is an image of the problem I see:
Link to Image
It is layout rendering bug in Firefox. This bug was already reported and as I know it is fixed in next release. Only solution I know is to use opacity:0.9999999. It would render correctly as opacity:1, but fix this annoying bug.
Try #header { opacity:0.9999999; }
Bugzilla : Bug 677095
EDIT: Firefox 8 is not affected with this bug and setting opacity to 0.9999999 will result in weird border around the element, so I prefer not to use it anymore
Browsers add different defaults if you don't "reset" the CSS, that may be what is going on here.
If the z-index value of your #header-content is not greater than 10, then the bug is fixed. If it's 11 or greater then I can see the mysterious gap too.
Really weird.
I cannot reproduce in FF 6.0.1; however, you can probably work around this with
background-color: transparent;
on the #header-content, or white if you don't want it being see through.
This should still give the fix you mentioned while remaining a blank div as required.
Update:
Ok thanks for the screenshot, still cannot reproduce, this time with ff 6.0.2 - I had a look around after noticing I can reproduce a similar issue on different zoom levels.
Blog post explaining the zoom border bug, which includes this test page. I am not sure if this is involved, seems similar but not the same thing, zoom bug will take off a slice of the whole page including the border of #header-content.
As for your comments around transparent, you can use it and still supply a background image, does this not work for you?