Left border not wanted when list items wrap...

Discussion in 'HTML' started by dorayme, Mar 18, 2006.

  1. dorayme

    dorayme Guest

    Anyone any ideas on how to be rid of left border when a
    horizontal menu list wraps, ie. imagine a line of list links
    wrapping to a second line and the border is not wanted at the
    start of the second line? Notice how the left border is left out
    of the start of the first line (no credit to me on this, I did
    not invent), now I wonder if there is any reasonable technique to
    be rid of "similar" when wrap occurs. I am not interested in
    javascript and I can think of ways of avoiding this "problem" but
    is there a simple actual solution? (If need be, narrow your
    window and/or up your text size)

    See:

    http://dorayme.150m.com/test/waywardKing.html

    (BTW, don't try the chess problem unless you are a reasonably
    strong player...)

    --
    dorayme
    dorayme, Mar 18, 2006
    #1
    1. Advertising

  2. dorayme

    Steven Guest

    On Sat, 18 Mar 2006 13:30:24 +1100, dorayme
    <> wrote:

    >Anyone any ideas on how to be rid of left border when a
    >horizontal menu list wraps, ie. imagine a line of list links
    >wrapping to a second line and the border is not wanted at the
    >start of the second line?
    >
    >http://dorayme.150m.com/test/waywardKing.html


    Could you try right-border on "li li" so it applies to all except the
    last li ?

    --
    Steven
    Steven, Mar 18, 2006
    #2
    1. Advertising

  3. dorayme

    Steven Guest

    On Sat, 18 Mar 2006 14:07:54 +1100, Steven <> wrote:

    >Could you try right-border on "li li" so it applies to all except the
    >last li ?


    Oops, my apologies. It should have been "li + li" but it doesn't work
    as it affects all except the first rather than all except the last.

    --
    Steven
    Steven, Mar 18, 2006
    #3
  4. dorayme wrote:
    > Anyone any ideas on how to be rid of left border when a
    > horizontal menu list wraps, ie. imagine a line of list links
    > wrapping to a second line and the border is not wanted at the
    > start of the second line? Notice how the left border is left out
    > of the start of the first line (no credit to me on this, I did
    > not invent), now I wonder if there is any reasonable technique to
    > be rid of "similar" when wrap occurs. I am not interested in
    > javascript and I can think of ways of avoiding this "problem" but
    > is there a simple actual solution? (If need be, narrow your
    > window and/or up your text size)
    >
    > See:
    >
    > http://dorayme.150m.com/test/waywardKing.html
    >
    > (BTW, don't try the chess problem unless you are a reasonably
    > strong player...)
    >


    Look at ihe problem another way, try adding a border! Put border on both
    left & right on LIs so when it wraps it will not look odd.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 18, 2006
    #4
  5. dorayme wrote:
    <snip>
    >(BTW, don't try the chess problem unless you are a reasonably
    > strong player...)
    >


    C2

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 18, 2006
    #5
  6. dorayme

    Jim Moe Guest

    dorayme wrote:
    > Anyone any ideas on how to be rid of left border when a
    > horizontal menu list wraps, ie. imagine a line of list links
    > wrapping to a second line and the border is not wanted at the
    > start of the second line?
    >

    No. There is no way to know where a line wraps.
    You could have special "first" class for the <li>s. The first adds a
    left border to home.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
    Jim Moe, Mar 18, 2006
    #6
  7. dorayme

    dorayme Guest

    In article <>,
    Steven <> wrote:

    > On Sat, 18 Mar 2006 13:30:24 +1100, dorayme
    > <> wrote:
    >
    > >Anyone any ideas on how to be rid of left border when a
    > >horizontal menu list wraps, ie. imagine a line of list links
    > >wrapping to a second line and the border is not wanted at the
    > >start of the second line?
    > >
    > >http://dorayme.150m.com/test/waywardKing.html

    >
    > Could you try right-border on "li li" so it applies to all except the
    > last li ?


    Yes, Steven, this is part of the way to go. You are right.

    End of week and I was tired, and to tell the truth, I did not
    want to think about the problem of getting rid of the last right
    border - it had not occurred to me there _was_ a "last-child" (to
    match the "first-child" device to be rid of left-border). It
    seemed to me a wispier notion at the time, one can only have one
    first child but last can be changed as one adds kids... but all
    this is scrambled egg thinking!

    I am happy to say that I actually tried this "last-child" as a
    wild guess a little later at a friend's house (without any
    confidence) and it worked! It must be in the css specs, right? It
    is delicious not to look it up.

    But I do have another problem about this strip menu, I am not
    happy. Shall I say here?

    --
    dorayme
    dorayme, Mar 18, 2006
    #7
  8. dorayme

    dorayme Guest

    In article <>,
    Jim Moe <> wrote:

    > dorayme wrote:
    > > Anyone any ideas on how to be rid of left border when a
    > > horizontal menu list wraps, ie. imagine a line of list links
    > > wrapping to a second line and the border is not wanted at the
    > > start of the second line?
    > >

    > No. There is no way to know where a line wraps.
    > You could have special "first" class for the <li>s. The first adds a
    > left border to home.


    A friend of mine started talking about classes to solve the
    problem but I tried right border and last-child exclusion and it
    worked.

    --
    dorayme
    dorayme, Mar 18, 2006
    #8
  9. dorayme

    dorayme Guest

    In article <441b820c$0$3689$>,
    "Jonathan N. Little" <> wrote:

    > dorayme wrote:
    > > Anyone any ideas on how to be rid of left border when a
    > > horizontal menu list wraps, ie. imagine a line of list links
    > > wrapping to a second line and the border is not wanted at the
    > > start of the second line? Notice how the left border is left out
    > > of the start of the first line (no credit to me on this, I did
    > > not invent), now I wonder if there is any reasonable technique to
    > > be rid of "similar" when wrap occurs. I am not interested in
    > > javascript and I can think of ways of avoiding this "problem" but
    > > is there a simple actual solution? (If need be, narrow your
    > > window and/or up your text size)
    > >
    > > See:
    > >
    > > http://dorayme.150m.com/test/waywardKing.html
    > >
    > > (BTW, don't try the chess problem unless you are a reasonably
    > > strong player...)
    > >

    >
    > Look at ihe problem another way, try adding a border! Put border on both
    > left & right on LIs so when it wraps it will not look odd.


    Sounds a bit complicated, then having to get rid of the naturally
    forming double border eh? I will look at this and there's that
    border collapse business I have never looked into...

    It seems ok with this right border and last-child device... at
    least in my FF and other Mac browsers... not tested _all_ of them
    though...

    Does Win IE understand last-child? (God, I do hope there is such
    a thing as "last child" and it is not just working by magic. I am
    too frightened to look up the specs. I don't mean to demean any
    human by such failure, honest, cross my heart...

    Formerly, I would do this type of nav strip with the lowdown
    communistic presentational device of &nbsp;|&nbsp; It worked well
    and had the rather nice advantage of scalling with the font...

    Stop!

    I just realised I could scale the border with an em setting
    rather than a px. Forget all the above... Why not just delete it?
    Because then I would need to find another technique to tease the
    over serious minded :)

    --
    dorayme
    dorayme, Mar 19, 2006
    #9
  10. dorayme

    Steven Guest

    On Sun, 19 Mar 2006 10:32:34 +1100, dorayme
    <> wrote:

    >I am happy to say that I actually tried this "last-child" as a
    >wild guess a little later at a friend's house (without any
    >confidence) and it worked! It must be in the css specs, right? It
    >is delicious not to look it up.


    I didn't know about "last-child" either. But support seems fairly
    limited. I like your idea of using a different class for the last "li"
    as it will work in most browsers.

    >But I do have another problem about this strip menu, I am not
    >happy. Shall I say here?


    Have you seen Carolyn's thread about elements overlapping in a menu
    similar to yours ? Spartanicus offered using "line-height" to fix the
    problem and the result is great. I encountered the 'overlapping'
    problem yesterday so the fix was good for me also.

    --
    Steven
    Steven, Mar 19, 2006
    #10
  11. dorayme wrote:
    > In article <441b820c$0$3689$>,
    > "Jonathan N. Little" <> wrote:
    >
    >
    >>dorayme wrote:
    >>
    >>>Anyone any ideas on how to be rid of left border when a
    >>>horizontal menu list wraps, ie. imagine a line of list links
    >>>wrapping to a second line and the border is not wanted at the
    >>>start of the second line? Notice how the left border is left out
    >>>of the start of the first line (no credit to me on this, I did
    >>>not invent), now I wonder if there is any reasonable technique to
    >>>be rid of "similar" when wrap occurs. I am not interested in
    >>>javascript and I can think of ways of avoiding this "problem" but
    >>>is there a simple actual solution? (If need be, narrow your
    >>>window and/or up your text size)
    >>>
    >>>See:
    >>>
    >>>http://dorayme.150m.com/test/waywardKing.html
    >>>
    >>>(BTW, don't try the chess problem unless you are a reasonably
    >>>strong player...)
    >>>

    >>
    >>Look at ihe problem another way, try adding a border! Put border on both
    >>left & right on LIs so when it wraps it will not look odd.

    >
    >
    > Sounds a bit complicated, then having to get rid of the naturally
    > forming double border eh? I will look at this and there's that
    > border collapse business I have never looked into...
    >
    > It seems ok with this right border and last-child device... at
    > least in my FF and other Mac browsers... not tested _all_ of them
    > though...


    There is no last-child. And IE's support of these selectors is spotty at
    best.

    This is simple and seems to look okay, even in MSIE.

    #navStrip UL {
    line-height: 2;
    margin: .2em;
    padding: 0;
    }

    #navStrip LI {
    display: inline;
    list-style-type: none;
    margin: 0 -.2em;
    padding: .25em .5em;
    border-left: 1px solid #00C;
    border-right: 1px solid #00C;
    }




    > Does Win IE understand last-child? (God, I do hope there is such
    > a thing as "last child" and it is not just working by magic. I am
    > too frightened to look up the specs. I don't mean to demean any
    > human by such failure, honest, cross my heart...
    >
    > Formerly, I would do this type of nav strip with the lowdown
    > communistic presentational device of &nbsp;|&nbsp; It worked well
    > and had the rather nice advantage of scalling with the font...


    Works will scaling text too.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 19, 2006
    #11
  12. dorayme

    dorayme Guest

    In article <441b8d25$0$3681$>,
    "Jonathan N. Little" <> wrote:

    > dorayme wrote:
    > <snip>
    > >(BTW, don't try the chess problem unless you are a reasonably
    > > strong player...)
    > >

    >
    > C2


    You sure? You know that kings can never be next to each other?

    --
    dorayme
    dorayme, Mar 19, 2006
    #12
  13. dorayme

    dorayme Guest

    In article <>,
    Steven <> wrote:

    > On Sun, 19 Mar 2006 10:32:34 +1100, dorayme
    > <> wrote:
    >
    > >I am happy to say that I actually tried this "last-child" as a
    > >wild guess a little later at a friend's house (without any
    > >confidence) and it worked! It must be in the css specs, right? It
    > >is delicious not to look it up.

    >
    > I didn't know about "last-child" either. But support seems fairly
    > limited. I like your idea of using a different class for the last "li"
    > as it will work in most browsers.
    >
    > >But I do have another problem about this strip menu, I am not
    > >happy. Shall I say here?

    >
    > Have you seen Carolyn's thread about elements overlapping in a menu
    > similar to yours ? Spartanicus offered using "line-height" to fix the
    > problem and the result is great. I encountered the 'overlapping'
    > problem yesterday so the fix was good for me also.


    Thanks, Steven, but I was already on to this (or at least some)
    line-height business a while back... There is a slight prob (I
    have) which I mentioned in the other post you refer to...

    --
    dorayme
    dorayme, Mar 19, 2006
    #13
  14. dorayme

    dorayme Guest

    In article <441caa73$0$3691$>,
    "Jonathan N. Little" <> wrote:

    > There is no last-child. And IE's support of these selectors is spotty at
    > best.
    >
    > This is simple and seems to look okay, even in MSIE.
    >
    > #navStrip UL {
    > line-height: 2;
    > margin: .2em;
    > padding: 0;
    > }
    >
    > #navStrip LI {
    > display: inline;
    > list-style-type: none;
    > margin: 0 -.2em;
    > padding: .25em .5em;
    > border-left: 1px solid #00C;
    > border-right: 1px solid #00C;
    > }


    I will look at your suggestion tomorrow, thanks. I better shut up
    till then...

    Perhaps I can just say this (if only because Boji is starting
    cast aspersions on Martian intelligence):

    Was it a total illusion of mine about last-child?
    I used FF (The web developer tools are a new toy for me, live
    changes to css or html tweaking!) When my

    #navStrip li:last-child {
    border: none;
    padding-left: 0;
    }

    was in the css, the last border of the row had no right visible
    margin bar. When I removed it, the bar appeared. I kid you not,
    it seemed to me to be doing what I wanted. So what is going on? A
    FF bug?

    --
    dorayme
    dorayme, Mar 19, 2006
    #14
  15. dorayme wrote:

    > In article <441caa73$0$3691$>,
    > "Jonathan N. Little" <> wrote:

    <snip>
    > Was it a total illusion of mine about last-child?
    > I used FF (The web developer tools are a new toy for me, live
    > changes to css or html tweaking!) When my
    >

    last-child is in CSS3 proposal, but forget IE support! IE does even
    support the first-child. You latest in IE has the leading '|' on the
    first link and all links are slammed against left hand '|'s

    |LINK |LINK |...

    of course looks ok in real browsers ;-)

    > #navStrip li:last-child {
    > border: none;
    > padding-left: 0;
    > }
    >
    > was in the css, the last border of the row had no right visible
    > margin bar. When I removed it, the bar appeared. I kid you not,
    > it seemed to me to be doing what I wanted. So what is going on? A
    > FF bug?
    >



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 19, 2006
    #15
  16. dorayme

    dorayme Guest

    In article <441cd9f2$0$3681$>,
    "Jonathan N. Little" <> wrote:

    > dorayme wrote:
    >
    > > In article <441caa73$0$3691$>,
    > > "Jonathan N. Little" <> wrote:

    > <snip>
    > > Was it a total illusion of mine about last-child?
    > > I used FF (The web developer tools are a new toy for me, live
    > > changes to css or html tweaking!) When my
    > >

    > last-child is in CSS3 proposal, but forget IE support! IE does even
    > support the first-child. You latest in IE has the leading '|' on the
    > first link and all links are slammed against left hand '|'s
    >


    "IE does even...", I assume typo and you mean "does not even"


    > |LINK |LINK |...
    >
    > of course looks ok in real browsers ;-)


    Thanks for this Jonathan. It looks like it may be necessary to be
    turning on my Windows box more regularly...

    >
    > > #navStrip li:last-child {
    > > border: none;
    > > padding-left: 0;
    > > }
    > >
    > > was in the css, the last border of the row had no right visible
    > > margin bar. When I removed it, the bar appeared. I kid you not,
    > > it seemed to me to be doing what I wanted. So what is going on? A
    > > FF bug?
    > >


    I looked at your suggested:

    #navStrip UL {
    line-height: 2;
    margin: .2em;
    padding: 0;
    }

    #navStrip LI {
    display: inline;
    list-style-type: none;
    margin: 0 -.2em;
    padding: .25em .5em;
    border-left: 1px solid #00C;
    border-right: 1px solid #00C;
    }

    However, it makes for separators at the start and at the end? At
    least in FF 1.5 on a Mac.

    It seems such a tricky little thing to achieve across browsers
    and yet such a simple aim! Practically, I do not mind leaving out
    the separators altogether, the links are clear enough, certainly
    underlined they would be...

    It makes me wonder whether the better looking and scaling
    "&nbsp|&nbsp;" technique I used to use might be adapted to be
    more acceptable. It is a presentational item in the html. I am
    only concerned about this in respect to practical effects: like
    unnecessary complication of screen reader output.

    (BTW, I took another look at the missing king thing, it has been
    years, and I had to rework it out! But it is a nice puzzle. It
    was in the Guardian, years ago and a prize was offered. I got it
    ok, but missed out on any goodies... there was a first come first
    served or lottery among the correct entries, I forget!)

    --
    dorayme
    dorayme, Mar 19, 2006
    #16
  17. dorayme wrote:

    > In article <441cd9f2$0$3681$>,
    > "Jonathan N. Little" <> wrote:
    >
    >
    >>dorayme wrote:
    >>
    >>
    >>>In article <441caa73$0$3691$>,
    >>> "Jonathan N. Little" <> wrote:

    >>
    >><snip>
    >>
    >>>Was it a total illusion of mine about last-child?
    >>>I used FF (The web developer tools are a new toy for me, live
    >>>changes to css or html tweaking!) When my
    >>>

    >>
    >>last-child is in CSS3 proposal, but forget IE support! IE does even
    >>support the first-child. You latest in IE has the leading '|' on the
    >>first link and all links are slammed against left hand '|'s
    >>

    >
    >
    > "IE does even...", I assume typo and you mean "does not even"
    >


    Yep, typo is was late last night, and I'm dyslexic with my typing as well!


    >>|LINK |LINK |...
    >>
    >>of course looks ok in real browsers ;-)

    >
    >
    > Thanks for this Jonathan. It looks like it may be necessary to be
    > turning on my Windows box more regularly...


    Afraid so,demographics cannot be denied.

    >>> #navStrip li:last-child {
    >>>border: none;
    >>>padding-left: 0;
    >>>}
    >>>
    >>>was in the css, the last border of the row had no right visible
    >>>margin bar. When I removed it, the bar appeared. I kid you not,
    >>>it seemed to me to be doing what I wanted. So what is going on? A
    >>>FF bug?
    >>>

    >
    >
    > I looked at your suggested:
    >
    > #navStrip UL {
    > line-height: 2;
    > margin: .2em;
    > padding: 0;
    > }
    >
    > #navStrip LI {
    > display: inline;
    > list-style-type: none;
    > margin: 0 -.2em;
    > padding: .25em .5em;
    > border-left: 1px solid #00C;
    > border-right: 1px solid #00C;
    > }
    >
    > However, it makes for separators at the start and at the end? At
    > least in FF 1.5 on a Mac.


    Yes it does, intensionally for 2 reasons. 1) When the links wrap both
    rows the links will be left in right bound with bars

    | link | link | link | link | link |
    | link | link | link | link |

    instead of:

    link | link | link | link | link |
    | link | link | link | link

    Which I thought was the problem you wanted to avoid and 2) with what
    your are currently doing doen't work in IE.

    IE:
    link | link | link | link | link |
    ^^^
    'Real' browsers:
    link | link | link | link | link

    >
    > It seems such a tricky little thing to achieve across browsers
    > and yet such a simple aim! Practically, I do not mind leaving out
    > the separators altogether, the links are clear enough, certainly
    > underlined they would be...
    >
    > It makes me wonder whether the better looking and scaling
    > "&nbsp|&nbsp;" technique I used to use might be adapted to be
    > more acceptable. It is a presentational item in the html. I am
    > only concerned about this in respect to practical effects: like
    > unnecessary complication of screen reader output.


    What I usually do since my navigation is inserted by server-side is the
    links and in a array so PHP

    echo '<div "links"[ ' . implode(' | ', $linkCodeArray) . ']</div>';

    bingo go my link bar...
    >
    > (BTW, I took another look at the missing king thing, it has been
    > years, and I had to rework it out! But it is a nice puzzle. It
    > was in the Guardian, years ago and a prize was offered. I got it
    > ok, but missed out on any goodies... there was a first come first
    > served or lottery among the correct entries, I forget!)
    >


    I did not give the puzzle the attention that it deserved.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 19, 2006
    #17
  18. dorayme

    Neredbojias Guest

    With neither quill nor qualm, Jonathan N. Little quothed:

    > > "IE does even...", I assume typo and you mean "does not even"
    > >

    >
    > Yep, typo is was late last night, and I'm dyslexic with my typing as well!


    Have you tried standing on your head?

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Mar 19, 2006
    #18
  19. Neredbojias wrote:
    > With neither quill nor qualm, Jonathan N. Little quothed:
    >
    >>> "IE does even...", I assume typo and you mean "does not even"
    >>>

    >> Yep, typo is was late last night, and I'm dyslexic with my typing as well!

    >
    > Have you tried standing on your head?
    >

    No but I might type it as "Deah ruoy no gnidnats deirt uoy evah."

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 19, 2006
    #19
  20. dorayme

    Neredbojias Guest

    With neither quill nor qualm, Jonathan N. Little quothed:

    > Neredbojias wrote:
    > > With neither quill nor qualm, Jonathan N. Little quothed:
    > >
    > >>> "IE does even...", I assume typo and you mean "does not even"
    > >>>
    > >> Yep, typo is was late last night, and I'm dyslexic with my typing as well!

    > >
    > > Have you tried standing on your head?
    > >

    > No but I might type it as "Deah ruoy no gnidnats deirt uoy evah."


    Okay, forget that. It's worse than your regular posts... :)

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Mar 20, 2006
    #20
    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. Harvey
    Replies:
    0
    Views:
    693
    Harvey
    Jul 16, 2004
  2. Harvey
    Replies:
    1
    Views:
    837
    Daniel
    Jul 16, 2004
  3. phl
    Replies:
    1
    Views:
    4,345
    Martin Jay
    Jun 8, 2006
  4. Coder
    Replies:
    1
    Views:
    696
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
  5. Aaron Fude

    To wrap or not to wrap?

    Aaron Fude, May 8, 2008, in forum: Java
    Replies:
    12
    Views:
    695
    Chronic Philharmonic
    May 10, 2008
Loading...

Share This Page