Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Left border not wanted when list items wrap...

Reply
Thread Tools

Left border not wanted when list items wrap...

 
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-19-2006
dorayme wrote:
> In article <441b820c$0$3689$(E-Mail Removed)>,
> "Jonathan N. Little" <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      03-19-2006
In article <441b8d25$0$3681$(E-Mail Removed)>,
"Jonathan N. Little" <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      03-19-2006
In article <(E-Mail Removed)>,
Steven <(E-Mail Removed)> wrote:

> On Sun, 19 Mar 2006 10:32:34 +1100, dorayme
> <(E-Mail Removed)> 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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      03-19-2006
In article <441caa73$0$3691$(E-Mail Removed)>,
"Jonathan N. Little" <(E-Mail Removed)> 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
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-19-2006
dorayme wrote:

> In article <441caa73$0$3691$(E-Mail Removed)>,
> "Jonathan N. Little" <(E-Mail Removed)> 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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      03-19-2006
In article <441cd9f2$0$3681$(E-Mail Removed)>,
"Jonathan N. Little" <(E-Mail Removed)> wrote:

> dorayme wrote:
>
> > In article <441caa73$0$3691$(E-Mail Removed)>,
> > "Jonathan N. Little" <(E-Mail Removed)> 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
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-19-2006
dorayme wrote:

> In article <441cd9f2$0$3681$(E-Mail Removed)>,
> "Jonathan N. Little" <(E-Mail Removed)> wrote:
>
>
>>dorayme wrote:
>>
>>
>>>In article <441caa73$0$3691$(E-Mail Removed)>,
>>> "Jonathan N. Little" <(E-Mail Removed)> 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
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      03-19-2006
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.
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-19-2006
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
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      03-20-2006
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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Drop Down List Border Width vs Text Box Border Width Coder ASP .Net 1 06-24-2006 01:27 PM
row bottom border in inner table not matching up with row border in outer table phl HTML 1 06-08-2006 03:43 PM
Datagrid Border showing when I say no border tshad ASP .Net 0 01-31-2005 05:40 PM
HELP WANTED HELP WANTED HELP WANTED Harvey ASP .Net 1 07-16-2004 01:12 PM
HELP WANTED HELP WANTED HELP WANTED Harvey ASP .Net 0 07-16-2004 10:00 AM



Advertisments