CSS - Line-height In Unordered Lists

I can't seem to find any issues of this on the web, or maybe I'm not doing a correct search. here's my problem.

I'm creating a horizontal menu with an unordered list <ul> with each <li> tag using a background image. My problem is, in IE (both ie6 & 7), the menu seems to display having a staggered cascading effect. Firefox works great as usual...

see screenshot at http://clubsix1.com/images/cascade_effect.png

Here's my CSS code:

Code:

#masthead ul#mystuffnav {
	padding:0;
	margin:0;
	width:334px;
}
#masthead ul#mystuffnav li {
	float:left;
	margin-bottom:1px;
	clear: both;
}

/* Fancy Buttons, My Stuff Nav */
#masthead ul#mystuffnav a.button,
#masthead ul#mystuffnav a.button:link,
#masthead ul#mystuffnav a.button:visited {
    padding:3px 7px 5px;
    text-decoration:none;
    outline:none;
	/*display:block; OQO */
    font-size:10px;
    float:left;
    text-align:center;
    margin:0 1px 0 0;
    line-height:1em;
}

Help is GREATLY appreciated! =)

How do I go about making my unordered list use a image file or the bullet?

Code:

<ul>
  <li><a href="#onesweetcoma">One Sweet Coma </a></li>
  <li><a href="#untitled">Untitled</a></li>
  <li><a href="#freedomfound">Freedom Found </a></li>
  <li><a href="#yourwords">Your Words</a></li>
  <li><a href="#reprise">Reprise</a></li>
  <li><a href="#cantpullaway">Can't Pull Away </a></li>
  <li><a href="#sleepingawake">Sleeping Awake</a></li>
  <li><a href="#wherewestand">Where We Stand</a></li>
  <li><a href="#echooffthewalls">Echo Off the Walls </a></li>
</ul>

my image name is bullet.png

Quick question...

I am trying to make an unordered list and have the first level have no indent/margin. But I want the second level to be indented 15 pixels. I'm having problems getting this done. Any suggestions?

Thanks

www.l33tmonkey.com/sun/index.html

completely ignoring the image issues, which are next on the list to sort out, I have a problem.

I've gotten hold of two seperate scripts with permission from the author, and they wouldn't wrk together so I linked them externally as two seperate files. Both scripts cater to IE and other common browsers using conditional comments and are reasonably tidy even after I've been playing with them

So here's the problem, the horozontal menu, with the two drop down sub menus, needs to float to the right, the float attribute is already present within the menu script, however, the float attribute will only work when set to the left. I altered it to the right and the menu went haywire.

the scripts and index source can be viewed freely. Any help on this would be really appreciated, I'm no expert on CSS

I've got an odd bug in IE7 that's got me completely stumped.

I'm using drupal for sort of an art/comic site, and I've built my own theme off of the Zen theme, for anyone who's familiar with it.

My main page works just fine.

Once I get to either the gallery or forum things start to collapse and get weird. My sidebar loses it's positioning, and the width of the list items in the unordered list shrink down to the size of the image or tex they contain, rather than extending to fill their container.

The only consistency I can find here is that they're both using unordered lists, but beyond that I'm not sure what's going on.

I've tried to go through and swat any obvious CSS and HTML errors, so any advice or insight on this would be much appreciated.

eta: looks like I can't post an opening topic with links yet, so I'll have to post them as a reply or something.

Hi all,

I am trying to automate everything on my test website and I have one more angle to cover.

In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height.

Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder)

My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement.

Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values?

I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit.

Whew!

Greetings,

I have a class called "header" and I am trying to give it a touch of extra space between it and the next line.

All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class.

Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer?

Thanks in advance!

I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks!

I'm having trouble making the line-height work the way I want to in IE.

I set the line-height of the outer container to this tag cloud to 24px, yet on IE it doesn't seem to be working. Any Ideas?

Check it out.
http://gifdump.com/tags/

Viewed on Firefox


Viewed on IE

Hope this is a simple prob for you css gurus. This time I can just direct you to a public site http://tixrus.us

Attention to the "On Sale Now" list at the left, I chose a small font to list the dates. I would like that teaser of the next 5 events in chron to be a little more compact. I have tried setting the line-height directly but nothing seems to change. I used style= in the source so it will be easy to find it. How can I make those more compact. Also the client list and the text in the search box.

Thanks!

Hi, I have this simple sample:

<div style="width: 50px; height: 100px; text-align: center; background-color: teal; line-height: .7em">
<span style="padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 10px; ">Here are some words that should wrap</span>
</div>

You can see in IE that the space between "should" and "wrap" is greater than the space between the other lines. Why is that?

Also, the line height in this sample in IE and FF are different, FF has a bit more space than IE. I cannot measure em, so I don't know which is right. Is there any documentation on this difference?

Thanks in advance,

CJB

Hope this is a simple prob for you css gurus. This time I can just direct you to a public site http://tixrus.us

Attention to the "On Sale Now" list at the left, I chose a small font to list the dates. I would like that teaser of the next 5 events in chron to be a little more compact. I have tried setting the line-height directly but nothing seems to change. I used style= in the source so it will be easy to find it. How can I make those more compact. Also the client list and the text in the search box.

Thanks!

I'm encountering a stange problem with line-height in ie6 when my unordered list is wrapped in a div. Firefox displays the correct line-height but ie6 seems to double it.

How can I fix this so ie6 looks like ff?

Thanks for any help!






Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style>

ul {
		list-style: 			none;
		width: 					192px;
		margin:					20px 0px 0px 70px;
		line-height:			2em;
		padding:                0px;
}


li a:link, #nav li a:visited{
		display:				block;
		color:					#3e4735;
		text-decoration:		none;
		position:				relative;
}


li a:hover {
		color:					#6d7e59;
		text-decoration: 		underline;
}

</style>

</head>

<body>


<div id="nav">

<ul>
            
	<li><a href="#">Lorem ipsum dolor sit</a></li>
	<li><a href="#">Lorem ipsum dolor sit</a></li>
	<li><a href="#">Lorem ipsum dolor sit</a></li>
</ul>

</div>

</body>
</html>

Question)

In CSS can you line-height be set to a lower value than the current font size?

What does this cause? potential answers (practise revision exam are)


A) line-height cannot be set to a value lower than the current font size
B) The lines are cut to prevent overlapping
C) The lines will overlap

I am pretty sure they overlap but want to confirm

Hi all, hope someone can help with this.

Page with problem:

html Code:

http://central12.com/hovv.htm

CSS Code:

http://central12.com/hov.css

Basically I used Eric Meyer image pop up tuturial, got it working ok in firefox, but in IE when I hover over the link the text jigs down a bit.
I know I can stop this by removing the line-height attribute on the p tag, but wanted this to remain as it is a style I want across the site in general.
Any way to keep the line height and remove the IE text jog.
Thanks for any help.