Stylesheets - UL and LI in Firefox/IE

Author

UL and LI in Firefox/IE

ckarbass@gmail.com

2007-03-20, 12:06 am

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

2007-03-20, 12:06 am

ckarbass@XXXXXXXXXX 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

2007-03-20, 12:06 am

Scripsit ckarbass@XXXXXXXXXX:

> 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@gmail.com

2007-03-20, 12:06 am

On Mar 19, 12:37 pm, Bergamot <berga...@visi.com> wrote:
> ckarb...@XXXXXXXXXX wrote:
>
>
> 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

2007-03-20, 12:06 am

ckarbass@XXXXXXXXXX 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 <a> element inside the <li>?
Is there any width restriction on the <ul> or <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 </li> and <li> tags?

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

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

Ben C

2007-03-20, 12:06 am

On 2007-03-19, ckarbass@XXXXXXXXXX <ckarbass@XXXXXXXXXX> 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.

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

Andy Dingley

2007-03-20, 12:06 am

On 19 Mar, 18:45, ckarb...@XXXXXXXXXX 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@gmail.com

2007-03-20, 12:06 am

On Mar 19, 12:15 pm, "Andy Dingley" <ding...@codesmiths.com> wrote:
> On 19 Mar, 18:45, ckarb...@XXXXXXXXXX wrote:
>
>
> You're right, it's not a disaster.
>
>
> 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@gmail.com

2007-03-20, 12:06 am

ckarbass@gmail.com

2007-03-20, 12:06 am

On Mar 19, 11:20 am, ckarb...@XXXXXXXXXX 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/

ckarbass@gmail.com

2007-03-20, 12:06 am

On Mar 19, 11:45 am, Els <els.aNOS...@tiscali.nl> wrote:
> ckarb...@XXXXXXXXXX wrote:
>
>
>
>
>
>
> Is there any <a> element inside the <li>?
> Is there any width restriction on the <ul> or <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 </li> and <li> tags?
>
> (I think giving the url would be best ;-) )
>
> --
> Els http://locusmeus.com/
> accessible web design: http://locusoptimus.com/

Hang on, i'll post a URL. In a sec...

Please don't respond if all you plan on doing is bash the CSS and
respond with "did you think of this" and "did you think of that"

ckarbass@gmail.com

2007-03-20, 12:06 am

On Mar 19, 12:06 pm, Ben C <spams...@spam.eggs> wrote:
> On 2007-03-19, ckarb...@XXXXXXXXXX <ckarb...@XXXXXXXXXX> wrote:
>
>
>
>
>
>
>
>
>
> Bear in mind that the line-height property sets a minimum line height.
> What do you have in the <li>?

Anchor tags....here's the URL: http://www.whoisweb20.com/gallery/

Jukka K. Korpela

2007-03-20, 7:20 pm

Scripsit ckarbass@XXXXXXXXXX:

> Hang on, i'll post a URL. In a sec...
>
> Please don't respond if all you plan on doing is bash the CSS and
> respond with "did you think of this" and "did you think of that"

Your requests to get killfiled by people who could help you have become
rather clear by now, so you AOL-style babbling wasn't really needed for the
purpose, but thanks anyway.

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