Webmaster forum - 2 Divs side-by-side causing me grief

Author

2 Divs side-by-side causing me grief

Laphan

2006-11-19, 7:57 pm

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

BBM

2006-11-19, 7:57 pm

Laphan wrote:
> 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

Setting the image as a background for a link, or positioning the link
on top of the image...? Then if it needs to be a form button (rather
than just a link), use onclick JS event to simulate the form
action/submission/etc. Buttons with square corners would certainly be
easier (changing border to inset/outset, and setting border and
background color to the same thing), but it shouldn't be impossible to
make rounded-corner buttons without making a separate image for each.
The big problem, of course, would be people who change the text size
on the page...