How to make Text or button tag with plain flat look ?

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Ray Muforosky

    How to make Text or button tag with plain flat look ?

    Hello,

    Is there a way to render a text or button tag without a sunken or
    raised surface respectively.

    Ray

  • Christian Winter

    #2
    Re: How to make Text or button tag with plain flat look ?

    Yes, there are CSS style attributes that apply. For example, you can
    specify the border color, border thickness, color of the button, font
    on the button...really just about everything. Just give it
    border:solid; and it should not have the raised look anymore.

    Comment

    • Christian Winter

      #3
      Re: How to make Text or button tag with plain flat look ?

      This is about as flat as you can get it :

      <input type="button" value="Button Text" style="border-style:none;" />

      Comment

      • Ray Muforosky

        #4
        Re: How to make Text or button tag with plain flat look ?

        Thanks, that's what I was looking for.

        Comment

        • RobG

          #5
          Re: How to make Text or button tag with plain flat look ?

          Christian Winter wrote:[color=blue]
          > This is about as flat as you can get it :
          >
          > <input type="button" value="Button Text" style="border-style:none;" />
          >[/color]

          In some browsers you can't modify the style of some elements - like inputs.

          --
          Rob

          Comment

          • Christian Winter

            #6
            Re: How to make Text or button tag with plain flat look ?


            RobG schrieb:[color=blue]
            > Christian Winter wrote:[color=green]
            > > This is about as flat as you can get it :
            > >
            > > <input type="button" value="Button Text" style="border-style:none;" />
            > >[/color]
            >
            > In some browsers you can't modify the style of some elements - like inputs.[/color]

            What browsers would that be?

            It is valid XHTML and if it doesn't work in a browser that is not my
            problem but the browsers problem, IMHO.

            Comment

            • Philip Ronan

              #7
              Re: How to make Text or button tag with plain flat look ?

              "Christian Winter" wrote:[color=blue]
              >
              > RobG schrieb:[color=green]
              >> Christian Winter wrote:[color=darkred]
              >>> This is about as flat as you can get it :
              >>>
              >>> <input type="button" value="Button Text" style="border-style:none;" />[/color]
              >>
              >> In some browsers you can't modify the style of some elements - like inputs.[/color]
              >
              > What browsers would that be?[/color]

              - Safari

              - Older versions of Netscape and IE

              - Any non-graphical browser
              [color=blue]
              > It is valid XHTML[/color]

              XHTML has nothing to do with it. Try CSS. The CSS2 specification says:
              [color=blue][color=green][color=darkred]
              >>> Note. Notably for HTML, user agents may render borders for <<<
              >>> certain elements (e.g., buttons, menus, etc.) differently <<<
              >>> than for "ordinary" elements. <<<[/color][/color][/color]
              [color=blue]
              > and if it doesn't work in a browser that is not my problem but the
              > browsers problem, IMHO.[/color]

              No, it really is your problem. Take a look at item #1 on this page:
              <http://www.webpagestha tsuck.com/biggest-web-design-mistakes-in-2004.html>

              --
              phil [dot] ronan @ virgin [dot] net



              Comment

              • Christian Winter

                #8
                Re: How to make Text or button tag with plain flat look ?


                Philip Ronan schrieb:
                [color=blue]
                > No, it really is your problem. Take a look at item #1 on this page:
                > <http://www.webpagestha tsuck.com/biggest-web-design-mistakes-in-2004.html>
                >[/color]

                I write valid HTML and CSS. This is the only way to ensure that there
                at least is some standard. While I make every effort to accomodate all
                browsers, I do not care if they cannot interpret valid HTML or CSS. I
                also feel that a graphical gimmick such as the one above is low on my
                list of priorities to ensure working in all browsers.

                Comment

                • Jukka K. Korpela

                  #9
                  Re: How to make Text or button tag with plain flat look ?

                  RobG wrote:
                  [color=blue][color=green]
                  >> This is about as flat as you can get it :
                  >>
                  >> <input type="button" value="Button Text" style="border-style:none;" />[/color]
                  >
                  > In some browsers you can't modify the style of some elements - like inputs.[/color]

                  Right; this style attribute only hurts when it works.

                  (When it works, it prevents the button from looking like a button and
                  thereby misleads the user.)

                  P.S. The thread is off-topic: it is about CSS, not HTML. On the HTML
                  side, it is worth noting that <input type="button"> should never be used
                  as a static part of a document but only as generated by client-side
                  scripting. The reason is obvious if you think what happens when
                  client-side scripting is disabled.

                  Comment

                  • Alan J. Flavell

                    #10
                    Re: How to make Text or button tag with plain flat look ?

                    On Fri, 26 Aug 2005, Philip Ronan wrote:
                    [color=blue]
                    > "Christian Winter" wrote:[/color]

                    [re. styling of buttons:]
                    [color=blue][color=green]
                    > > and if it doesn't work in a browser that is not my problem but the
                    > > browsers problem, IMHO.[/color]
                    >
                    > No, it really is your problem. Take a look at item #1 on this page:
                    > <http://www.webpagestha tsuck.com/biggest-web-design-mistakes-in-2004.html>[/color]

                    But surely this problem/mistake arises when the button styling *does*
                    work - not when it doesn't?

                    Users of a particular browser already know what a button looks like on
                    their browser (whereas a web document author typically does not).
                    The user has seen them before, many a time, and recognises them when
                    they see them. (Much the same principle applies for any "user
                    control" on a web page, in fact).

                    Confusion and mystery only sets in when the author contrives to style
                    them so differently than users are accustomed to, that they no longer
                    recognise them, or, worse, mistake them for something else. When the
                    author's styling proposal fails, the user isn't presented with that
                    dilemma.

                    Don't get me wrong: I've nothing against authors proposing a
                    particular presentation in general - in fact, I'm all for it, given
                    the horrible default presentation which most browsers offer. It's
                    only when authors contrive to camouflage something which the user is
                    meant to be able to use, such as a link, or a form "control", to the
                    extent that a user can no longer recognise it for what it is, that I
                    get crabby.


                    [color=blue]
                    >
                    >[/color]

                    Comment

                    Working...