Left border not wanted when list items wrap...

D

dorayme

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...)
 
S

Steven

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.
 
J

Jonathan N. Little

dorayme said:
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.
 
J

Jim Moe

dorayme said:
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.
 
D

dorayme

Steven said:
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?
 
D

dorayme

Jim Moe said:
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.
 
D

dorayme

Jonathan N. Little said:
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 :)
 
S

Steven

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.
 
J

Jonathan N. Little

dorayme said:
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.
 
D

dorayme

Steven said:
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.


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...
 
D

dorayme

Jonathan N. Little said:
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?
 
J

Jonathan N. Little

dorayme said:
"Jonathan N. Little" <[email protected]> wrote:
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?
 
D

dorayme

Jonathan N. Little said:
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...

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!)
 
J

Jonathan N. Little

dorayme said:
"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!

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.
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.
 
N

Neredbojias

With neither quill nor qualm, Jonathan N. Little quothed:
Yep, typo is was late last night, and I'm dyslexic with my typing as well!

Have you tried standing on your head?
 
J

Jonathan N. Little

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


Have you tried standing on your head?
No but I might type it as "Deah ruoy no gnidnats deirt uoy evah."
 
N

Neredbojias

With neither quill nor qualm, Jonathan N. Little quothed:
No but I might type it as "Deah ruoy no gnidnats deirt uoy evah."

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top