I have a strange problem with buttons that are next to an input field, it seems to be stuck to bottom, and I can't find why or how to modify it.
My intention is to put a background image only. In order to identify the button for this question I've added string Text to one button and saw that this problem disappeared.
Problem is that I don't want any description there, IE 8 shows it fine (surprisingly). I'm working on Firefox last version.
I appreciate any help.
http://jsfiddle.net/bmGb5/
Screenshot: http://www.imgx.gxzone.com/images/a/9/a971c01a223.jpg
Thanks a lot.
Try specifying a vertical-align style on the button. bottom will probably work best.
Use margin-top{} and margin-bottom{} respectively.
Related
This question already has answers here:
Delete destination Url of link on the bottom of browser's page
(2 answers)
Closed 9 years ago.
When you go over a link you'll see a white box with the full link on your left bottom of the browser.
How do you remove this from my website?
Thank you in advance!
That box is inserted by your browser, not the page. You can't remove it, and for good reason -- it's there to help you understand where a link will take you, and anyone wanting to hide that information is up to something dubious.
Just use inline JavaScript:
click here
That's the browser doing that. You can't remove it. It's a good thing too, so the user can see where they're going.
With that said, you can javascript the location to a new page (of course you can style this like a link, if you want).
<span onclick="location.href = 'url';">Click Me!</span>
If you just did this:
click me!
, you'd still get a white box (saying thispage/#) at the bottom because it's still a link. So, if you want to remove that box all together, use the first option.
See Fiddle (Note: This particular example won't work in JSFiddle, but you can still implement it into your own page)
you can remove like using script like:
$("a").attr("href", "#")
or with conditional statement
$("a[href='http://www.google.com/']").attr('href', '#')
I have a strange behavior with a dotted list under a text. The problem appear only with Chrome browser (I have tested it also with Firefox and IE and this problem not present)
If you open this example link using Chrome you simply understand what is the problem: http://onofri.org/example/example3/test2.html
Under the Main Report box there are 3 boxes. The problem appears into the third box named Work Supported by Japanese Trust Found
Ad you can see under the informative text there is a list of links.
The problem is that if I open it with Chrome browser the dot of the first li element appear on the right of the link and not on the left !!!
Why? What is the problem? How can I solve it?
Tnx
Andrea
It's because <p id="smaller"> is set to float:left. Set it to float:none.
It is because the text above Our work is supported... has the style float:left - if you delete this style it will work as expected. Hope this helps.
I am helping to maintain this website http://www.groupme.my/national/
For certain deals with a long list of options, when you click on the "Buy now" button, the options list popup will be partially covered by the deal below. For example, click on the "Buy now" button for this deal "[55% off] Korean Style Handbag...".
Please note that not every deal comes with options. If there is no options, clicking on "Buyw now" will bring you to the shopping cart directly.
I have tried to put in z-index, but it doesn't seem to do anything.
Please help to check how we can resolve this problem. Thanks.
If I understand your concern correctly, the element that fades in has a bottom edge that is behind the item that is beneath, right?
If this is the problem then z-index isn't going to help you because the thing that is fading in is being attached to a div (and it IS going above it) but it is going to be behind the div that sits on the page *after the one that the fading one is being attached to, so, the fading div is going to be behind the next one, no matter what.
The easiest way to deal with this is to draw them in opposite order, so that the divs are moving towards the zTOP as they go up, or to put it another way, set their z-order in reverse order to how they're drawn, so if you have 10 items, the first one will have a zIndex of 10 and the next one 9 and so on.
The z-index: 0 in content-wrapper-top seems the problem ; try to remove it.
EDIT added after comment : I found this z-index in the generate CSS (line:713):
.content-pane-index {
float: left;
width: 737px;
position: relative;
z-index: 0;<------------------------ HERE
}
Dr.Dredel explained the problem well, but if you don't want to do any reorder HTML, I have a workaround, maybe will be little stupid, but I think it should work anyway, I'll give you idea, I don't have any code to test any code :)
First, your z-index must not have that huge numbers, like 1000 then 50000! use smaller units like 5 10 15 and so, my code will work if you did that first, I used the largest number that must be on the page.
I'll use jQuery, for Buy Now button, add this code after show pop code:
$(this).parent().parent().parent().parent().parent().parent().css("z-index","999");
This code means find parent if buynow a tag and parent of the parent of a tag and so to div that have content-pane-index class name and add z-index for max.
you maybe can use this code instead too:
$(this).parents(".content-pane-index").css("z-index","999");
for close button you need to restore z-index that you added before, so add this code too after closing pop code:
$(this).parent().parent().parent().parent().parent().parent().parent().css("z-index","0");
or
$(this).parents(".content-pane-index").css("z-index","0");
I hope you got an idea at least :)
My code maybe need fixes like add or remove one .parent() method, or change selector that used with .parents().
I Love workarounds :P
if you want to show popup remove z-index from your popup CSS, for ex. I'm using z-index: 1000 in the other css
But I'm using other CSS for popup so go in popup CSS & find z-index and remove it.
So I've got a standard dropdown menu in my HTML. I've also got the background colored, and I have a background image that I want to use as a button.
But there's a problem, because I can't get the default button to disappear in Firefox. Even though I can get the button to disappear in Webkit using -webkit-appearance:none; I can't get it to go away in Firefox.
Here's an example: http://jsfiddle.net/wG7UB/
And I'd prefer not to revert to a heavily styled unordered list if at all possible. Thanks!
What do you exactly want to do?I'm not sure i understand fully what exactly you're trying to do
if you want to make it disappear then you can use "{display: none}"
or you can use "-moz-appearance" property if there is any.
Here I go answering my own question... I just wrapped my select tag with a div, and used a pseudo element to cover up the button. Slightly hackish, and I don't like using the pointless div, but I guess it works okay. Then I set the CSS of the pseudo element to pointer-events:none; so that it would allow clicks through the image.
Example: http://jsfiddle.net/howlermiller/nchUt/1/
I've found a very strange thing.
I was complaining about it before, but nobody sees old questions here.
Here's an example.
It works perfectly in Opera only... In Firefox, Chorme, Safari and IE8 there's a border around this button... And I have no idea WHY? How to delete the border?
Thanks.
Thats because you have set a type of image and not defined an image url... you have set the background image using CSS.
Change your element to a span or such and this will fix the issue, also add cursor to be a pointer in css too, this will give the user the idea to click it.
then use an onclick event for the submit.
As others have noted, you have defined an "image"-style button but not provided a source URL, resulting in a broken image.
The simplest solution is to change type="image" to type="button", which removes the broken image icon and border.