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 <[e-mail]:

[e-mail] 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, [e-mail] 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" <[e-mail]:

On 19 Mar, 18:45, [e-mail] 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" <[e-mail]:

On 19 Mar, 18:45, [e-mail] 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, [e-mail] 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]

On Mar 19, 11:45 am, Els <[e-mail]:

[e-mail] 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/

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]

On Mar 19, 12:06 pm, Ben C <[e-mail]:

On 2007-03-19, [e-mail] <[e-mail]:

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>?

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

[Els]

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

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"

And what if I bash the CSS *and* tell you the problem? ;-)

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

[Els]

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

On Mar 19, 11:20 am, [e-mail] 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/

Not having looked at the CSS yet, I can tell you that your plan will
fail: in Firefox I can resize the pixel fonts, and the images won't
come along, while the line-height will.

If this would be my assignment, I'd ask the designer if it would be
okay to have those grey lines in the same colour as the yellowish part
that is on the right of the white area, and then I'd have the lines as
borders or individual background images on the text. That way, if the
text gets enlarged, the lines will go with it, and because it's the
same colour as the background, it won't look like it's sticking out.
Of course, the curve on the left will have to placed in front of the
list, to avoid the same problem.

If you want to bet that no one ever wants to change the font-size in
their browser, the solution for Firefox may be to set both line-height
and height to 39px. (that's what evens things out in my Firefox on my
XP Home, can't say for anyone else's).

If you really don't want anyone to be able to resize the font, think
again. If you still don't want that, think it over once more. If you
then still don't want that option for your visitors, make it images.
Don't forget to add both alt and title attributes on them.

BTW, is it on purpose that your div#mainWrapper is inside div.header ?

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

[ckarbass]

On Mar 19, 1:19 pm, Els <[e-mail]:

[e-mail] wrote:

On Mar 19, 11:20 am, [e-mail] 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 URLhttp://whoisweb20.com/gallery/

Not having looked at the CSS yet, I can tell you that your plan will
fail: in Firefox I can resize the pixel fonts, and the images won't
come along, while the line-height will.

If this would be my assignment, I'd ask the designer if it would be
okay to have those grey lines in the same colour as the yellowish part
that is on the right of the white area, and then I'd have the lines as
borders or individual background images on the text. That way, if the
text gets enlarged, the lines will go with it, and because it's the
same colour as the background, it won't look like it's sticking out.
Of course, the curve on the left will have to placed in front of the
list, to avoid the same problem.

If you want to bet that no one ever wants to change the font-size in
their browser, the solution for Firefox may be to set both line-height
and height to 39px. (that's what evens things out in my Firefox on my
XP Home, can't say for anyone else's).

If you really don't want anyone to be able to resize the font, think
again. If you still don't want that, think it over once more. If you
then still don't want that option for your visitors, make it images.
Don't forget to add both alt and title attributes on them.

BTW, is it on purpose that your div#mainWrapper is inside div.header ?

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

I do think accessibility is important and I'm still learning about how
to make sites more accessible. I hadn't given too much thought to the
idea of someone resizing their text via their browser. I'm doing this
as a quick and free site and I don't want to spend too much time on
it.

I'll have to give some thought to see how to handle someone resizing
the text. Maybe it just won't look pretty when you resize it...

BTW, is it on purpose that your div#mainWrapper is inside div.header ?

No, I need to look at what's going on there.

I also still need to validate the page, a process I just began today.

Thanks for your input.

[Bergamot]

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

>
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"

Sorry, but this is a Usenet newsgroup, not some google forum. It is a
discussion group, thus we discuss things - your query in this case.

You admit you are a noob, so you should appreciate the advice more
experienced people are giving you on other aspects of web design and
CSS. It may not be what you think you need this moment, but you will
benefit from it nonetheless *if* you listen and have an open mind.

--
Berg

[Ben C]

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

On Mar 19, 12:06 pm, Ben C <[e-mail]:

[...]

>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/

Firefox does just seem to be taking your 38px as a suggestion-- if you
don't set font-size on the <ait gets back to down to 38px. But if you
set a very small font on the <a>, the line height goes to much less than
38px.

Not really what the spec says it should do.

Take Els's advice and use borders for those lines. Very risky to make
them part of the background image.

Or make the text part of the background image. Some of the CSS Zen
Garden pages do that so they can use funny fonts. You make the real text
disappear with visibility:hidden or sometimes negative text-indents for
some reason.

[Bergamot]

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

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

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

Trying to make plain text fit within the confines of a background image
almost never works, and won't in your case either. If I disable my
browser's minimum font-size (17px), the hours of operation is unreadably
small. If I zoom text enough so I can read it, the text size in the
content area becomes uncomfortably large. Yes, there is such a thing as
too large. :)

When my minimum font-size is enforced, besides the left column not
fitting in the bg image, the address at the top of the page is chopped
off. You could probably avoid that problem if you didn't slice up the
graphics across the top of the page. You shouldn't need to absolutely
position all those things, either.

A couple other things:
- The lack of spacing between paragraphs doesn't help readability.
- There are no headings on the page. With few exceptions, every page
should have at least an <h1>.
- Image alt text is incorrect. Alt text is replacement text for when the
image isn't seen, not descriptive text. A general rule of thumb for
pictures of text is to make the alt text the same as the text in the
image. "logo" is superfluous. "background" is meaningless.

HTH

--
Berg

[ckarbass]

On Mar 19, 3:08 pm, Bergamot <[e-mail]:

[e-mail] wrote:

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"

Sorry, but this is a Usenet newsgroup, not some google forum. It is a
discussion group, thus we discuss things - your query in this case.

You admit you are a noob, so you should appreciate the advice more
experienced people are giving you on other aspects of web design and
CSS. It may not be what you think you need this moment, but you will
benefit from it nonetheless *if* you listen and have an open mind.

--
Berg

I have no problem with advice and constructive criticism. I know I
need help and that is why I posted. Saying something is a disaster is
not constructive. I don't appreciate it because it's mainly a comment
intended to berate, not to educate or reform.

Els has been quite helpful and critical, which is perfect. On the
other hand Jukka's comments were solely intended to berate. Many were
unnecessary. There is a difference.

[ckarbass]

On Mar 19, 3:59 pm, Bergamot <[e-mail]:

[e-mail] wrote:

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

Here's a URLhttp://whoisweb20.com/gallery/

Trying to make plain text fit within the confines of a background image
almost never works, and won't in your case either. If I disable my
browser's minimum font-size (17px), the hours of operation is unreadably
small. If I zoom text enough so I can read it, the text size in the
content area becomes uncomfortably large. Yes, there is such a thing as
too large. :)

I agree, it's way too small.

>
When my minimum font-size is enforced, besides the left column not
fitting in the bg image, the address at the top of the page is chopped
off. You could probably avoid that problem if you didn't slice up the
graphics across the top of the page. You shouldn't need to absolutely
position all those things, either.

I noticed the address gets chopped off just today when I increased the
size.
Not slicing seems like I would need an image map or something to make
the header clickable in various regions.

>
A couple other things:
- The lack of spacing between paragraphs doesn't help readability.

Agreed. The page isn't finished, I just threw it up there for
discussion of the list. I used global whitespace reset, so I will
need to add some margins.

- There are no headings on the page. With few exceptions, every page
should have at least an <h1>.

Agreed, the graphic designer didn't include them in his design, but
they provide the user with feedback as to where they are in the page.

- Image alt text is incorrect. Alt text is replacement text for when the
image isn't seen, not descriptive text. A general rule of thumb for
pictures of text is to make the alt text the same as the text in the
image. "logo" is superfluous. "background" is meaningless.

Sounds good, I'll implement these changes.

>
HTH

Thanks for your input.

>
--
Berg

[dorayme]

In article
<11**********************@b75g2000hsg.googlegroups .com>,
ck******@gmail.com wrote:

I hadn't given too much thought to the
idea of someone resizing their text via their browser. I'm doing this
as a quick and free site and I don't want to spend too much time on
it.

I'll have to give some thought to see how to handle someone resizing
the text. Maybe it just won't look pretty when you resize it...

It is not just some issue of someone playing about or resizing on
the fly to suit themselves, perhaps you might be knowing this:
some folk have different settings for text size to what you might
be thinking.

--
dorayme

[Andrew]

On Mon, 19 Mar 2007 12:36:35 -0700, ckarbass wrote:

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

Hi ckarbass,

It looks pretty, but I sympathise with your obvious problem of working
with a graphic designer: he or she has really designed a brochure or a
menu not a web site. I suspect you will always have a struggle to make a
web page look like a picture, a newspaper or a glossy magazine.

Regards,

Andrew

--
Andrew Strong
http://www.strong-family.org

[dorayme]

In article <pa****************************@sorrynospam.invali d>,
Andrew <an****@sorrynospam.invalidwrote:

On Mon, 19 Mar 2007 12:36:35 -0700, ckarbass wrote:

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

Hi ckarbass,

It looks pretty, but I sympathise with your obvious problem of working
with a graphic designer: he or she has really designed a brochure or a
menu not a web site. I suspect you will always have a struggle to make a
web page look like a picture, a newspaper or a glossy magazine.

Regards,

Andrew

It would improve the situation if you simply got rid of the lines
that are meant to separate the nav items, no lines and nothing to
break re positioning the nav items.

That's one thing to do. The other is to enlarge the white curved
area that the nav text sits in. I would say to make it wider, the
height is not so important in the perception of "breaking".

Next, do some em based cssing to make the vertical separation
border move with the text size to the right.

--
dorayme

[Bergamot]

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

>
Saying something is a disaster is
not constructive. I don't appreciate it because it's mainly a comment
intended to berate, not to educate or reform.

The comment was intended as sarcasm but I don't apologize for it. If you
had lurked in this group a while before posting or spent any time
searching the group archives, you might have learned what the reaction
to your type of query was likely to be.

Els has been quite helpful and critical, which is perfect.

Els is more forgiving and tolerant than most people.

On the
other hand Jukka's comments were solely intended to berate.

Jukka is less forgiving and tolerant than most people. I don't always
agree with his methods, but you'll be hard pressed to find someone else
in these newsgroups with his level of knowledge. If you had lurked here
even for a couple days before posting, you would have discovered his
"style" right away and braced yourself for a bashing.

Regardless, if you're going to play on Usenet you need a fairly thick
skin. Don't take everything personally and you'll have a better chance
of survival.

--
Berg

[Bergamot]

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

On Mar 19, 3:59 pm, Bergamot <[e-mail]:

>[e-mail] wrote:

Here's a URLhttp://whoisweb20.com/gallery/

the address at the top of the page is chopped
off. You could probably avoid that problem if you didn't slice up the
graphics across the top of the page.

Not slicing seems like I would need an image map or something to make
the header clickable in various regions.

No, that's not what it means. There are separate foreground and
background images. The background image should span the whole width of
the header. The foreground images are the logo and the trolley car. With
transparent backgrounds they can go anywhere you want.

The foreground images are the links, as is the plain text address.

--
Berg

[Andy Dingley]

On 19 Mar 2007 12:18:47 -0700, ck******@gmail.com wrote:

>http://whoisweb20.com/gallery/

San Francisco? Hmmm... It's tricky to find a good web designer there.
Far too many crap arrogant Nathans who can't think beyond fixed paper
and fixed pixels.

Your example here is a classic of the genre. It fails badly when the
window is widened beyond the basic background image. If you use such an
image, make it bigger and make the edges taper out, not end at a blunt
line.

The lines around the menu simply have no place in that background image
at all. If you want them, put them there by bordering or separating the
<lielements and do this through HTML and CSS, not through a background
image. _Never_ try and keep backgrounds aligned with foreground
elements, it's unnecessary and almost impossible to achieve.

Don't adjust line-height either. It's hard to do it any better than the
existing default. It's also inappropriate to try to use it in this way:
it's a setting for controlling height between lines in a block, not
between blocks. For your menu here, just use the margins and padding.

[dorayme]

In article <56*************@mid.individual.net>,
Bergamot <be******@visi.comwrote:

Regardless, if you're going to play on Usenet you need a fairly thick
skin. Don't take everything personally and you'll have a better chance
of survival.

Just to add, no need to have one before coming. It gets thicker
as you get beaten up more. Trust me.

--
dorayme

[Jukka K. Korpela]

Scripsit ck******@gmail.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"

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/