Hi all, i have a button someone wants on their site - but i cannot work out for the life of me - or find a tutorial for something similar - how to convert this into css so the background expands with the content (text).
The button and the files as i have sliced them are here:
http://www.webdoggy.co.uk/tester/button.html

Im not sure if i should be using 2 or 3 images and ideally i would like it to change on rollover.

I feel a bit stupid really as its just one of those things i havent done quite this before and i have serched the web in vain to find something similar in css - its easy to do in tables - but i want to do it in css and im wondering if some kind soul could put me out of my misery

well i found a tutorial on the sliding doors thing on Css-tricks - i applied it stage by stage - but the problems are that
1: the left hand part doesn't appear in ie at all!
2: the square edge of the left hand when viewed in firefox (left appears in ff) - overlaps the right hand curve.

I wonder if anyone can help out.

Thanks

The code for the buttons is below:

* {margin: 0; padding: 0;}
html {overflow-y: scroll;}
body {font: 62.5% Arial, Helvetica, sans-serif;}
ul {list-style: none inside;}
p, li, dl {font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em;}
a {outline:none;}
img, a img{ border:none;}
.floatleft {float:left:}
.floatright {float:right;}
.clear {clear:both;}
#page-wrap {width: 500px;
margin: 20px auto;}

a.button {
display: block;
height: 37px;
float:left;
font-weight:bold;
background: url(img/button-left.png)left top no-repeat;
text-align:center;
color: white;
text-decoration:none;
text-shadow: 3px 3px 3px black;
font-size: 12px;
}

a.button span {background:url(img/button-right.png) right top no-repeat;
display: block;
padding: 6px 8px 0px;
height: 37px;}

after applying a negative margin to the span element - i got rid of the overlap:
a.button span {background:url(img/button-right.png) right top no-repeat;
display: block;
padding: 6px 28px 0px;
margin-right: -14px;
height: 37px;}

but still the left hand side won't show in ie and i can't fighure out why.

Set the span to display: inline and the big space in IE will go away. Obviously you'll need to do this in a separate css file for IE called by conditional comments so that it is not read by good browsers.

In case you are lazy and don't want to Google, here are some links for ya

http://www.quirksmode.org/css/condcom.html
http://msdn.microsoft.com/en-us/libr...12(VS.85).aspx
http://www.positioniseverything.net/...s/cc-plus.html

Cheers

Thanks for the advice ladyn - i think i have messed things up good and proper now as my brain slips into meltdown - i have applied the menu buttons to the test page at http://www.webdoggy.co.uk/tester/testvp.html and now it is even more messed up than ever!

am i right in putting the conditional commments as :

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->

and the css for it as this in the stylesheet called ie6.css:
a.button span {display: inline;}

I had a look in ie6 (ie tester ) and its all over the place - and so is ie7 by the looks of it - ie8 and the rest of the modern browsers look ok - could you possible tell me where im going wrong on this please

the full css is as follows:
@charset "utf-8";
/* CSS Document */

/* start reset eric meyer */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
/*font-style: inherit;*/
font-size: 100%;
/*font-family: inherit;*/
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
font-family: Arial, Helvetica, sans-serif;}

ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/* global */
html, body {height: 100%; }
.clear {clear:both;}
p {color:#FFF;}

/* Structure */

#wrapper {width: 983px; background-color:#000000; margin: 0 auto; margin-top: 20px; margin-bottom: -50px; position:relative;}

#header {height: 50px; background-color:#000;}

/* left styles */
#left-content {float:left; width: 321px; background-color:#003333; padding:10px;}
/* right content styles */
#right-content {float:right; width: 622px; background-color:#009999; padding: 10px;}
/* footer styles */
#footer {border-top: 10px solid #990000; color:#00CC33;height: 50px; position:relative;}

#footer p {margin:5px; }
.clearfooter {clear:both;}
#main-nav {background-color:#000; }
#main-nav li { padding-right: 10px;}


/*pesky buttons */
a.button {
display: block;
height: 37px;
float:left;
font-weight: bold;
background: url(img/button-left.png) left top no-repeat;
text-align:center;
color: #fff;
text-decoration: none;
text-shadow: 3px 3px 3px black;
font-size: 12px;
}

a.button span {background:url(img/button-right.png) right top no-repeat;
display: block;
padding: 6px 28px 0px;
margin-right: -14px;
height: 37px;}

/* D3 Navs */
#d3nav li .inline {display:inline;}
#d3buttons {width: 120px;}


many thanks for your help so far - i'm at my wits end here!!

im wondering if im wronf in applying the class of button to the li items in main-nav - if i remove it it keeps the span image - also i cant seem to get any space between the buttons no matter what i do.

i have now changed the nav to take on the button - but it still looks a mess in ie7 & 6 and try as i will i cant get the buttons to space apart

this is the portion of code i changed.
Im off for a pint to clear my head!

#main-nav li { padding-right: 10px;}
#main-nav ul {padding-left: 10px;}


/*pesky buttons */
#main-nav a{
display: inline-block;
height: 37px;
float:left;
font-weight: bold;
background: url(img/button-left.png) left top no-repeat;
text-align:center;
color: #fff;
text-decoration: none;
text-shadow: 3px 3px 3px black;
font-size: 12px;
padding-left: 12px;

}

#main-nav a span {background:url(img/button-right.png) right top no-repeat;
display: block;
padding: 10px 8px 0px;
margin-right: -14px;
height: 37px;}

The ONLY thing that belongs in that CSS file for IE6 is JUST the rules needed to fix the problems, it should NOT be a duplicate of your main css file.

oh no - the only thing i put in there was this line:
a.button span {display: inline;}

doesnt seem to have fixed the problem though.

the example above was how i had changed the main css file

Maybe I missed some part of the error but if you set it to display: inline-block works for me in the browsers I tested in. FF3, IE8, IE7. I am not totally sure I know what error you are having lol.

Cheers

That'll work - except for IE6, which doesn't support the inline-block property - of course

IE6 and 7 support inline-block as long as the element was naturally inline, and since span is, wouldn't it work?

http://www.quirksmode.org/css/display.html

Cheers