I've an image that is wrapped in an anchor tag that, through jQuery, triggers an action somewhere else on the page. When I click on the image, two tiny 1px by 1px boxes show up in the upper and lower left corners of the image.
My CSS styles explicitly state no borders for images: a,img { border: 0; }
It also seems to only happen in Firefox 3. Anyone else had this issue?
Here's a screenshot of the left part of the image (the graphic has a white background):
alt text http://neezer.net/img/ss.png
It's not the background, or the border of any other element. I checked.
Is your anchor tag under or overlining?
Set the a and a:hover in that situation to text-decoration: none.
Happened to me, and the reason it was two tiny boxes is because the width of the element didn't quite extend, or something.
Good luck!
D'oh: I see it's upper- and lower- LEFT boxes. Might be something else, like background or border of containing element peeking through.
Have you tried also setting border-style:none;? It's a long shot, but you never know...
What is the display property of the anchor element? You can try setting display property of as "block" and make sure that the inner IMG elements float setting is set to "none".
I've chalked this up to a bug with Firefox 3 & jQuery 1.2.6, since I've yet to replicate it with any other version of Firefox or jQuery.
Related
Sorry about the confusing title but this bug is just strange.
I am working on some buttons and noticed that if my button has a border + border radius + overlay ( used for gradients ) on specific font size Chrome is displaying 2 px right border instead of 1 .
Here is fiddle
http://jsfiddle.net/3x73q9md/
I am not sure if my overlay container is inheriting something but I cant find the fix except changing the font size.
Also tried
font:0/0 a;
on overlay container and all sorts of CSS hacks but this just makes no sense.
The button is relative and overlay absolute stretched in all directions.
Can someone please explain what this is.
Please note that I am not asking to add/remove/modify current html structure. Just need to understand why this is happening and possible solution for it.
change .overlay class border-radius: inherit; to border-radius:0;
.overlay {border-radius:0;}
Demo:http://jsfiddle.net/3x73q9md/1/
I am trying to do a very simple tab setup on my site, but I'm having some problems because of the margin/padding pixel differences between firefox & chrome. Here is a jsfiddle link to what I'm talking about: http://jsfiddle.net/xqhf6/3/
Here's what it looks like in chrome:
Here's what it looks like in firefox:
Basically, here's the setup I have:
.mydiv { ... } : each box is a mydiv that has a padding of 6px and a
1px borders on left, right & top.
.header { ... } : contains the two
divs with borders at the top and has a bottom border
.subheader { ...
} : sits underneath the header (contains other stuff on the right
that is irrelevant).
I have tried to set a color for the subheader, tried to increase its z-index to be greater than that of the header and yet nothing works. I just want the little dangling borders to go away.
Help would be greatly appreciated, thanks Stack Overflow!
UPDATE Here is a jsfiddle link to what I'm talking about: http://jsfiddle.net/xqhf6/3/
UPDATE 2 In trying some of the options, it looks like my best bet is try and figure out a way to use the subheader to somehow mask the dangling borders. Not able to do that (as I mentioned, nothing works when I play around with z-index/subheader opacity & color)
Ringo
You get some weird effects if you try to apply a border to an inline element. Change your <span> elements to display: inline-block;.
Preview: http://jsfiddle.net/Wexcode/2A2s8/
I'm working on a project in which I am using an image as a background for a menu. I have defined classes in my CSS stylesheet that dictate the appearance when items are or are not "selected", meaning the user is not on the page each item is linked to.
I have it structured with a div on top of the image with styles applied to it to make it have a semi-transparent white background, so it looks like that part of the image is highlighted. Each semi-transparent div also contains the text that makes up the link, with a color set to white. I would like the div to keep the opacity, while the text remains at an opacity of "1".
I have tried the method discussed in a similar question (CSS - Apply Opacity to Element but NOT To Text Within The Element) but the method does not seem to work for me.
I've posted the bit of code for the link on JSFiddle at http://jsfiddle.net/Cwca22/uG5y8/ if you'd like to take a look at it.
Thanks in advance for all the help.
If you're looking for a pure CSS solution, and are willing to change your markup a little, take a look at this example:
http://jsfiddle.net/jJ4MZ/3/
It treats each "link" as a combination of separate background and text elements, and then positions them over each other, so that only the background div uses transparency.
If I'm understanding you correctly, you want the background colour of the div to be partially transparent to show the image through, but keep the text opaque? That's simple :3
<div style="background-color: rgba(255,255,255,0.5);">Text</div>
If you want to provide support for browsers that don't allow this format, then you need:
<div style="background: #ffffff; background: rgba(255,255,255,0.5);">Text</div>
Old problem without any standard solutions yet! This is something known to be impossible with today's CSS. The only solution i know of is using JS. Using JS you can catch the mousemove of the affected H# and create/position an element. This new 'over' element should not be a child of the DIV with opacity 0.2.
Once i wrote a jsFiddle for a problem like this. Here it is http://jsfiddle.net/A53Py/5/
Create a same-level element which positions absolutely behind the elements without opacity. No need to tell it's cross browser.
Hope it helps
How can we avoid the shake when we hover over an element and set its font to show bold? Here is a sample of the code I wrote:
http://jsfiddle.net/8v4Ag/
Is there a technique to avoid the shaking? Suppose I hover on LogOff, the font goes bold, but that line of text moves a little to the right due to the text getting emboldened. If we hover away it again shakes.
Is there any CSS way of avoiding such shakes?
I have solved this by having a non visible duplicate text with the hover style. Use visibility:hidden rather than display:none to make it take up space, and position it beneath the original text. This invisible element will make sure the text is wide enough for the hover state.
Her is an example
Some ideas
easier: just change the color (or background-color) ; instead of black, you set color:#333, and when hovering: #000 - this way the text size does not change.
a small absolutely positioned div fixed size (width, height) with a higher index at the location where you want the button / text to change. When the size of the div changes a bit, it won't affect the neighbors. This solution requires some cross-browsers testing.
I am not sure what you mean by "shake", I have faced the same issue of buttons getting larger when I have the text bold on hover. I think I ended up "solving" it by changing the design so it didn't require the bold on hover. #ring0's second solution might work, but it would be a pain to implement. I would suggest using his first suggestion, you could even add background images (maybe a gradient) that would change on hover, and change the font-color.
If you are determined to use BOLD for hover you aren't going to be able to avoid this problem. Bold and Normal fonts are different fonts so they are NOT going to align perfectly like you want and you'll see this visual effect. If you are using a browser that supports it, perhaps try adding a text-shadow: style on hover instead. Or change color: from gray to black...
If by shaking, you mean the Help or LogOff "boxes" moving when you hover over the other, then you need to widen the LogOff and Help boxes to be bigger than the bolded version.
You could set a fixed width; however, I would recommend not using a strong styling on the item. I would also not recommend simply changing the color, as this does not address any accessibility issues for someone who is colorblind. If you simply add a border and make the background a bit darker, that should do the trick and be most compatible cross-browsers.
Keep in mind, you will get the same "shake behavior" if you are simply adding a border, so be sure to add a border to match the existing background initially, then change the color of the border upon hover.
I thought something like this might do it:
a { padding:10px; }
a:hover { padding:8px; font-weight:bold; }
depending on your original font-size &
line-height are set to the same px value
By default, only the text of links is clickable in IE 6. I’d like to make the entire area inside the link (i.e. including padding) clickable as well.
I also need this area to be transparent, as the link covers half of a photo. Adding a background color makes the padding area clickable, but defeats the object, as the link is hidden.
I could have sworn there was a way to do this.
display: inline-block; usually works for me.
display: inline-block is the correct answer, as Kobi says. There is no div or transparent div behind it, just the link element. When the inline-block attribute is applied to it, any padding (and I think line-height) becomes as if it were part of the link.
I remember having come across the same problem but my recollection is hazy about the proper workaround (and if there even was one).
Can you try giving the link a background-color: transparent or a transparent background image? That might work.
If nothing else helps, give the surrounding element a Javascript onclick attribute, and cursor: pointer to simulate link functionality at least for those with JavaScript.