how to change height of LI

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
eshban
Forum Contributor
Posts: 184
Joined: Mon Sep 05, 2005 1:38 am

how to change height of LI

Post by eshban »

hi,

how can i set the height of LI border . i use the border-Left property to enable the browser.
i use this code.

Code: Select all

#topnav LI {
	PADDING-RIGHT: 12px; DISPLAY: inline; PADDING-LEFT: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #d0d1d3 1px solid ; PADDING-TOP: 0px; 
}
the problem is border height is very large. how can i make it small.

thanks
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

Edit: Ignore the below post as it is not correct... I guess it's been a while since the last time I did client-side work :P

[ignore]
<li> is an inline element, thus you can't change its height/width. If you still wish to do that, you first need to change it to a block element with:

Code: Select all

display: block;
[/ignore]
Last edited by Oren on Tue Jul 10, 2007 7:36 am, edited 1 time in total.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

<li> is not an inline element.

Your code says "display:inline" though. Get rid of that part. If you want them to be next to each other, either float them, or try inline-block (not recommended).
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

superdezign wrote:<li> is not an inline element.
Correct... my bad :oops:
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

border-width is usually used to set the width of the border
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

To extend on that, the shorthand for the border property is "width type color."

Code: Select all

border: 1px solid #000;
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

I know in IE, setting the height will work. I don't think it does in firefox though. However, setting a bottom and top margin will give you a height.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
Rovas
Forum Contributor
Posts: 272
Joined: Mon Aug 21, 2006 7:09 am
Location: Romania

Post by Rovas »

scottayy wrote:I know in IE, setting the height will work. I don't think it does in firefox though. However, setting a bottom and top margin will give you a height.
It will work also in FF. Check your CSS and XHTML code for mistakes and then validate it. I had a similar problem with the distance (padding) between 2 li tags and the cause was that I forgot to close an li tag.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

If you set the line height you can adjust the height of the side border on LI's as well.
Post Reply