I'm having trouble getting rid of the gray border in my button that has a background image. I tried to put together a public example on jsfiddle and I can't even get a proper example to work as the image sprite also fails to show up:
http://jsfiddle.net/3vPpt
So my two questions are:
1) Why isn't the background image showing up in my jsfiddle
2) And after we get the sprite to show up, how do I get rid of the gray border that is the original button? I only want the sprite to show up.
Try this.
It looks like you were applying the styles to the image element, not to the button. I doubt that you can apply a background-image style to an image element, even if it's a blank image. I think this may be because an image element is an inline element.
I also added border: none; to the button, which gets rid of the button border styling.
Note that you still may encounter weird padding/margin issues yet, but that can be for another question. Firefox, at least, like to apply an extra few pixels of padding in button elements even after you remove their border.
If its a form use input type image... or just use a div with onclick to submit
Try applying the "thumb_up" class to the button tag and remove the img from inside the button like this.
<button class="thumb_up" onclick=";return false;" title="I LIKE" type="button" class=""> </button>
And then add "border:0;" to "thumb_up" CSS
.thumb_up {
background: no-repeat url("http://www.mattsbits.co.uk/user_media/uploaded_media/sp2010_formatmap32x32.png") 0 0;
width: 200px;
height:200px;
border: 0;
}
Related
I've run into a weird IE7 problem..
I have some standard CSS styled buttons with a background picture and a solid 1px blue border. They work as supposed except in IE7..
If I click inside a form element (textarea/input-field) it automatically adds a black border on my buttons.. Sometimes it also happends in other cases where elements are in focus/active..
You can see a simple example here
The thing is that I need the border on the buttons for styling reasons, so isn't there a way of disabling this behaviour in IE7 without removing the original border - either with CSS or jQuery?
I blogged about this issue here: http://markmintoff.com/2012/01/remove-internet-explorer-black-border-around-button/
Essentially you can use the following style to remove the offending border simply and effectively.
input[type=submit],
input[type=reset],
input[type=button]
{
filter:chroma(color=#000000);
color:#010101;
}
IE is highlighting the form's "default" button, the button that will be triggered if you press the enter key inside one of the form inputs. To disable the highlighting, you have a couple options:
Make the save button type="button" instead of type="submit", and handle the form submission by handling the button's click event in javascript. This was the answer to this related question (although ASP.NET is handling the javascript part behind the scenes).
Add a second type="submit" button as the first input in the form, then hide it with CSS. Note that display:none; will not cut it, you need to hide it by positioning it off screen with something like: position: absolute; top: 0; left: -9999px;. This was the answer to this related question.
jquery: $('input[type="submit"]').focus().blur();
javascript:
document.getElementById('save').focus();
document.getElementById('save').blur();
I am trying to display a background image for a button. The button is saved as .png and used in JSP page. The problem is that, when button gets displayed, it only displays one half of the image, i want the whole image to be displayed.
CSS -
#btn {
background: url(../images/btn-blk.png) no-repeat;
width: 100%;
}
JSP -
<input type="submit" value="Add" id="btn" />
What could the problem be? How to make the image display the whole width instead of left half alone?
-Thx in Advance
Are you sure that you posted corect css code? It should be "#btn" not "btn".
Since you know your width of btn-blk.png, why don't you put it in css, instead using width:100%? Attach here the image btn-blk and maybe we will be able to understand better what you want to do.
You need to set the size of btn to be the size of your image in pixels. CSS has no idea how big your image is.
Because BTN is an inline element, width:100% refers to the width of the button, not your background image.
You need something like:
btn {
background: url(../images/btn-blk.png) no-repeat;
width: 50px;
height:20px;
}
Check with a DOM examiner (FireBug, Chrome's internal one, or something like that) and see that your <input> tag really is big enough.
As a FYI: the "width: 100%" does not apply to the background image size, but to the element's size, relative to its parent.
There are other ways of putting an image in a form that may be more appropriate:
<input type="image" src="../images/btn-blk.png">
<button><img src="../images/btn-blk.png"></button>
When using the like or send widget on a Fan Page (no mater if you use iframe tag or fbml for it) the overlay for commenting is positioned always to the right. see
http://twitpic.com/4q7ggi for example.
I cant find a way to get the widget to respect the 520px boundary of the facebook tab.
see http://www.facebook.com/pages/Ludwig-Test/127771653944246?sk=app_101150316644842 for an example.
Anyone an idea how to solve this ?
TIA
Rufinus
Try adding this to your css:
.fb_edge_comment_widget {
margin-left: -350px;
}
This will move comment box to the left, but the little arrow pointing to the button will move too (which you could try to cover with another element). It will only work if you're using XFBML, not an iframe.
Here's an example.
I had to move the little arrow to the bottom, and that's how i did it.
1) Move your popup window to the desired position. Use the !important statement to overwrite default styles.
.fb_edge_comment_widget {
top: -224px !important; left: -246px !important; height: 191px;
background: url(../img/arrow-down.gif) 0 100% no-repeat
}
This style also contains a new arrow image which replaces the bottom line of the popup window. It contains my own new bottom arrow, which is blue (#283E6C) by default and grey inside (#F2F2F2). We can use height to adjust the vertical position and move the background image to the bottom.
The image will look like this:
.
2) Apply overflow: hidden to the span that wraps the iframe, We'll be able to cut off parts of the iframe by applying margin-top in step 3, and replace them with our own.
.fb_edge_comment_widget > span {
height: 184px !important; overflow: hidden; border-top: 1px solid #000;
}
I'm using border-top to create my own upper border, since in step 3 we are cutting of the default border and arrow.
3) Move the iframe up a bit to cut off its upper border and arrow.
.fb_edge_comment_widget > span > iframe {
margin-top: -7px;
}
The result looks like this in my case:
If you're using the XFBML implementation of the Facebook Like button, you can use CSS to re-position the "flyout" menu relative to its original position near the Send button:
The above example using jsFiddle and this CSS:
.fb_edge_comment_widget {
margin-left: -343px;
}
Since the contents of the "flyout" are inside an iframe you won't be able to apply any CSS to it — meaning, moving the triangle indicator to the right side of the "flyout" isn't possible.
Web browsers have tightened security on cross-frame scripting due to spoofing and other hacks, so iframes are treated like separate HTML pages with their own CSS and JavaScript.
For any advanced CSS styling, you would have to inject the Facebook Widget's iframe using DOM Scripting ... and even then it may not work across browsers.
Not a great answer but the only option I have found is to wrap the widget in an absolutely positioned Div to keep it on the left side of the window
To fix it I strongly recommend to put the Facebook widget on the left side of your page. Any other solution could work for a certain period of time, but in the future will fail.
The reason is that Facebook updates its widget frequently.
Can we use more than 2 images for single navigation. That means when we hover on that image it will shows 6 different images. Is it possible to make for a single navigation image? If possible means how?
I think you are all understand this
alt text http://img714.imageshack.us/img714/2786/mubeen.gif
If I understood you correctly, you want to continously change the position of your background image while you hover over one button.
If that's right, then I suggest making a static image as background image and changing the image to a GIF animated image on hover
You can (at the moment - cross browser) only set one bg image on an element. If you want to change it on hover or whatever, just add an a-tag with href set on #:
<a class="img" id="thatoneimg" href="#"></a>
And then in the css:
a.img {
width: 100px;
height: 100px;
}
a#thatoneimg {
backround-image: url(staticimg.jpg);
}
a#thatoneimg:hover {
backround-image: url(movingimg.gif);
}
That should work cross browser. You need the a-tag for it to work in IE.
Edit:
As Starx said, just make the second image a .gif with an animation. It will not use sprites but it will work.
If I get your question right, it's possible, but you will have to have 6 different HTML elements to contain the background image at 6 different positions.
I have multiple styles such as button_50 where the width is 50px, button_75 where the width is 75px, and so on...
Is there a way to dynamically generate the length of the button based upon the length of the text, so I probably would just have to create one style like button and I can apply that to any button and it would shrink or stretch based on the length of the text.
Here is my asp.button declaration:
<asp:Button ID="btnReset" runat="server" Text="Reset" OnClick="btnReset_Click"/>
Here is some styling in which I have a small image that I want to be able to expand and shrink depending on the length of the text.
.test_button
{
background: url(../images/test/grey-left.png) top right left bottom;
background-repeat:no-repeat;
border-style: none;
font-family: Arial,Helvetica,Sans-Serif;
height: 23px;
}
I added the top right left bottom to the class and that expands the image across. How can I apply 4 different images to each background position of the button so I can have a sort of gradient for example instead of the same button for top right left bottom.
Your changes have clarified what you want a lot from when I first replied.
Each element can have ONE background image only*. The solution is to having multiple background images is to have multiple HTML elements:
<span class="fake_button">
<span>
<span>
<input type="submit">
</span>
</span>
</span>
Then in your CSS add an image to different corner of each one.
It's not simple or pretty but it's the only way of having multiple background images.
*I think some of the nightly builds of Safari and Firefox can do this but I suspect this isn't what is being asked about.
<asp:button> outputs <input type="submit"> (give or take a few attriubutes)
In the absence of other styling, a submit button like this should just expand to fit it's text. Perhaps you should look at what is stopping this happen.
Just don't set the width.
Update
As noted in comments, the case is using an image, probably as background.
The only things I can think of for image buttons that dynamically resize is using using separate images as end-caps for the left and right of the button, then a background image that either can repeat or is big enough to account for all sizes. This would have the limitation of how the center image fades into the ends, probably at best you could use a top to bottom gradient.
An alternative would be to use css/javascript package/method such as SpiffyCorners.
If you try to stretch an image, you risk pixelation and you would have to use an estimation for font width such as you could get from a printing or font API. This would be very error prone due to the risk of not all clients having the same fonts.
You can do it on PageLoad with a loop like this:
// set default length
string cssclass = "button_25";
int text_length = button.Text.Length;
int[] sizes = {50, 75};
for (int x = 0; x < sizes.Length; x++)
{
if (text_length > sizes[x])
cssclass = "button_" + sizes[x].ToString();
else
break;
}
button.CssClass = cssclass;
You can keep your source clean by adding the rounded corner functionality via CSS for browsers that understand it (plus the gradient bg image or whatever) and using JS for browsers that don't.
for ff/sf/op just use
button{
background: #ccc (../path/img.gif) left bottom;
-moz-border-radius: 6px;
-webkit-border-radius:6px;
border-radius: 6px;
}
then for IE include a snippet of js to wrap the button with spans and apply the styling via css. there are jquery plugins a plenty to do this for you if you're not inclined to hand roll.
Try CSS3PIE. It will make your life easyer... Take a look in my bolg page:
Internet Explorer 6-8 don’t have CSS border-radius. How to make rounded corners?
Cheers!
Roberto.