UL and LI in Firefox/IE

[ckarbass]

I have the following CSS for an unordered list.

ul
{
padding:0px;
margin:0px;

list-style: none;
padding-top: 50px;
}

li
{
padding:0px;
margin:0px;
line-height: 38px;
}

So the idea is pretty simple. I pad the list by 50px top to move it
down within it's contaning div. I then list the menu and set each li
to 38px line-height. The line-height centers the text within a
background image in IE. However, in firefox, the li element's height
is larger than in IE implying that the line-height is interpreted
differently.

It's as if in IE it's perfectly 38px per LI, and in Firefox it's
39px. I don't see how this could be the case given that padding and
margin are set to 0, and the line-height is set to 38px.

[Bergamot]

ck******@gmail. com wrote:

>
It's as if in IE it's perfectly 38px per LI, and in Firefox it's
39px.

Gee, what a disaster. :-\

If you're so hung up on 1 pixel in a list item, I can imagine what the
rest of the layout is like. And it isn't good. :(

--
Berg

[Jukka K. Korpela]

Scripsit ck******@gmail. com:

I have the following CSS for an unordered list.

How about a URL?

I pad the list by 50px top to move it
down within it's contaning div.

Why? Anyway, this seems to have nothing to do with anything else in the
question.

I then list the menu and set each li
to 38px line-height.

Why? Did you even consider the possibility that some people _have_ to set
font size to, say, 60px in order to be able to read the text? Besides,
setting line-height is a wrong idea here. Who knows whether some items will
some day actually spread across two lines, and how silly will things _then_
look like?

The line-height centers the text within a
background image in IE.

What background image? Anyway, it's a silly idea, since line-height was not
designed for such purposes and need _not_ mean equal spacing above and
below.

However, in firefox, the li element's height
is larger than in IE implying that the line-height is interpreted
differently.

Should we be surprised?

It's as if in IE it's perfectly 38px per LI, and in Firefox it's
39px. I don't see how this could be the case given that padding and
margin are set to 0, and the line-height is set to 38px.

If your problem is really the difference between 38px on one browser and
39px on another, then you clearly have no idea of what your real problems
are. Neither have us, since you didn't reveal a URL.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[ckarbass]

On Mar 19, 12:37 pm, Bergamot <berga...@visi. comwrote:

ckarb...@gmail. com wrote:

It's as if in IE it's perfectly 38px per LI, and in Firefox it's
39px.

Gee, what a disaster. :-\

If you're so hung up on 1 pixel in a list item, I can imagine what the
rest of the layout is like. And it isn't good. :(

--
Berg

Well, calling it a disaster isn't going to help. I have a layout
given to me by a graphic designer. It's more than 1 px, it's 1px off
per list item which adds up over several menu items. I'm trying to
do this the "right" way by using CSS.

I'm looking for advice or constructive criticism, not "this is a
disaster." I'm still learning. Thanks in advance.

[Els]

ck******@gmail. com wrote:

I have the following CSS for an unordered list.

ul
{
padding:0px;
margin:0px;

list-style: none;
padding-top: 50px;
}

li
{
padding:0px;
margin:0px;
line-height: 38px;
}

So the idea is pretty simple. I pad the list by 50px top to move it
down within it's contaning div. I then list the menu and set each li
to 38px line-height. The line-height centers the text within a
background image in IE. However, in firefox, the li element's height
is larger than in IE implying that the line-height is interpreted
differently.

It's as if in IE it's perfectly 38px per LI, and in Firefox it's
39px. I don't see how this could be the case given that padding and
margin are set to 0, and the line-height is set to 38px.

Is there any <aelement inside the <li>?
Is there any width restriction on the <ulor <li>?
Are there any other style rules that could be interfering with the
above snippet?
What doctype did you use?
What does the HTML for that list look like? Do you have any whitespace
between the </liand <litags?

(I think giving the url would be best ;-) )

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[Ben C]

On 2007-03-19, ck******@gmail. com <ck******@gmail .comwrote:

I have the following CSS for an unordered list.

ul
{
padding:0px;
margin:0px;

list-style: none;
padding-top: 50px;
}

li
{
padding:0px;
margin:0px;
line-height: 38px;
}

So the idea is pretty simple. I pad the list by 50px top to move it
down within it's contaning div. I then list the menu and set each li
to 38px line-height. The line-height centers the text within a
background image in IE. However, in firefox, the li element's height
is larger than in IE implying that the line-height is interpreted
differently.

It's as if in IE it's perfectly 38px per LI, and in Firefox it's
39px. I don't see how this could be the case given that padding and
margin are set to 0, and the line-height is set to 38px.

Bear in mind that the line-height property sets a minimum line height.
What do you have in the <li>?

[Andy Dingley]

On 19 Mar, 18:45, ckarb...@gmail. com wrote:

Well, calling it a disaster isn't going to help.

You're right, it's not a disaster.

I have a layout given to me by a graphic designer.

OK, _now_ it's a disaster.

Why are you employing a graphic designer obsessed with individual
pixels to design for a document-based medium where you have no control
over, or idea of, the pixel resolution of the users' display devices?

Don't set line-height.
Don't ever set line-height unless you're really pretty experienced
with CSS.

[ckarbass]

On Mar 19, 12:15 pm, "Andy Dingley" <ding...@codesm iths.comwrote:

On 19 Mar, 18:45, ckarb...@gmail. com wrote:

Well, calling it a disaster isn't going to help.

You're right, it's not a disaster.

I have a layout given to me by a graphic designer.

OK, _now_ it's a disaster.

Why are you employing a graphic designer obsessed with individual
pixels to design for a document-based medium where you have no control
over, or idea of, the pixel resolution of the users' display devices?

Don't set line-height.
Don't ever set line-height unless you're really pretty experienced
with CSS.

http://whoisweb20.com/gallery/

[ckarbass]

On Mar 19, 12:15 pm, "Andy Dingley" <ding...@codesm iths.comwrote:

On 19 Mar, 18:45, ckarb...@gmail. com wrote:

Well, calling it a disaster isn't going to help.

You're right, it's not a disaster.

I have a layout given to me by a graphic designer.

OK, _now_ it's a disaster.

Why are you employing a graphic designer obsessed with individual
pixels to design for a document-based medium where you have no control
over, or idea of, the pixel resolution of the users' display devices?

Don't set line-height.
Don't ever set line-height unless you're really pretty experienced
with CSS.

http://whoisweb20.com/gallery/

[ckarbass]

On Mar 19, 11:20 am, ckarb...@gmail. com wrote:

I have the following CSS for an unordered list.

ul
{
padding:0px;
margin:0px;

list-style: none;
padding-top: 50px;

}

li
{
padding:0px;
margin:0px;
line-height: 38px;

}

So the idea is pretty simple. I pad the list by 50px top to move it
down within it's contaning div. I then list the menu and set each li
to 38px line-height. The line-height centers the text within a
background image in IE. However, in firefox, the li element's height
is larger than in IE implying that the line-height is interpreted
differently.

It's as if in IE it's perfectly 38px per LI, and in Firefox it's
39px. I don't see how this could be the case given that padding and
margin are set to 0, and the line-height is set to 38px.

Here's a URL http://whoisweb20.com/gallery/