[css-d] fix border on some list items?

2010-03-25 Thread Rory Bernstein 
Hello,

http://dev.bossyfrog.com/

I have a blue, horizontal nav bar on my site, the URL is above. You will see 
that there are white borders that separate the items on the nav bar. They are 
coded as an unordered list. The rule for the border is included in this style 
info below:

.nav li {
border-right:1px solid #FF;
color:#FF;
display:inline;
font-family:Verdana,Geneva,sans-serif;
font-size:1em;
margin:0;
padding:0 10px;
}

I want the borders to be centered vertically, in line with the text-images. How 
can I move those borders up so that they line up correctly?

Thanks!
Rory

--

Rory Bernstein : Web Developer
r...@rorybernstein.com
http://www.rorybernstein.com

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] fix border on some list items?

2010-03-25 Thread Bill Braun 

Rory Bernstein wrote:
 Hello,

 http://dev.bossyfrog.com/

 I have a blue, horizontal nav bar on my site, the URL is above. You will see 
 that there are white borders that separate the items on the nav bar. They are 
 coded as an unordered list. The rule for the border is included in this style 
 info below:

 .nav li {
 border-right:1px solid #FF;
 color:#FF;
 display:inline;
 font-family:Verdana,Geneva,sans-serif;
 font-size:1em;
 margin:0;
 padding:0 10px;
 }

 I want the borders to be centered vertically, in line with the text-images. 
 How can I move those borders up so that they line up correctly?
   

Try using the pipe character | rather than styling the border to 
separate menu items, see if that makes a difference. You have two 
validation errors related to onMouseOver and onMouseOut. Correct those, 
see if they are contributing factors.

Bill B


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] fix border on some list items?

2010-03-25 Thread Bill Braun 
Rory Bernstein wrote:
 hi Bill,

 Yes, I saw those validation errors for the mouseovers. I don't know 
 how to correct those... any suggestions?

 I like your suggestion about using the pipe character instead of 
 border. I will play with that. Thanks!


This might help.

http://www.webdevelopersnotes.com/tutorials/javascript/changing_images_on_mouseover_mouseout_javascript.php3

Bill B


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] fix border on some list items?

2010-03-25 Thread Rory Bernstein 
hi Bill,

Yes, I saw those validation errors for the mouseovers. I don't know how to 
correct those... any suggestions?

I like your suggestion about using the pipe character instead of border. I will 
play with that. Thanks!

Rory

--

Rory Bernstein : Web Developer
r...@rorybernstein.com
http://www.rorybernstein.com


On Mar 25, 2010, at 10:23 AM, Bill Braun wrote:

 
 Rory Bernstein wrote:
 Hello,
 
 http://dev.bossyfrog.com/
 
 I have a blue, horizontal nav bar on my site, the URL is above. You will see 
 that there are white borders that separate the items on the nav bar. They 
 are coded as an unordered list. The rule for the border is included in this 
 style info below:
 
 .nav li {
 border-right:1px solid #FF;
 color:#FF;
 display:inline;
 font-family:Verdana,Geneva,sans-serif;
 font-size:1em;
 margin:0;
 padding:0 10px;
 }
 
 I want the borders to be centered vertically, in line with the text-images. 
 How can I move those borders up so that they line up correctly?
 
 
 Try using the pipe character | rather than styling the border to 
 separate menu items, see if that makes a difference. You have two 
 validation errors related to onMouseOver and onMouseOut. Correct those, 
 see if they are contributing factors.
 
 Bill B
 
 
 __
 css-discuss [cs...@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
 

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] fix border on some list items?

2010-03-25 Thread Krupa Anna Katalin 
Hi,

give border for a, not for li
a {
display: block;
border-right: 1px solid #fff;
}
because of display: block for a, a will get width: 100% automatically;
and you can give height for a or padding, to style that, if you need.

and li don't need display: inline,
because display default value for li is inline.

Kata


Rory Bernstein wrote:
 Hello,

 http://dev.bossyfrog.com/

 I have a blue, horizontal nav bar on my site, the URL is above. You will see 
 that there are white borders that separate the items on the nav bar. They are 
 coded as an unordered list. The rule for the border is included in this style 
 info below:

 .nav li {
 border-right:1px solid #FF;
 color:#FF;
 display:inline;
 font-family:Verdana,Geneva,sans-serif;
 font-size:1em;
 margin:0;
 padding:0 10px;
 }

 I want the borders to be centered vertically, in line with the text-images. 
 How can I move those borders up so that they line up correctly?

 Thanks!
 Rory

 --

 Rory Bernstein : Web Developer
 r...@rorybernstein.com
 http://www.rorybernstein.com

 __
 css-discuss [cs...@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
   

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] fix border on some list items?

2010-03-25 Thread Rory Bernstein 
Thanks so much, Kata. I will try this!

I am getting 2 of each emails from the list. Is this happening to others as 
well?

Rory

--

Rory Bernstein : Web Developer
r...@rorybernstein.com
http://www.rorybernstein.com




On Mar 25, 2010, at 10:36 AM, Krupa Anna Katalin wrote:

 Hi,
 
 give border for a, not for li
 a {
display: block;
border-right: 1px solid #fff;
 }
 because of display: block for a, a will get width: 100% automatically;
 and you can give height for a or padding, to style that, if you need.
 
 and li don't need display: inline,
 because display default value for li is inline.
 
 Kata
 
 
 Rory Bernstein wrote:
 Hello,
 
 http://dev.bossyfrog.com/
 
 I have a blue, horizontal nav bar on my site, the URL is above. You will see 
 that there are white borders that separate the items on the nav bar. They 
 are coded as an unordered list. The rule for the border is included in this 
 style info below:
 
 .nav li {
 border-right:1px solid #FF;
 color:#FF;
 display:inline;
 font-family:Verdana,Geneva,sans-serif;
 font-size:1em;
 margin:0;
 padding:0 10px;
 }
 
 I want the borders to be centered vertically, in line with the text-images. 
 How can I move those borders up so that they line up correctly?
 
 Thanks!
 Rory
 

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] fix border on some list items?

2010-03-25 Thread Climis, Tim 
 and li don't need display: inline,
 because display default value for li is inline.

No it isn't!  The default display for li is list-item.  Which is closer to 
block than it is to inline.  If it were inline, your lists would look like: 

1. Thing one 2. Thing two 3. Thing three

Instead of:
1. thing one
2. thing two
3. thing three.

---Tim

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] fix border on some list items?

2010-03-25 Thread Krupa Anna Katalin 
Yes, this is true,
sorry :)

Kata


Climis, Tim wrote:
 and li don't need display: inline,
 because display default value for li is inline.
 

 No it isn't!  The default display for li is list-item.  Which is closer to 
 block than it is to inline.  If it were inline, your lists would look like: 

 1. Thing one 2. Thing two 3. Thing three

 Instead of:
 1. thing one
 2. thing two
 3. thing three.

 ---Tim

   

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] fix border on some list items?

2010-03-25 Thread Troy Harshman 
 and li don't need display: inline,
because display default value for li is inline. 

His code is correct because he is turning a list into a horizontal
navigation. Without setting display:inline or using floats, the items
will list vertically.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] fix border on some list items?

2010-03-25 Thread Bill Braun 


Rory Bernstein wrote:
 Thanks so much, Kata. I will try this!

 I am getting 2 of each emails from the list. Is this happening to others as 
 well?

 Rory
   

If people Reply-All the list and the OP receive a response.

Bill B


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] fix border on some list items?

2010-03-25 Thread David Hucklesby 
On 3/25/10 6:42 AM, Rory Bernstein wrote:
 Hello,

 http://dev.bossyfrog.com/

 I have a blue, horizontal nav bar on my site, the URL is above. You
 will see that there are white borders that separate the items on the
 nav bar. They are coded as an unordered list. The rule for the border
 is included in this style info below:


I suggest you use floats for the LI and A elements so that the LI is the 
same height as the enclosed IMG (which may be better as 
'display:block;'. At the moment, the LI is specified as inline. Images 
are normally inline elements that sit on the text baseline, so the 
images are protruding above the LI, which currently only extends to the 
height of the text. ('line-height'.) That's why the borders are so small.

Making the images block-level, and enclosing them with floated a and 
li elements should give you what you want.

You'll need to add 'list-style-type: none;' to the UL as well - not 
needed with your current design as the 'inline li does the job of 
suppressing list markers.

Nice design. (But for me I'd like to be able to stop the animation...)

Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/