asp.NET buttons and CSS

Question of the YEAR!

[RainMaker]

I have had a problem for quite some time now and nobody has really been able to anwser me except from some really nice comments from Dr. doc that really helped. My Goal is to use a regular asp.NET asp:imagebutton. I don't want to specify a url at all for the ImageUrl property. I want to call it from a CSS. I have tried using the background-image and if I use some width and hieght properties it works, BUT it displays the empty image box. Is there any suggestions on how to get rid of the empty boxes or a nifty CSS command that will enable me to set a url for my imagebutton?
This one is quite a stumper!

[RainMaker]

I am fairly new at this forum thing, how do you get people to anwser back?

[RainMaker]

Anyone have any feedback?

[jeremy goodrich]

I'll try to get somebody with experience to lend a hand - just hang tight...

[BlobFisk]

Hey RainMaker,

What code are you using for the background URL? Your CSS should look something like background:url(path/to/image.gif). Also, it's important to remember that the path you use is relative to location of the CSS file.

BUT it displays the empty image box

I'm not sure that I quite understand you here - do you mean a broken link icon?

CSS will not allow you to set a URL for images, the suggestion of using a background image may work, but how will you assign the button action to the image? Using a transparent gif? Or assigning some action to the layer that is holding your background image?

[RainMaker]

blob and everyone else,

Well I am using the code:

<asp:ImageButton id="mybutton" runat="server" CssClass="myclass"/>

in my external CSS I am using the background code that you provided. when I do that it shows up just fine the image that I mapped to. But you know when there is a picture object and there is no picture for it there is a box and the little color thingy...( I know what an explanation ). Basically an empty image for an image icon or object that wasn't set to an image. drag an image object to a form without doing anything to it and that is what comes up but with the picture that I specified as a background in the CSS. I tried transparent gif's and the whole point is to be able to change the path from the style sheet and the name of the image too. The action I am not worried about I am just worried about the stupid empty image box. I need to get rid of them or find something that will allow you to just set a path for the object within a CSS. Like you said I don't know if I can do that or not but I would think that within ASP.NET maybe you can get rid of the boxes? Anyhoo I hope that helps....

[BlobFisk]

I think that my complete ignorance of ASP.NET is hampering me here! Say you didn't want to use CSS, would the code you showed above have a src attribute?

I don't think that CSS is going to be of help to you here. CSS will allow you to add styles to an object, but in your case, the image button should have a URL - which is why, I think, that you are getting the broken image icon.

You cannot specify (to the best of my knowledge) the url of an image within CSS - it was never designed to do this. Widths, heights, borders, visibility etc. - CSS is the job, but the actual location of the image file, no go.

You could use a layer with a background (instead of the imageButton - but I don't think that this will be very beneficial...

[RainMaker]

Thank you very much Blob. I now have a new profound respect for forums. People actually talk back! Anyhoo you might want to read up on some .NET, it's really cool. Thank you for all of your efforts I really appreciate everything. I think all I needed was to be told that "it can't be done"....you know what I mean? To anwser your Question the Imagebutton object doens't have the src attrib. that is what the ImageUrl is for. Anyhoo thanks again

[BlobFisk]

You'll have a difficult time finding somewhere better than here!

To be honest, as you say, I don't think that CSS is going to help you here. I can't think of any alternative though. :(

When I get the time (2016, it's looking like!), I plan to upgrade to .NET. And when I do, I'll come looking for you!

[sharbel]

Hmm why are you using an Image Button if you are attaching the BG image from a CSS? You should use a regular <ASP:Button/> and attach the CssClass property to the relevant class in your CSS.

[RainMaker]

sharbel, thank you very much for your input. I am going to try this as soon as possible I can't thank you enough. When you put it like that it just makes so much sense.....haha!Thanks again!

[RainMaker]

Well sharbel I tried to use a regular ASP.NET button with the CSS property. In my CSS I used the Background-image style and it didn't work :-(( that sux! Thanks anyways!

[sharbel]

I have discovered something that I never noticed before... if you do not set the background color in your CSS class for the button, the background image will not show up.

So to solve your problem, try this class for your button:

.button
{
background-image: url(brown.jpg);
background-color: black;
}

When I took out the "background-color: black;" the texture doesnt show up. I always set the bg color, so i never noticed it.

Hope this helps.

[RainMaker]

Sharbel you are the man or woman...haha! It actually worked! I can't believe it I am so happy! The only difference is the little hand when it comes up to the imagebutton, but who cares about that! I really didn't think it was possible at all and alot of people didn't think it was either. Thank you very much for all of your efforts! The only thing that I did to 'spice' things up to make it look really authentic was I set the borderstyle to 'none' and then I didn't use black as my background...I used transparent, which is cool because both properties put together looks and acts like a real imagebutton. Can't thank you and everyone enough! Well this concludes this excapade of CSS and image URLS Thank you all!

[Xoc]

You can change the hand by changing the cursor type in the CSS.