By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,447 Members | 1,136 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,447 IT Pros & Developers. It's quick & easy.

display block in li NS7.1 vs IE

P: n/a
I'm trying to do a nav list using list items.

Roughly this is putting links styled display: block and with a background
color.

In IE5 (windows, haven't tried Mac yet), adding the display: block for the
link adds a bit of whitespace between the list items. NS7.1 does not do
this.

Why the whitespace (about 5px)? Is it possible to get IE and NS looking
about the same. If I can't do this I'll have to use divs... (I'm just the
programmer not the designer!)

Example below:

<html>
<head>
<style type="text/css">
..navmenu{list-style: none;width: 220px;background-color: white}
..navitem a {
display: block;
background-color: blue;
color: #fff;
text-decoration: none;
width: 100%;
}
..navitem a:hover{
background-color: yellow
}
..color{background-color: red;list-style: none;}
</style>
</head>
<body>
<ul class="navmenu">
<li class="navitem"><a href="">item 1</a></li>
<li class="navitem" ><a href="">item 2</a></li>
<li class="navitem" ><a href="">item 3</a></li>
</ul>

</body>
</html>
Jul 20 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a


Jeff Thies wrote:
I'm trying to do a nav list using list items.

Roughly this is putting links styled display: block and with a background
color.

In IE5 (windows, haven't tried Mac yet), adding the display: block for the
link adds a bit of whitespace between the list items. NS7.1 does not do
this.

Why the whitespace (about 5px)? Is it possible to get IE and NS looking
about the same. If I can't do this I'll have to use divs... (I'm just the
programmer not the designer!)

Example below:

<html>
<head>
<style type="text/css">
.navmenu{list-style: none;width: 220px;background-color: white}
.navitem a {
display: block;
background-color: blue;
color: #fff;
text-decoration: none;
width: 100%;
}
.navitem a:hover{
background-color: yellow
}
.color{background-color: red;list-style: none;}
Have you tried setting
li.navitem {
margin-top: 0;
margin-bottm: 0;
}
?
It could also help to add
li.navitem {
display: block;
}
but I am not sure IE5 will like it if you try to change the display
property of <li> elements.
</style>
</head>
<body>
<ul class="navmenu">
<li class="navitem"><a href="">item 1</a></li>
<li class="navitem" ><a href="">item 2</a></li>
<li class="navitem" ><a href="">item 3</a></li>
</ul>


--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #2

P: n/a

"Jeff Thies" <no****@nospam.net> wrote in message
news:AG*****************@newsread2.news.atl.earthl ink.net...
I'm trying to do a nav list using list items.

Roughly this is putting links styled display: block and with a background
color.

In IE5 (windows, haven't tried Mac yet), adding the display: block for the link adds a bit of whitespace between the list items. NS7.1 does not do
this.

Why the whitespace (about 5px)? Is it possible to get IE and NS looking
about the same. If I can't do this I'll have to use divs... (I'm just the
programmer not the designer!)

Example below:

<html>
<head>
<style type="text/css">
.navmenu{list-style: none;width: 220px;background-color: white}
.navitem a {
display: block;
background-color: blue;
color: #fff;
text-decoration: none;
width: 100%;
}
.navitem a:hover{
background-color: yellow
}
.color{background-color: red;list-style: none;}
</style>
</head>
<body>
<ul class="navmenu">
<li class="navitem"><a href="">item 1</a></li>
<li class="navitem" ><a href="">item 2</a></li>
<li class="navitem" ><a href="">item 3</a></li>
</ul>

</body>
</html>

It can be caused by the break after each closing </li>. Begin the next <li>
on the came line as the previous <li> like this

<li class="navitem"><a href="">item 1</a></li><li class="navitem" >
a href="">item 2</a></li>

You don't need to keep writing class="navitem" just use a contextual
(descendent) selector like this

..navmenu li {......

HTH
David


Jul 20 '05 #3

P: n/a
Jeff Thies wrote:
I'm trying to do a nav list using list items.

Roughly this is putting links styled display: block
and with a background color.

In IE5 (windows, haven't tried Mac yet), adding the
display: block for the link
You mean the a element, right?
adds a bit of whitespace between the list items.
NS7.1 does not do this.

Why the whitespace (about 5px)?
Because IE is a screwy browser (cough). You have to feed it an
incorrect width, then feed conforming browsers the correct width in a
separate rule that IE cannot parse.

<UL id="nav">
<LI><A HREF="/">home</A></LI>
<LI><A HREF="/one/">one</A></LI>
<LI><A HREF="/two/">two</A></LI>
<LI><A HREF="/three/">three</A></LI>
</UL>

#nav {
width: 8em;
}

#nav a {
display: block;
width: 100%;
}
/* width 100% removes the extra vertical space in IE */
/* however, this causes the a elements to stick out of */
/* #nav in conforming browsers, where width should be auto */
ul#nav>a { /* ie win cannot correctly parse child selector rule */
width: auto;
}
/* corrects width for Mozilla, Opera, et. al. */

Is it possible to get IE and NS looking about the same.
Not always. But you can get a decent rendering in both those
browsers, and in lots of others, with robust and valid html, well
thought out css, and a little tweaking as you see above.
If I can't do this I'll have to use divs...
Divs won't help with the problem you described afaik. Divs, like li,
are block level, and IE/Win will have the same screw up.
(I'm just the programmer not the designer!)
If by designer, you mean the person responible for choosing colors,
ok. But the web designer should know what can cause problems for
users. The vertical space is not the most serious problem that I see.
.navmenu{list-style: none;width: 220px;background-color: white}
If <li class="navmenu"> contains text, then setting the width in
pixels is likely to cause problems. What if the text in the user's
chosen font size does not fit in 220px? Consider using the em unit,
which is based on the font size of the element.
.navitem a {
display: block;
background-color: blue;
color: #fff;
text-decoration: none;
width: 100%;
}
.navitem a:hover{
background-color: yellow
}
.color{background-color: red;list-style: none;}


You set background color on several elements without setting a font
color. This could lead to invisible text when your stylesheet
cascades with another (e.g. user stylesheet).

--
Brian
follow the directions in my address to email me

Jul 20 '05 #4

P: n/a
Martin Honnen wrote:

It could also help to add
li.navitem {
display: block;
}
but I am not sure IE5 will like it if you try to
change the display property of <li> elements.


But the <li> element is already block level.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #5

P: n/a


Brian wrote:
Martin Honnen wrote:

It could also help to add
li.navitem {
display: block;
}
but I am not sure IE5 will like it if you try to
change the display property of <li> elements.

But the <li> element is already block level.


With CSS 2 the suggested rule defining the display value for the HTML LI
element is
LI { display: list-item }
There is quite a difference between
display: block
and
display: list-item
only IE on Win doesn't know the latter as an explict CSS value (while of
course displaying LI elements as list items).

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #6

P: n/a
*Martin Honnen* <ma*******@yahoo.de>:
Brian wrote:
But the <li> element is already block level.


With CSS 2 the suggested rule defining the display value for the HTML LI
element is LI { display: list-item }


Like with 'table' and 'block', elements with 'display' set to 'list-item'
generate block-level boxes. The same applies to 'compact' and 'run-in',
sometimes.

--
"The scientific name for an animal that doesn't
either run from or fight its enemies is lunch."
Michael Friedman
Jul 20 '05 #7

P: n/a


Christoph Paeper wrote:
*Martin Honnen* <ma*******@yahoo.de>:
Brian wrote:

But the <li> element is already block level.


With CSS 2 the suggested rule defining the display value for the HTML LI
element is LI { display: list-item }

Like with 'table' and 'block', elements with 'display' set to 'list-item'
generate block-level boxes. The same applies to 'compact' and 'run-in',
sometimes.


An element with display: list-item is supposed to generate a principal
block box and a list-item inline box and maybe a marker box. That is
different from display: block which only generates a principal block
box. In my understanding the original poster didn't want to have any
list-itemness rendering on his <li> elements so I suggested to him to use
li.navitem {
display: block;
}
I didn't suggest there is no block-level box for <li> but I think it
makes a difference whether an element has display: block or display:
list-item.

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.