Adding borders...

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Jon Glazer

    Adding borders...

    I have an anchor using a class that defines a hover subclass. The issue is
    that the anchor itself doesn't have any border and when hovered it adds a
    border, the problem is that when it adds the border, the text gets shifted.
    Does anyone have any idea how to correct this issue? I would like to create
    a transparrent or invisible border (spacer) so that there's room for the
    visible border to appear when needed but I cannot seem to get it to work.
    Visit http://callandermats.adconn.com/ and hover over left links to see what
    I mean. The style sheet for this is:

    ..menu{
    font-size:12px;
    text-decoration:none ;
    }
    ..menu:hover{
    border-style:groove;
    border-width:1;
    width=100%;
    }

    Thanks!


  • Steve Pugh

    #2
    Re: Adding borders...

    "Jon Glazer" <jglazer.delete .me@adconn.com> wrote:
    [color=blue]
    >I have an anchor using a class that defines a hover subclass. The issue is
    >that the anchor itself doesn't have any border and when hovered it adds a
    >border, the problem is that when it adds the border, the text gets shifted.
    >Does anyone have any idea how to correct this issue? I would like to create
    >a transparrent or invisible border (spacer) so that there's room for the
    >visible border to appear when needed but I cannot seem to get it to work.[/color]

    border-color: transparent; or whatever your background colour is if
    you have a solid backgound rather than an image.
    [color=blue]
    >Visit http://callandermats.adconn.com/[/color]

    Lots of syntax errors to fix:



    Anyway, I see no shifting text in either IE6 or Opera 7.54. In Opera
    only the left and right borders show up, not the top and bottom ones,
    and the links are all different widths (probably because Opera is
    correctly ignoring your bogus width, see below).
    [color=blue]
    >and hover over left links to see what
    >I mean. The style sheet for this is:
    >
    >.menu{
    > font-size:12px;
    > text-decoration:none ;
    >}[/color]

    Pixels are a very bad idea for font-size. Percentages, or not setting
    a size at all, are much preferable.
    [color=blue]
    >.menu:hover{
    > border-style:groove;
    > border-width:1;[/color]

    1 what?
    [color=blue]
    > width=100%;
    >}[/color]

    Invalid syntax and width doesn't apply to inline elements so pointless

    Steve

    Comment

    • Jon Glazer

      #3
      Re: Adding borders...

      Wow the syntax errors are funny. The site is totally valid and I cannot
      find one truthfull error in that validator tool.

      Oh well. It works.

      As for the problem I had, I resolved it by creating a border the same color
      as the background.

      Thanks,
      Jon


      "Steve Pugh" <steve@pugh.net > wrote in message
      news:pasau0prn2 848v0nkmo9vhers v05ij21ir@4ax.c om...[color=blue]
      > "Jon Glazer" <jglazer.delete .me@adconn.com> wrote:
      >[color=green]
      >>I have an anchor using a class that defines a hover subclass. The issue
      >>is
      >>that the anchor itself doesn't have any border and when hovered it adds a
      >>border, the problem is that when it adds the border, the text gets
      >>shifted.
      >>Does anyone have any idea how to correct this issue? I would like to
      >>create
      >>a transparrent or invisible border (spacer) so that there's room for the
      >>visible border to appear when needed but I cannot seem to get it to work.[/color]
      >
      > border-color: transparent; or whatever your background colour is if
      > you have a solid backgound rather than an image.
      >[color=green]
      >>Visit http://callandermats.adconn.com/[/color]
      >
      > Lots of syntax errors to fix:
      > http://validator.w3.org/check?uri=ht...ts.adconn.com/
      > http://jigsaw.w3.org/css-validator/v...1&profile=css2
      >
      > Anyway, I see no shifting text in either IE6 or Opera 7.54. In Opera
      > only the left and right borders show up, not the top and bottom ones,
      > and the links are all different widths (probably because Opera is
      > correctly ignoring your bogus width, see below).
      >[color=green]
      >>and hover over left links to see what
      >>I mean. The style sheet for this is:
      >>
      >>.menu{
      >> font-size:12px;
      >> text-decoration:none ;
      >>}[/color]
      >
      > Pixels are a very bad idea for font-size. Percentages, or not setting
      > a size at all, are much preferable.
      >[color=green]
      >>.menu:hover {
      >> border-style:groove;
      >> border-width:1;[/color]
      >
      > 1 what?
      >[color=green]
      >> width=100%;
      >>}[/color]
      >
      > Invalid syntax and width doesn't apply to inline elements so pointless
      >
      > Steve
      >[/color]


      Comment

      • Darin McGrew

        #4
        Re: Adding borders...

        Re: http://validator.w3.org/check?uri=ht...ts.adconn.com/
        Jon Glazer <jglazer.delete .me@adconn.com> wrote:[color=blue]
        > Wow the syntax errors are funny. The site is totally valid and I cannot
        > find one truthfull error in that validator tool.[/color]

        Huh?

        You mean that http://callandermats.adconn.com/ isn't missing a bunch of
        required attributes (TYPE for STYLE and SCRIPT elements, ALT for IMG
        elements)?

        That it doesn't use attributes that are not defined in the DTD that it
        claims to use (HEIGHT in TABLE and TR elements, BACKGROUND in TD elements)?

        That there aren't extraneous <html> and <head> tags in the middle of the
        document?

        That there aren't missing quotes around attribute values that require
        quotes, causing a cascade of problems when the SGML parser tries to parse
        the attribute values as markup?
        --
        Darin McGrew, darin@TheRallye Club.org, http://www.TheRallyeClub.org/
        A gimmick car rallye is not a race, but a fun puzzle testing your
        ability to follow instructions. Upcoming gimmick car rallye in
        Silicon Valley: TRC's 24th Anniversary (Saturday, February 5)

        Comment

        • Steve Pugh

          #5
          Re: Adding borders...

          "Jon Glazer" <jglazer.delete .me@adconn.com> wrote:

          Upside down posting fixed.
          [color=blue]
          >"Steve Pugh" <steve@pugh.net > wrote :[color=green]
          >> "Jon Glazer" <jglazer.delete .me@adconn.com> wrote:
          >>[color=darkred]
          >>>I have an anchor using a class that defines a hover subclass. The issue
          >>>is that the anchor itself doesn't have any border and when hovered it adds a
          >>>border, the problem is that when it adds the border, the text gets
          >>>shifted.
          >>>Does anyone have any idea how to correct this issue? I would like to
          >>>create a transparrent or invisible border (spacer) so that there's room for the
          >>>visible border to appear when needed but I cannot seem to get it to work.[/color]
          >>
          >> border-color: transparent; or whatever your background colour is if
          >> you have a solid backgound rather than an image.
          >>[color=darkred]
          >>>Visit http://callandermats.adconn.com/[/color]
          >>
          >> Lots of syntax errors to fix:
          >> http://validator.w3.org/check?uri=ht...ts.adconn.com/
          >> http://jigsaw.w3.org/css-validator/v...1&profile=css2
          >>
          >>[/color]
          >Wow the syntax errors are funny.[/color]

          Yeah, there's a certain gallows humour in examining a really badlt
          coded web site.
          [color=blue]
          >The site is totally valid[/color]

          It obviously isn't. If it was valid the validator wouldn't have failed
          it.
          [color=blue]
          > and I cannot find one truthfull error in that validator tool.[/color]

          Why not? They're all errors and they're all accurately reported.
          [color=blue]
          >Oh well. It works.[/color]

          How many browsers did you test it in? 1? 2? 3? 10? 100?

          I've already given you examples of how your poor coding means that the
          page doesn't display as you want in Opera and I now see that Firefox
          agrees with Opera.

          Did you test with images turned off? (obviously not, unless you think
          that black text on a black background counts as working) With
          stylesheets turned off? With a user stylesheet? With a larger than
          normal font size? With a smaller than normal font size? On a speech
          browser? With JavaScript turned off? On a Mac? On Unix? Have you tried
          printing the page?
          [color=blue]
          >As for the problem I had, I resolved it by creating a border the same color
          >as the background.[/color]

          Before or after I suggested doing just that? Just curious as to
          whether I totally wasted my time.

          Steve

          Comment

          • Jon Glazer

            #6
            Re: Adding borders...

            Right. None of those issues are outstanding problems given that they do not
            cause errors on any browser (and I tested 8 different ones).

            Alt tags are definitely not a requirement.



            "Darin McGrew" <mcgrew@stanfor dalumni.org> wrote in message
            news:cs4253$81q $1@blue.rahul.n et...[color=blue]
            > Re: http://validator.w3.org/check?uri=ht...ts.adconn.com/
            > Jon Glazer <jglazer.delete .me@adconn.com> wrote:[color=green]
            >> Wow the syntax errors are funny. The site is totally valid and I cannot
            >> find one truthfull error in that validator tool.[/color]
            >
            > Huh?
            >
            > You mean that http://callandermats.adconn.com/ isn't missing a bunch of
            > required attributes (TYPE for STYLE and SCRIPT elements, ALT for IMG
            > elements)?
            >
            > That it doesn't use attributes that are not defined in the DTD that it
            > claims to use (HEIGHT in TABLE and TR elements, BACKGROUND in TD
            > elements)?
            >
            > That there aren't extraneous <html> and <head> tags in the middle of the
            > document?
            >
            > That there aren't missing quotes around attribute values that require
            > quotes, causing a cascade of problems when the SGML parser tries to parse
            > the attribute values as markup?
            > --
            > Darin McGrew, darin@TheRallye Club.org, http://www.TheRallyeClub.org/
            > A gimmick car rallye is not a race, but a fun puzzle testing your
            > ability to follow instructions. Upcoming gimmick car rallye in
            > Silicon Valley: TRC's 24th Anniversary (Saturday, February 5)[/color]


            Comment

            • Jon Glazer

              #7
              Re: Adding borders...


              "Steve Pugh" <steve@pugh.net > wrote in message
              news:ln2bu0db8m andjgduvgro7ksj 4tfq9miei@4ax.c om...[color=blue]
              > "Jon Glazer" <jglazer.delete .me@adconn.com> wrote:
              >
              > Upside down posting fixed.
              >[color=green]
              >>"Steve Pugh" <steve@pugh.net > wrote :[color=darkred]
              >>> "Jon Glazer" <jglazer.delete .me@adconn.com> wrote:
              >>>
              >>>>I have an anchor using a class that defines a hover subclass. The issue
              >>>>is that the anchor itself doesn't have any border and when hovered it
              >>>>adds a
              >>>>border, the problem is that when it adds the border, the text gets
              >>>>shifted.
              >>>>Does anyone have any idea how to correct this issue? I would like to
              >>>>create a transparrent or invisible border (spacer) so that there's room
              >>>>for the
              >>>>visible border to appear when needed but I cannot seem to get it to
              >>>>work.
              >>>
              >>> border-color: transparent; or whatever your background colour is if
              >>> you have a solid backgound rather than an image.
              >>>
              >>>>Visit http://callandermats.adconn.com/
              >>>
              >>> Lots of syntax errors to fix:
              >>> http://validator.w3.org/check?uri=ht...ts.adconn.com/
              >>> http://jigsaw.w3.org/css-validator/v...1&profile=css2
              >>>
              >>>[/color]
              >>Wow the syntax errors are funny.[/color]
              >
              > Yeah, there's a certain gallows humour in examining a really badlt
              > coded web site.
              >[color=green]
              >>The site is totally valid[/color]
              >
              > It obviously isn't. If it was valid the validator wouldn't have failed
              > it.
              >[color=green]
              >> and I cannot find one truthfull error in that validator tool.[/color]
              >
              > Why not? They're all errors and they're all accurately reported.
              >[color=green]
              >>Oh well. It works.[/color]
              >
              > How many browsers did you test it in? 1? 2? 3? 10? 100?
              >
              > I've already given you examples of how your poor coding means that the
              > page doesn't display as you want in Opera and I now see that Firefox
              > agrees with Opera.
              >
              > Did you test with images turned off? (obviously not, unless you think
              > that black text on a black background counts as working) With
              > stylesheets turned off? With a user stylesheet? With a larger than
              > normal font size? With a smaller than normal font size? On a speech
              > browser? With JavaScript turned off? On a Mac? On Unix? Have you tried
              > printing the page?
              >[color=green]
              >>As for the problem I had, I resolved it by creating a border the same
              >>color
              >>as the background.[/color]
              >
              > Before or after I suggested doing just that? Just curious as to
              > whether I totally wasted my time.
              >
              > Steve[/color]

              OOps sorry steve, forgot to mention that, as I was posting the problem a
              possible solution occured to me. You just responded too fast for me to say
              I got it fixed. Thanks for the help though!
              [color=blue]
              >[/color]


              Comment

              • Jon Glazer

                #8
                Re: Adding borders...

                Oh, and one other simple example, there are not extranious <HEAD> tags in
                the document. What it is evidently picking up is some javascript that
                controls a separate window. One reason I don't trust these things.

                Jon


                "Darin McGrew" <mcgrew@stanfor dalumni.org> wrote in message
                news:cs4253$81q $1@blue.rahul.n et...[color=blue]
                > Re: http://validator.w3.org/check?uri=ht...ts.adconn.com/
                > Jon Glazer <jglazer.delete .me@adconn.com> wrote:[color=green]
                >> Wow the syntax errors are funny. The site is totally valid and I cannot
                >> find one truthfull error in that validator tool.[/color]
                >
                > Huh?
                >
                > You mean that http://callandermats.adconn.com/ isn't missing a bunch of
                > required attributes (TYPE for STYLE and SCRIPT elements, ALT for IMG
                > elements)?
                >
                > That it doesn't use attributes that are not defined in the DTD that it
                > claims to use (HEIGHT in TABLE and TR elements, BACKGROUND in TD
                > elements)?
                >
                > That there aren't extraneous <html> and <head> tags in the middle of the
                > document?
                >
                > That there aren't missing quotes around attribute values that require
                > quotes, causing a cascade of problems when the SGML parser tries to parse
                > the attribute values as markup?
                > --
                > Darin McGrew, darin@TheRallye Club.org, http://www.TheRallyeClub.org/
                > A gimmick car rallye is not a race, but a fun puzzle testing your
                > ability to follow instructions. Upcoming gimmick car rallye in
                > Silicon Valley: TRC's 24th Anniversary (Saturday, February 5)[/color]


                Comment

                • Steve Pugh

                  #9
                  Re: Adding borders...

                  "Jon Glazer" <jglazer.delete .me@adconn.com> wrote:
                  [color=blue]
                  >Alt tags are definitely not a requirement.[/color]

                  Of course they're not, but only because they don't exist.
                  alt attributes on the other hand are mandatory.

                  Or is this a private page that no one on the actual WWW wil ever look
                  at?

                  Steve

                  Comment

                  • Steve Pugh

                    #10
                    Re: Adding borders...

                    "Jon Glazer" <jglazer.delete .me@adconn.com> wrote:
                    [color=blue]
                    >Oh, and one other simple example, there are not extranious <HEAD> tags in
                    >the document. What it is evidently picking up is some javascript that
                    >controls a separate window. One reason I don't trust these things.[/color]

                    Liar.
                    The page http://callandermats.adconn.com/
                    has

                    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
                    <!--EzCat Styles-->
                    <style>
                    .... bunch of CSS
                    </style>
                    <script src="homefade.j s"></script>
                    <html>
                    <head>

                    So it does have the <html> and <head> in the middle of the page.

                    How hard would it be to move them to where they belong?

                    Steve

                    Comment

                    • Jon Glazer

                      #11
                      Re: Adding borders...

                      Pretty difficult.

                      "Steve Pugh" <steve@pugh.net > wrote in message
                      news:1qbdu0ldto 0pmtgne0sjuliuv 16rrsso22@4ax.c om...[color=blue]
                      > "Jon Glazer" <jglazer.delete .me@adconn.com> wrote:
                      >[color=green]
                      >>Oh, and one other simple example, there are not extranious <HEAD> tags in
                      >>the document. What it is evidently picking up is some javascript that
                      >>controls a separate window. One reason I don't trust these things.[/color]
                      >
                      > Liar.
                      > The page http://callandermats.adconn.com/
                      > has
                      >
                      > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
                      > <!--EzCat Styles-->
                      > <style>
                      > ... bunch of CSS
                      > </style>
                      > <script src="homefade.j s"></script>
                      > <html>
                      > <head>
                      >
                      > So it does have the <html> and <head> in the middle of the page.
                      >
                      > How hard would it be to move them to where they belong?
                      >
                      > Steve
                      >[/color]


                      Comment

                      • Jon Glazer

                        #12
                        Re: Adding borders...

                        Simple question...does it look ok? I thought so.



                        "Steve Pugh" <steve@pugh.net > wrote in message
                        news:ehbdu0lt6i h7gd97c1kl0ispn 0u73lo6dn@4ax.c om...[color=blue]
                        > "Jon Glazer" <jglazer.delete .me@adconn.com> wrote:
                        >[color=green]
                        >>Alt tags are definitely not a requirement.[/color]
                        >
                        > Of course they're not, but only because they don't exist.
                        > alt attributes on the other hand are mandatory.
                        >
                        > Or is this a private page that no one on the actual WWW wil ever look
                        > at?
                        >
                        > Steve
                        >[/color]


                        Comment

                        • Jan Roland Eriksson

                          #13
                          Re: Adding borders...

                          On Thu, 13 Jan 2005 17:09:10 GMT, "Jon Glazer"
                          <jglazer.delete .me@adconn.com> wrote:
                          [color=blue]
                          >Right. None of those issues are outstanding problems given that they do not
                          >cause errors on any browser (and I tested 8 different ones).[/color]

                          You are just a bit ignorant, thats all.
                          [color=blue]
                          >Alt tags are definitely not a requirement.[/color]

                          You are absolutely right there since there is nothing in (X)HTML that is
                          called an 'Alt tag'.

                          --
                          Rex


                          Comment

                          • Jon Glazer

                            #14
                            Re: Adding borders...

                            Ignorant?

                            Highly doubtfull.

                            You need not put ALT="bla bla bla" (commonly referred as "alt tags") in
                            images (or img) tags.



                            "Jan Roland Eriksson" <jrexon@newsguy .com> wrote in message
                            news:sccdu0h0q9 t78kdpdc1arrhls vf9vp56l6@4ax.c om...[color=blue]
                            > On Thu, 13 Jan 2005 17:09:10 GMT, "Jon Glazer"
                            > <jglazer.delete .me@adconn.com> wrote:
                            >[color=green]
                            >>Right. None of those issues are outstanding problems given that they do
                            >>not
                            >>cause errors on any browser (and I tested 8 different ones).[/color]
                            >
                            > You are just a bit ignorant, thats all.
                            >[color=green]
                            >>Alt tags are definitely not a requirement.[/color]
                            >
                            > You are absolutely right there since there is nothing in (X)HTML that is
                            > called an 'Alt tag'.
                            >
                            > --
                            > Rex
                            >
                            >[/color]


                            Comment

                            • Steve Pugh

                              #15
                              Re: Adding borders...

                              "Jon Glazer" <jglazer.delete .me@adconn.com> wrote:
                              [color=blue]
                              >"Steve Pugh" <steve@pugh.net > wrote in message
                              >news:ehbdu0lt6 ih7gd97c1kl0isp n0u73lo6dn@4ax. com...[color=green]
                              >> "Jon Glazer" <jglazer.delete .me@adconn.com> wrote:
                              >>[color=darkred]
                              >>>Alt tags are definitely not a requirement.[/color]
                              >>
                              >> Of course they're not, but only because they don't exist.
                              >> alt attributes on the other hand are mandatory.
                              >>
                              >> Or is this a private page that no one on the actual WWW wil ever look
                              >> at?[/color]
                              >
                              >Simple question...does it look ok?[/color]


                              [color=blue]
                              > I thought so.[/color]

                              Yep.

                              Steve

                              Comment

                              Working...