Sliding doors buttons works great but I need a larger image

[wright67uk]

With the below code I am using a sliding doors technique which uses a single image to create some buttons.

Ive added a second image blue.png so that I can also add a hover state.

 

Everything works really well, but Id like to know what I would have to do If I were to add a higher image.

At current Im using an image which is W493 H24, ive tried replacing the image with a button W493 H48,

but I get all sorts of problems, mainly the fact that the bottom of the button dissapears.

 

ul 	      {padding: 5px;margin: 10px 0;list-style: none;background-color: f2f2f2;border-bottom: ;float: left;clear: left;}
ul li 	      {float: left;display: inline; /*For ignore double margin in IE6*/margin: 0 10px;}
ul li a 	      {text-decoration: none;float:left;color: #666; cursor: pointer; font: 600 11px/22px "Arial", Helvetica, sans-serif;}
ul li a span     {margin: 0 10px 0 -10px;padding: 1px 8px 5px 18px;position: relative; 				
                      /*To fix IE6 problem (not displaying)*/float:left;}

ul.blue li a.current, ul.blue li  {background: url(grey.png) no-repeat top right;color: #0d5f83;} 
/*STANDARD STATE right side of rectangle*/

ul.blue li a.current span, ul.blue li span 	{background: url(grey.png) no-repeat top left;}         
/*STANDARD STATE left side of rectangle*/

ul.blue li a.current, ul.blue li a:hover       {background: url(blue.png) no-repeat top right;color: #0d5f83;} 
/*HOVER STATE right side of rectangle*/

ul.blue li a.current span, ul.blue li a:hover span 	{background: url(blue.png) no-repeat top left;}
/*HOVER STATE left side of rectangle*/

 

 

[cssfreakie]

You should change the dimensions of the element to which you assigned the background.

 

if you look at your commented code:

 

ul.blue li a.current, ul.blue li  {background: url(grey.png) no-repeat top right;color: #0d5f83;} 
/*STANDARD STATE right side of rectangle*/

ul.blue li a.current span, ul.blue li span 	{background: url(grey.png) no-repeat top left;}         
/*STANDARD STATE left side of rectangle*/

 

Those are the elements you assigned a background to so those are the ones you have to change the dimensions for. Easiest way to do this or to solve this is just use firebug  (for firefox) right click on the element and inspect them and play a little with the values such as  height (font-size too) width and padding. Those are the ones that directly effect the dimension on which the background is shown

[wright67uk]

Thankyou I shall look at firebug.

Those particular lines of code do not directly have any widths, line heights etc that you talk about.  I pressume you mean I need to look at their patents?

[cssfreakie]

Thankyou I shall look at firebug.

Those particular lines of code do not directly have any widths, line heights etc that you talk about.  I pressume you mean I need to look at their patents?

very good. Those lines don't have any dimensions indeed, but, Those show you the selectors/id/classes that need to be looked for. ANyway try out firebug indeed very good tool. At my blog I have a small video on how to use it. (5min) check it out if your having difficulties

[wright67uk]

I've done some reading and firebug along with its many add-ons looks like a very good tool indee, I think you have opened some doors for me, thankyou.

[cssfreakie]

I marked your topic solved (button left bottom corner) is that correct?

[wright67uk]

Yes thankyou.  I will ensure to do this next time,