Welcome to WebmasterWorld Guest from 54.166.133.84

Forum Moderators: ocean10000

Message Too Old, No Replies

asp.NET buttons and CSS

Question of the YEAR!

     
11:57 pm on May 2, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2003
posts:85
votes: 0


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!
4:38 pm on May 5, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2003
posts:85
votes: 0


I am fairly new at this forum thing, how do you get people to anwser back?
12:33 am on May 7, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2003
posts:85
votes: 0


Anyone have any feedback?
12:38 am on May 7, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member jeremy_goodrich is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 4, 2000
posts:3468
votes: 0


I'll try to get somebody with experience to lend a hand - just hang tight...
11:19 am on May 7, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


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?

2:40 pm on May 7, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2003
posts:85
votes: 0


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....

2:47 pm on May 7, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


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...

3:29 pm on May 7, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2003
posts:85
votes: 0


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
3:36 pm on May 7, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


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!

11:45 am on May 10, 2003 (gmt 0)

Full Member

10+ Year Member

joined:Apr 27, 2003
posts:236
votes: 0


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.
7:02 pm on May 10, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2003
posts:85
votes: 0


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!
9:11 pm on May 14, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2003
posts:85
votes: 0


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!
2:21 am on May 16, 2003 (gmt 0)

Full Member

10+ Year Member

joined:Apr 27, 2003
posts:236
votes: 0


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.

3:13 pm on May 16, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2003
posts:85
votes: 0


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

6:05 am on May 20, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 18, 2001
posts:1437
votes: 0


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