Hi All
Wondered if you could help.
I'm trying to get rounded buttons for links using css and I'm really
struggling.
I wanted to just use standard INPUT buttons and colourise them, but user's
of my web app want to continue creating their own buttons and using these in
css. Before I used straightforward images, but creating an image for each
button was a mare. You see this is all to do with giving people the ability
to change the look of the web app, in other words a skin, using nothing more
than pics and css files.
My theory was that I create a div, span or whatever for the left hand side
of the button and ref the image (in css) to be a 2px wide img that can have
the curved left hand edge of the button.
I would then put a div, span or whatever next to this and the reference
image would be a really long image (horizontally speaking) so that if the
button text was long then this would keep moving to the right and
accommodate basically any text length.
The code I've tried out is as follows:
<page snapshot>
<TR><TD>
<DIV CLASS='BtnBgLHS'><DIV CLASS='BtnBgNormal'
OnMouseOver="this.className='BtnBgHover'"
OnMouseOut="this.className='BtnBgNormal'">
<A HREF='detail.asp' CLASS='BtnText'>Continue Browsing</A></DIV></DIV>
</TD></TR>
<page snapshot>
<css snapshot>
..BtnBgLHS {BACKGROUND:url(btn-lhs.gif); BACKGROUND-POSITION:left;
BACKGROUND-REPEAT:no-repeat; TEXT-ALIGN:left; WIDTH:2px; HEIGHT:19px;
PADDING:0px;}
..BtnBgNormal
{
HEIGHT:19px;
WIDTH:10px;
WHITE-SPACE:nowrap;
MARGIN-LEFT:2px; << just nudges the main button bg to the right so that
you can see the left hand side
PADDING:5px 7px 0px 5px;
BACKGROUND-IMAGE:url(btn-normal.gif);
BACKGROUND-REPEAT:no-repeat;
BACKGROUND-POSITION:right;
VERTICAL-ALIGN:bottom;
TEXT-ALIGN:center;
}
..BtnBgHover
{
HEIGHT:19px;
WIDTH:10px;
WHITE-SPACE:nowrap;
MARGIN-LEFT:2px;
PADDING:5px 7px 0px 5px;
BACKGROUND-IMAGE:url(boxheadbg.gif);
BACKGROUND-REPEAT:no-repeat;
BACKGROUND-POSITION:right;
VERTICAL-ALIGN:bottom;
TEXT-ALIGN:center;
}
..BtnText
{
TEXT-DECORATION:none;
FONT-FAMILY:verdana,arial,helvetica;
FONT-SIZE:10px;
COLOR:black;
}
..BtnText:hover
{
TEXT-DECORATION:none;
FONT-FAMILY:verdana,arial,helvetica;
FONT-SIZE:10px;
COLOR:darkred;
}
<css snapshot>
In IE, the above works and relatively speaking works well, but Firefox the
body of the button is about 5 pixels down from the left hand side and is
only 10 pixels wide rather than the width of the padding and text prompt.
Aaaarrrggghhh!!!
This is a mare.
I don't want to create separate pages or code sections to handle ffox and
ie, but I do use separate css files for the browsers.
Can you suggest anything to resolve this issue?
Many thanks.
Laphan
