'Graphic free' CSS buttons containing asp label 1

[tomouse]

I manage a multilingual website and am trying to replace my ASP imagebuttons with CSS versions. Currently, each time we add a new button we have to create 2 new graphics (One with the text in English, the other in Portuguese) - it would be far better to do away with these graphics that include text and replace with a CSS button with actual text for the label.

I have managed to create a button which displays correctly when I place actual text inside (I gather the term for this technique is 'sliding doors' - as the length of string changes, the button alters to fit):

<a id="imbSearch3" class="buttonO" href="#"><span>Button Text</span> </a>

(I have put the CSS at the bottom of this post).

However, because this is a multilingual site, I cannot hard-code in the button text. I need to use a control that can be referenced by the server's resource files to insert text from the selected language at runtime:

<a id="imbSearch2" class="buttonO" href="#"><span><asp:Label ID="lb1" runat="server" Text="<%$ Resources:ResourceFilename, stringKey %>"/></span> </a>

But the problem with this is that the label somehow duplicates a small section of the top-left corner into the middle of the button - I don't understand why. I've been messing around with the CSS values (the CSS below shows the two versions of the span styling), but I can't get this to display in the same way as when I just have the text hardcoded as in the first example. Can someone help me get this positioned properly? The 'button_left' graphic is a 300px wide by 20px high; button_right is 18px wide by 20px high.

Here is the CSS

a.buttonO {
    background: transparent url('../img/button_right.png') no-repeat scroll top right;  
    color: White;
    display: block;
    float: left;
    font: bold 12px Trebuchet MS, sans-serif;
    height: 20px; 
    margin-right: 6px;  
    padding-right: 18px; 
    text-decoration: none;
}
/* This is the closest I can make for the aspLabel version */
a.buttonO span {
    background: transparent url('../img/button_left.png') no-repeat;  
    display: block;
    line-height: 10px;				
    padding: 2px 0 3px 10px;    
}

/* This is the one that works for the hardcoded text version */
a.buttonO span {
    background: transparent url('../img/button_left.png') no-repeat;  
    display: block;
    line-height: 10px;				
    padding: 2px 0 3px 10px;    
}

 

[Geates]

Are the "disply: block;"(s) and "float: left;" needed? Perhaps I don't understand sliding doors.

Also, isn't the margin outside the element (in this case, span). Therefore, putting no background in the margin (whitespace)?


-Geates

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding

"There are seldom good technological solutions to behavioral problems."
- Ed Crowley, Exchange guru and technology curmudgeon

 

[audiopro]

That sort of thing is usually handled by server side scripting.
My preference is Perl using the Perl::Template module but there are other language options available.
The server side script sorts out the required content and the CSS makes it all look pretty.

Keith

http://www.studiosoft.co.uk

 

[tomouse]

The display:block; and Float:left appear to help position the two graphics - without these the button appears to explode! Also, I just noticed I forgot to correct the last section of the CSS - the padding for the version that works with the hardcoded label should have been:

5px 0 5px 18px

 

[tomouse]

Hi Keith,

When you say "that sort of thing" is normally handled server-side, are you referring to the insertion of the correct string according to the language that the user has selected? Currently this *is* being done on the server - the Text="<%$ Resources:ResourceFilename, stringKey %>" is replaced with the appropriate string during server-side processing. Apologies if I have misunderstood your point.

The server side user-language processing is working perfectly (I'm using this across the site for all normal text). The problem is that I've been asked to replace the current graphical text buttons with a generic, 'blank' button which can have text overlaid. I gather this is very achievable using CSS, but I haven't been able to get any solution to display correctly when the text is actually in an asp Label, rather than in straightforward HTML displayable text. The example I gave is *very* nearly working, but not quite.

 

[Geates]

The client-side code IS working as it should, HOWEVER the server-side code is printing a string of whitespace that is longer than 300px, the width of the background_left.png.

In the <asp: tag, the text property is being interpreted incorrectly, perhaps as whitespace.

Text="<%$ Resources:ResourceFilename, stringKey %>"
Text="                                            "

I bet if Text="This string is a bit longer than the image allows"
, you'll see what I mean (I think).

-Geates

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding

"There are seldom good technological solutions to behavioral problems."
- Ed Crowley, Exchange guru and technology curmudgeon

 

[Geates]

Actually, "This string is a bit longer than the image allows" is 1 character too short :{


Although "Resources:ResourceFilename, stringKey" returning a long string is probably still plausible (I have no way to test)

-Geates

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding

"There are seldom good technological solutions to behavioral problems."
- Ed Crowley, Exchange guru and technology curmudgeon

 

[tomouse]

Wow, a great example of how explaining a problem 'out loud' helps triggers you to come up with a solution. I started comparing the HTML rendered for button with the hardcoded label

<a id="imbSearch3" class="buttonO" href="#" onclick="javascript:ClickedClient(this, 'ctl00_ContentPlaceHolder1_imbFiltrar');"><span>Filter results</span> </a>

with the HTML rendered for the button with the dynamic label:

<a id="imbSearch2" class="buttonO" href="#"><span><span id="ctl00_ContentPlaceHolder1_Label21">Filtrar resultados</span></span> </a>

Clearly there is an extra <span> tag rendered in place of the <asp:label...> - when I removed the <span> that I had in at design time, everything fixed itself up.

Many thanks for your suggestions and for being the sounding board that helped push me into looking at this from the right angle.

 

[audiopro]

Your CSS looks very complicated for what it does.
Sometimes it is worth taking a step back and look at what effect are you aiming for.
Do you have an example as an image perhaps?

Keith

http://www.studiosoft.co.uk

 

[tomouse]

I picked this up as an example of this sliding doors method of making a flexible width button which would adjust its width according to the text that sat within. I adjusted a few of the values to fit my specific button graphic, but I haven't made any additions. To be honest I find the whole CSS positioning thing a bit arcane and of course when you don't fully understand something it is not always easy to work out which stuff is useful and which is junk.

The idea is that I can use these CSS styles to replace all our asp:Imagebuttons. As the website expands we will need more and more buttons and so instead of having to create new images which include the text of the buttons, we can just use this new graphicless button. The full version includes some other styles for 'active' which give the button a 'click' action.

Was there something in the original CSS which seemed over complicated (I'd love to remove anything superfluous)? This may look a little more complicated in places because I forgot to remove the calls to my javascript functions in the latter examples.

 

[audiopro]

This is the style I generally use although each website has different requirements particularly with color.
As long as the background image has no left and right edges, it will stretch to the required width.
As a side note, search engines prefer text to graphics too.

This is a working example of that

http://www.studiosoft.co.uk/forum/menuex.htm

.menucont{
	width:1000px;
	float:left;
	padding:8px;
	border-width: 1px;
	border-style: solid;
	border-color: #000;
	background-color:#5b4eac;
}
.menitem{
	height:30px;
	margin-left:30px;
	padding:5px;
	float:left;
	font-size:12px;
	font-family: Verdana, sans-serif;
	border-width: 1px;
	border-style: solid;
	border-color: #000;
	background-image: url("testbut.jpg");
}

.menitem a{
	color:#123456;
}

.menitem a:hover{
	color:#ff0000;
}

Keith

http://www.studiosoft.co.uk

 

[tomouse]

Good point about the search engines. Now I just need to persuade my client that they don't want rounded edges on their buttons

 

[ChrisHunt]

I started comparing the HTML rendered for button with the hardcoded label

I was going to suggest this, but you figured it out for yourself.

Remember that all your browser has to go on when it renders something is the HTML and CSS that's passed to it. It never sees the raw asp (or php or perl or whatever) code.

Thus the only code that counts is the HTML that you see in the "view source" on the browser. The asp code is no good to us, and it isn't much good to you. It's so much easier to spot problems in what the browser actually sees than in what you think it sees!

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[audiopro]

If they desire rounded corners who are you to deny them their pleasure

http://www.studiosoft.co.uk/forum/menuex1.htm

It requires a bit of extra CSS and a couple more images

.menucont{
	width:1000px;
	float:left;
	padding:8px;
	border-width: 1px;
	border-style: solid;
	border-color: #000;
}
.menitem{
	height:30px;
	padding:5px;
	float:left;
	font-size:12px;
	font-family: Verdana, sans-serif;
	border-width: 1px;
	border-style: solid;
	border-color: #000;
	background-image: url("testbut.jpg");
}

.menitem a{
	font-family: Verdana, sans-serif;
	text-decoration: none;
	font-weight:bold;
	font-style:normal;
	color:#123456;
}

.menitem a:hover{
	font-family: Verdana, sans-serif;
	text-decoration: none;
	font-weight:bold;
	font-style:normal;
	color:#ff0000;
}
.roundl{
	margin-left:30px;
	float:left;
	padding:5px;
	height:30px;
	background-image: url("testbl.jpg");
}
.roundr{
	padding:5px;
	float:left;
	height:30px;
	background-image: url("testbr.jpg");
}

Keith

http://www.studiosoft.co.uk

 

[audiopro]

Darn - can't edit code here.
menitem of course should not have a border.

.menucont{
	width:1000px;
	float:left;
	padding:8px;
}
.menitem{
	height:30px;
	padding:5px;
	float:left;
	font-size:12px;
	font-family: Verdana, sans-serif;
	background-image: url("testbut.jpg");
}

.menitem a{
	font-family: Verdana, sans-serif;
	text-decoration: none;
	font-weight:bold;
	font-style:normal;
	color:#123456;
}

.menitem a:hover{
	font-family: Verdana, sans-serif;
	text-decoration: none;
	font-weight:bold;
	font-style:normal;
	color:#ff0000;
}
.roundl{
	margin-left:20px;
	padding-top:5px;
	padding-bottom:5px;
	float:left;
	width:10px;
	height:30px;
	background-image: url("testbl.jpg");
}
.roundr{
	padding-top:5px;
	padding-bottom:5px;
	width:10px;
	float:left;
	height:30px;
	background-image: url("testbr.jpg");
}

Keith

http://www.studiosoft.co.uk