2 Divs side-by-side causing me grief

Discussion in 'ASP General' started by Yobbo, Nov 11, 2006.

  1. Yobbo

    Yobbo Guest

    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
    Yobbo, Nov 11, 2006
    #1
    1. Advertising

  2. Yobbo wrote:
    > 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
    --
    Microsoft MVP - ASP/ASP.NET
    Please reply to the newsgroup. This email account is my spam trap so I
    don't check it very often. If you must reply off-line, then remove the
    "NO SPAM"
    Bob Barrows [MVP], Nov 11, 2006
    #2
    1. Advertising

  3. Yobbo

    Bob Lehmann Guest

    >> This is a mare.

    Have you tried an Equine group?

    Bob Lehmann

    "Yobbo" <> wrote in message
    news:...
    > 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
    >
    >
    >
    Bob Lehmann, Nov 12, 2006
    #3
  4. Yobbo

    Evertjan. Guest

    Bob Lehmann wrote on 12 nov 2006 in
    microsoft.public.inetserver.asp.general:

    >>> This is a mare.

    >
    > Have you tried an Equine group?


    Ever tried horse whispering in javascript or vbs?

    It's a must.

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Nov 12, 2006
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. rich
    Replies:
    0
    Views:
    720
  2. Chad

    Master Pages causing me grief

    Chad, Jun 12, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    570
  3. Chad

    Master Pages causing me grief

    Chad, Jun 13, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    343
  4. Gary
    Replies:
    21
    Views:
    8,724
    luserXtrog
    Apr 10, 2009
  5. Chad

    Master Pages causing me grief

    Chad, Jun 11, 2006, in forum: ASP General
    Replies:
    2
    Views:
    121
    Egbert Nierop \(MVP for IIS\)
    Jun 12, 2006
Loading...

Share This Page