CSS Menu

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

    CSS Menu



    Can anyone help me out with this menu.

    I would like the 'white' active tab to look like it is attached (no thin
    blue line) to the content. I cannot work out how to do it.

    Many thanks,

    EA


  • Els

    #2
    Re: CSS Menu

    EA wrote:

    >
    Can anyone help me out with this menu.
    >
    I would like the 'white' active tab to look like it is attached (no thin
    blue line) to the content. I cannot work out how to do it.
    #TopNav ul {
    position:relati ve;
    top:3px;
    }
    Only tested in FF.

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/

    Comment

    • Martin Eyles

      #3
      Re: CSS Menu

      "EA" <NOSPAM@twelve. me.ukwrote in message
      news:45657969$0 $8758$ed2619ec@ ptn-nntp-reader02.plus.n et...

      >
      Can anyone help me out with this menu.
      >
      I would like the 'white' active tab to look like it is attached (no thin
      blue line) to the content. I cannot work out how to do it.
      >
      Many thanks,
      >
      EA
      Try adding

      #TopNav #selected {
      padding-bottom: 1px;
      margin-bottom: -1px;
      }

      to your CSS.


      Comment

      • EA

        #4
        Re: CSS Menu

        I am assuming you mean that I should add the two lines below.

        I have done with and with IE 6.0 it makes no difference:



        As Far as I can determine using negative numbers have no effect. I have
        tried margin-bottom: -1px as above and also -6px in testing and nothing!

        Anyone else got ant ideas?

        EA



        "Martin Eyles" <martin.eyles@N OSPAMbytronic.c omwrote in message
        news:12mav4vc5j itmf8@corp.supe rnews.com...
        "EA" <NOSPAM@twelve. me.ukwrote in message
        news:45657969$0 $8758$ed2619ec@ ptn-nntp-reader02.plus.n et...
        >http://www.doublesix.plus.com/Examples/Test.htm
        >>
        >Can anyone help me out with this menu.
        >>
        >I would like the 'white' active tab to look like it is attached (no thin
        >blue line) to the content. I cannot work out how to do it.
        >>
        >Many thanks,
        >>
        >EA
        >
        Try adding
        >
        #TopNav #selected {
        padding-bottom: 1px;
        margin-bottom: -1px;
        }
        >
        to your CSS.
        >

        Comment

        • EA

          #5
          Re: CSS Menu

          Thanks for trying, but this does not work.... or at least you have not
          provided me with enough instruction on how to implement it.

          I am using IE 6.0.

          EA



          "Els" <els.aNOSPAM@ti scali.nlwrote in message
          news:1rs264993n 67f$.1ban3y5srt k01$.dlg@40tude .net...
          EA wrote:
          >
          >http://www.doublesix.plus.com/Examples/Test.htm
          >>
          >Can anyone help me out with this menu.
          >>
          >I would like the 'white' active tab to look like it is attached (no thin
          >blue line) to the content. I cannot work out how to do it.
          >
          #TopNav ul {
          position:relati ve;
          top:3px;
          }
          Only tested in FF.
          >
          --
          Els http://locusmeus.com/
          accessible web design: http://locusoptimus.com/

          Comment

          • John Hosking

            #6
            Re: CSS Menu

            Please don't top post; it makes it hard to follow the flow of
            discussion. I have moved your reply down for you this time.

            EA wrote:
            >
            "Martin Eyles" <martin.eyles@N OSPAMbytronic.c omwrote in message
            news:12mav4vc5j itmf8@corp.supe rnews.com...
            >
            >>"EA" <NOSPAM@twelve. me.ukwrote in message
            >>news:45657969 $0$8758$ed2619e c@ptn-nntp-reader02.plus.n et...
            >>
            >>>http://www.doublesix.plus.com/Examples/Test.htm
            >>>
            >>>Can anyone help me out with this menu.
            >>>
            [snipped]
            >>
            >>Try adding
            >>
            >>#TopNav #selected {
            > padding-bottom: 1px;
            > margin-bottom: -1px;
            >>}
            >>
            >>to your CSS.
            >>
            I am assuming you mean that I should add the two lines below.
            >
            I have done with and with IE 6.0 it makes no difference:
            >

            >
            As Far as I can determine using negative numbers have no effect. I have
            tried margin-bottom: -1px as above and also -6px in testing and nothing!
            >
            Anyone else got ant ideas?
            >
            EA
            >
            You started with this:
            #TopNav #selected {
            font-weight: bold;
            background-image: url(SelectedMen uTab-Right.gif);
            border-bottom : 1px solid white;
            }

            and you understood you should *add* this:
            padding-bottom: 1px;
            margin-bottom: -1px;

            and somehow you got this:
            #TopNav #selected {
            background-image: url(SelectedMen uTab-Right.gif);
            padding-bottom: 1px;
            margin-bottom: -6px;
            }

            My idea is that you're not being very careful in what you're doing. I
            also see the problem with newTest.htm in IE6, but that's a page which
            includes neither Els's nor Martin's suggestions. Both their tips helped
            when I tried them separately in FF. Did they help *you* when you viewed
            them in Firefox?

            --
            John

            Comment

            • EA

              #7
              Re: CSS Menu

              You may have been right in that I have 'experimented' myself, trying to use
              the advice given to solve my problem.



              Using the above version I have tested this in IE 6.0 and Firefox. I
              actually have no idea the relevance of whether this words in Firefox because
              I said I was working with IE 6.0. However maybe to people more clever than
              I, testing in Firefox may mean something.

              In Firefox I get something better than IE, but not something I would be
              happy with if this was my target browser. yes I lose the line under the
              'selected' tab, but there are now small gaps (on the bottom line of TopNav
              before the 'Tables' tab and either side of the selected 'History' tab. As
              mentioned above I am not targeting the Firefox browser as I cannot tell my
              users to us this because it is 'better' the IE.

              In IE I do not get the desired effect as the line still appears under the
              selected tab. Can anyone help me?

              EA



              "John Hosking" <John@Hosking.n ame.DROPTHE.inv alidwrote in message
              news:45664bdd_3 @news.bluewin.c h...
              Please don't top post; it makes it hard to follow the flow of discussion.
              I have moved your reply down for you this time.
              >
              EA wrote:
              >>
              >"Martin Eyles" <martin.eyles@N OSPAMbytronic.c omwrote in message
              >news:12mav4vc5 jitmf8@corp.sup ernews.com...
              >>
              >>>"EA" <NOSPAM@twelve. me.ukwrote in message
              >>>news:4565796 9$0$8758$ed2619 ec@ptn-nntp-reader02.plus.n et...
              >>>
              >>>>http://www.doublesix.plus.com/Examples/Test.htm
              >>>>
              >>>>Can anyone help me out with this menu.
              >>>>
              [snipped]
              >>>
              >>>Try adding
              >>>
              >>>#TopNav #selected {
              >> padding-bottom: 1px;
              >> margin-bottom: -1px;
              >>>}
              >>>
              >>>to your CSS.
              >>>
              >I am assuming you mean that I should add the two lines below.
              >>
              >I have done with and with IE 6.0 it makes no difference:
              >>
              >http://www.doublesix.plus.com/Examples/newTest.htm
              >>
              >As Far as I can determine using negative numbers have no effect. I have
              >tried margin-bottom: -1px as above and also -6px in testing and nothing!
              >>
              >Anyone else got ant ideas?
              >>
              >EA
              >>
              You started with this:
              #TopNav #selected {
              font-weight: bold;
              background-image: url(SelectedMen uTab-Right.gif);
              border-bottom : 1px solid white;
              }
              >
              and you understood you should *add* this:
              padding-bottom: 1px;
              margin-bottom: -1px;
              >
              and somehow you got this:
              #TopNav #selected {
              background-image: url(SelectedMen uTab-Right.gif);
              padding-bottom: 1px;
              margin-bottom: -6px;
              }
              >
              My idea is that you're not being very careful in what you're doing. I also
              see the problem with newTest.htm in IE6, but that's a page which includes
              neither Els's nor Martin's suggestions. Both their tips helped when I
              tried them separately in FF. Did they help *you* when you viewed them in
              Firefox?
              >
              --
              John

              Comment

              • John Hosking

                #8
                Re: CSS Menu

                Top posting is one of the things that keeps people from helping you.
                Please look it up or Google it or ask somebody what it means. I have
                fixed this for you again.

                EA wrote:
                >
                "John Hosking" <John@Hosking.n ame.DROPTHE.inv alidwrote in message
                news:45664bdd_3 @news.bluewin.c h...
                >
                >>Please don't top post; it makes it hard to follow the flow of discussion.
                >>I have moved your reply down for you this time.
                I *knew* I had said something about this...
                >[back-and-forth snipped]
                >>
                >>My idea is that you're not being very careful in what you're doing. I also
                >>see the problem with newTest.htm in IE6, but that's a page which includes
                >>neither Els's nor Martin's suggestions. Both their tips helped when I
                >>tried them separately in FF. Did they help *you* when you viewed them in
                >>Firefox?
                >>
                >
                You may have been right in that I have 'experimented' myself, trying to use
                the advice given to solve my problem.
                >

                >
                Using the above version I have tested this in IE 6.0 and Firefox. I
                actually have no idea the relevance of whether this words in Firefox because
                I said I was working with IE 6.0. However maybe to people more clever than
                I, testing in Firefox may mean something.
                Firstly, the presumption is that, since you are authoring for the WWW,
                you can expect visitors using Firefox (and other non-IE browsers) to
                show up. You would want to know what /they/ see, is the presumption.

                Secondly, IE is *known* to be special, so testing in, say, a second
                browser might give you (and us) more info.

                Thirdly, I edited your CSS on your site using the suggestions from Els
                and Martin using Firefox, because Firefox has a Web Developer Toolbar
                addon which lets me do this easily. (IE has a similar addon, too; you
                ought to get it.) Now, when I tried the suggestions *in my Firefox*, it
                worked, so if we see that it works for *you in Firefox*, then we can say
                that we are talking about the same thing. Since I only see the code on
                your site *without* the suggested changes, I can't know what you're
                looking at.
                >
                In Firefox I get something better than IE, but not something I would be
                happy with if this was my target browser.
                There is no "target browser" on the World Wide Web, is there?
                yes I lose the line under the
                'selected' tab, but there are now small gaps (on the bottom line of TopNav
                before the 'Tables' tab
                Here's why: You have an #Outer div containing two other divs, #TopNav
                and #Content. All three are assigned a width of 800px. But div#Outer has
                a border of 3px (making it 806px wide) and the other two divs have 2px
                borders (making then 804px wide). Change the border for #Outer to 2px,
                and your problem goes away.
                and either side of the selected 'History' tab. As
                mentioned above I am not targeting the Firefox browser as I cannot tell my
                users to us this because it is 'better' the IE.
                I cannot fathom this statement. It's true you can't require your users
                to use Firefox; they will tell *you* what they want to use (well
                actually, they will just use it). And "IE is better"
                (paraphrased/translated to English)? Global experience does not agree,
                and besides, that's in conflict with your statement "In Firefox I get
                something better than IE" above. Whatever are you talking about?
                >
                In IE I do not get the desired effect as the line still appears under the
                selected tab. Can anyone help me?
                I'm *trying*.

                --
                John

                Comment

                • EA

                  #9
                  Re: CSS Menu

                  >yes I lose the line under the 'selected' tab, but there are now small
                  >gaps (on the bottom line of TopNav before the 'Tables' tab
                  >
                  Here's why: You have an #Outer div containing two other divs, #TopNav and
                  #Content. All three are assigned a width of 800px. But div#Outer has a
                  border of 3px (making it 806px wide) and the other two divs have 2px
                  borders (making then 804px wide). Change the border for #Outer to 2px, and
                  your problem goes away.
                  If I understand correctly, your paragragh above advises me that if I change
                  the #Outer div border from 3px to 2px the problem disappears. I have done
                  that to:



                  When I view it in Firefox there are still small three gaps along the top of
                  the #context div, the first is before the Tables tab, the second is before
                  the 'selected' History tab, and the third after this tab. Do you see these?
                  Am I trying for perfection which cannot be obtained?
                  >and either side of the selected 'History' tab. As mentioned above I am
                  >not targeting the Firefox browser as I cannot tell my users to us this
                  >because it is 'better' the IE.
                  >
                  I cannot fathom this statement. It's true you can't require your users to
                  use Firefox; they will tell *you* what they want to use (well actually,
                  they will just use it). And "IE is better" (paraphrased/translated to
                  English)? Global experience does not agree, and besides, that's in
                  conflict with your statement "In Firefox I get something better than IE"
                  above. Whatever are you talking about?
                  >>
                  >In IE I do not get the desired effect as the line still appears under the
                  >selected tab. Can anyone help me?
                  >
                  I'm *trying*.
                  Am I to conclude that you are not or cannot assist with this issue in IE.
                  All you assistance is in Firefox, which while from ytour comments assists
                  yoiu, is of little actual use to me because I want my page to work in IE. I
                  am not clever enough to understand all the hacks that appear to be needed to
                  make web pages work in all browsers so I am making the decision that I would
                  like to have mine work in IE, if they work in others too that is a bonus for
                  me.

                  I do apologise for not bottom posting in my last message.

                  All I want is my issue solved in IE - can you assist?


                  Comment

                  Working...