Connecting Tech Pros Worldwide Help | Site Map

Overlapping borders around kbd

 
LinkBack Thread Tools Search this Thread
  #1  
Old July 14th, 2008, 09:05 AM
Hendrik Maryns
Guest
 
Posts: n/a
Default Overlapping borders around kbd

Hi,

At this website:
http://tcl.sfs.uni-tuebingen.de/~hendrik/keyboard.shtml, just below the
section ‘Sample .xmodmap file’, you see some keys which are modeled with
<kbd>. The border looks nice in isolation, but as you can see, it
overlaps if they are just below each other. Is there a way to tell the
enclosing element to leave a little more space, such that the borders do
not overlap?

Thanks, H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
http://aouw.org
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html

  #2  
Old July 14th, 2008, 10:05 AM
dorayme
Guest
 
Posts: n/a
Default Re: Overlapping borders around kbd

In article <g5f37b$dhc$1@newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02@sneakemail.comwrote:
Quote:
Hi,
>
At this website:
http://tcl.sfs.uni-tuebingen.de/~hendrik/keyboard.shtml, just below the
section ‘Sample .xmodmap file’, you see some keys which are modeled with
<kbd>. The border looks nice in isolation, but as you can see, it
overlaps if they are just below each other. Is there a way to tell the
enclosing element to leave a little more space, such that the borders do
not overlap?
>
Thanks, H.
One thig that would solve your problem is to class the list items and
apply a bottom margin of, say, .4em. Here is a nexample without a class
and an inline style:

<li style="margin-bottom: .4em;">Ellipsis comes at
<kbd>AltGr+Shift+/</kbd>, easily reachable.

This will sort the clash of the bordered boxes.

Perhaps you know, you can simplify the css in an external or 'in the
document head' sheet by simply classing the ul and then

<ul class="kbd">

ul.kbd li {margin-bottom: .4em;}

saving having to class each list item.

--
dorayme
  #3  
Old July 14th, 2008, 10:55 AM
Hendrik Maryns
Guest
 
Posts: n/a
Default Re: Overlapping borders around kbd

dorayme schreef:
Quote:
In article <g5f37b$dhc$1@newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02@sneakemail.comwrote:
>
Quote:
>Hi,
>>
>At this website:
>http://tcl.sfs.uni-tuebingen.de/~hendrik/keyboard.shtml, just below the
>section ‘Sample .xmodmap file’, you see some keys which are modeled with
><kbd>. The border looks nice in isolation, but as you can see, it
>overlaps if they are just below each other. Is there a way to tell the
>enclosing element to leave a little more space, such that the borders do
>not overlap?
>>
>Thanks, H.
>
One thig that would solve your problem is to class the list items and
apply a bottom margin of, say, .4em. Here is a nexample without a class
and an inline style:
>
<li style="margin-bottom: .4em;">Ellipsis comes at
<kbd>AltGr+Shift+/</kbd>, easily reachable.
>
This will sort the clash of the bordered boxes.
>
Perhaps you know, you can simplify the css in an external or 'in the
document head' sheet by simply classing the ul and then
>
<ul class="kbd">
>
ul.kbd li {margin-bottom: .4em;}
>
saving having to class each list item.
Thanks, but this solution would require me to add this to all containing
elements of kbd’s. Isn’t there something I can add to

kbd {
padding: 0px 1px 0px 1px;
border-width: 1px 2px 2px 1px;
border-style: solid;
}

such that this does not occur?

H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
http://aouw.org
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html
  #4  
Old July 14th, 2008, 02:45 PM
David Stone
Guest
 
Posts: n/a
Default Re: Overlapping borders around kbd

In article <g5f9j3$mc8$1@newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02@sneakemail.comwrote:
Quote:
dorayme schreef:
[snip]
Quote:
Quote:

Perhaps you know, you can simplify the css in an external or 'in the
document head' sheet by simply classing the ul and then

<ul class="kbd">

ul.kbd li {margin-bottom: .4em;}

saving having to class each list item.
>
Thanks, but this solution would require me to add this to all containing
elements of kbd’s. Isn’t there something I can add to
>
kbd {
padding: 0px 1px 0px 1px;
border-width: 1px 2px 2px 1px;
border-style: solid;
}
>
such that this does not occur?
Did you try margin-bottom?
  #5  
Old July 14th, 2008, 04:25 PM
Hendrik Maryns
Guest
 
Posts: n/a
Default Re: Overlapping borders around kbd

David Stone schreef:
Quote:
In article <g5f9j3$mc8$1@newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02@sneakemail.comwrote:
>
Quote:
>dorayme schreef:
[snip]
Quote:
Quote:
>>Perhaps you know, you can simplify the css in an external or 'in the
>>document head' sheet by simply classing the ul and then
>>>
>><ul class="kbd">
>>>
>>ul.kbd li {margin-bottom: .4em;}
>>>
>>saving having to class each list item.
>Thanks, but this solution would require me to add this to all containing
>elements of kbd’s. Isn’t there something I can add to
>>
>kbd {
> padding: 0px 1px 0px 1px;
> border-width: 1px 2px 2px 1px;
> border-style: solid;
>}
>>
>such that this does not occur?
>
Did you try margin-bottom?
Yes. It does nothing.

I can change the li around the kbd, but then all other li’s get the
margin as well, which is not as desired.

H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
http://aouw.org
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html
  #6  
Old July 14th, 2008, 11:25 PM
dorayme
Guest
 
Posts: n/a
Default Re: Overlapping borders around kbd

In article <g5f9j3$mc8$1@newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02@sneakemail.comwrote:
Quote:
dorayme schreef:
Quote:
In article <g5f37b$dhc$1@newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02@sneakemail.comwrote:
Quote:
Hi,
>
At this website:
http://tcl.sfs.uni-tuebingen.de/~hendrik/keyboard.shtml, just below the
section ‘Sample .xmodmap file’, you see some keys which are modeled with
<kbd>. The border looks nice in isolation, but as you can see, it
overlaps if they are just below each other. Is there a way to tell the
enclosing element to leave a little more space, such that the borders do
not overlap?
Quote:
Quote:

One thig that would solve your problem is to class the list items and
apply a bottom margin of, say, .4em. Here is an example with
an inline style:

<li style="margin-bottom: .4em;">Ellipsis comes at
<kbd>AltGr+Shift+/</kbd>, easily reachable.

Perhaps you know, you can simplify the css in an external or 'in the
document head' sheet by simply classing the ul and then

<ul class="kbd">

ul.kbd li {margin-bottom: .4em;}

saving having to class each list item.
>
Thanks, but this solution would require me to add this to all containing
elements of kbd’s. Isn’t there something I can add to
>
kbd {
padding: 0px 1px 0px 1px;
border-width: 1px 2px 2px 1px;
border-style: solid;
}
>
such that this does not occur?
>
Suppose there was something that would pick out all and only those list
items and sentences in paragraphs that contained those kbd boxes. What
would it do to them? It would space them more generously top or bottom
or both. Now, in my opinion, that would look so odd if only those were
spaced.

You mention later in thread that you would not be happy to have all the
list items margined the same to cope with the ones that did have the kbd
boxes. So maybe you will not agree with my intuitions. Here is another
general solution which you may not be be keen on but the only one I can
think of for now that does not have bad side effects:

Consider a bigger line-height for all the elements that contain those
boxes.

ul, p {line-height: 1.4;}

And do this for all paragraphs to give a consistent look.

--
dorayme
 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

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 Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 220,989 network members.