Re: [css-d] fix border on some list items?
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?
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?
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?
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?
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?
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?
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?
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?
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?
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/