2 Divs side-by-side causing me grief

Y

Yobbo

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
 
B

Bob Barrows [MVP]

Yobbo said:
Hi All

Wondered if you could help.

I'm trying to get rounded buttons for links using css and I'm really
struggling.

ASP is server-side technology.. All it does is process data sent from a
client in a Request and generate html to be sent to the client via Response.
You'll probably get a quicker response by posting to a relevant newsgroup.
http://groups.google.com/groups/dir?sel=33584039
 
E

Evertjan.

Bob Lehmann wrote on 12 nov 2006 in
microsoft.public.inetserver.asp.general:
Have you tried an Equine group?

Ever tried horse whispering in javascript or vbs?

It's a must.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,733
Messages
2,569,440
Members
44,831
Latest member
HealthSmartketoReviews

Latest Threads

Top