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> 7 4657
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/
"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
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
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
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/
*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
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/ This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Jon W |
last post by:
This is a small table with hover on the table cells.
The first cell is setup to switch from div element to
input element by use of display:block/none. In IE, onclick
the input element is displayed...
|
by: Tristan Miller |
last post by:
Greetings.
I am trying to write a function which toggles the display of a certain
class of <div> elements in an HTML page. The CSS file initially sets some
classes to "display: none", and...
|
by: Jon W |
last post by:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title>rolly</title>
<!-- The desired performance for this gem would be to:
1. click on table cells
2. edit in INPUT
3....
|
by: Sandman |
last post by:
I'm having some problem here...
I have a javascript I've downloaded that goes through all PNG files and enables
the transparency channel in them for IE5.5+ by converting them to SPAN layers
with...
|
by: ruby_bestcoder |
last post by:
Hi
Im having problem in firefox with display:none/block.
I have essentially 3 li elements. In each element there are a few
nested div:s. Clicking on one of the divs, makes another div to...
|
by: drew197 |
last post by:
I am a newbie. I am editing someone elses code to make it compatible
with Firefox and Safari.
In IE, when you click on the proper link, a block of text is shown in a
nice paragraph form. But, in...
|
by: rbinington |
last post by:
Hi,
I am trying to write a DNN module that has the ability to insert articles into an article repository. I want the users to be able to move pages around and enter text into the FCKEditor. I...
|
by: Steve Richter |
last post by:
I would like to use display:inline and other CSS attributes to build
an entry form. Where the heading to the left of the text box is always
a set width.
It is not working so I am experimenting...
|
by: cssExp |
last post by:
hello,
Rather than going on a wild explanation on what's the the problem, it'll be much quicker and easier if i let you look at it yourself, so I'll post my page source (actual contents taken out,...
|
by: MeoLessi9 |
last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
|
by: DolphinDB |
last post by:
Tired of spending countless mintues downsampling your data? Look no further!
In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
|
by: Aftab Ahmad |
last post by:
Hello Experts!
I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
|
by: Aftab Ahmad |
last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below.
Dim IE As Object
Set IE =...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, we are pleased to welcome back...
|
by: marcoviolo |
last post by:
Dear all,
I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, we are pleased to welcome back...
|
by: Vimpel783 |
last post by:
Hello!
Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
| |