Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > ASP General > 2 Divs side-by-side causing me grief

Reply
Thread Tools

2 Divs side-by-side causing me grief

 
 
Yobbo
Guest
Posts: n/a
 
      11-11-2006
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



 
Reply With Quote
 
 
 
 
Bob Barrows [MVP]
Guest
Posts: n/a
 
      11-11-2006
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"


 
Reply With Quote
 
 
 
 
Bob Lehmann
Guest
Posts: n/a
 
      11-12-2006
>> This is a mare.

Have you tried an Equine group?

Bob Lehmann

"Yobbo" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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
>
>
>



 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      11-12-2006
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)
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
hidden characters in source code causing compiler grief Gary C Programming 21 04-10-2009 06:07 AM
Easy Share causing much grief Minnie Digital Photography 0 07-01-2007 05:13 PM
Master Pages causing me grief Chad ASP .Net 0 06-13-2006 06:12 PM
Master Pages causing me grief Chad ASP .Net 3 06-12-2006 06:35 PM
Master Pages causing me grief Chad ASP General 2 06-12-2006 09:14 AM



Advertisments