css margin problem in internet explorer

problem

[egiss]

dear,

i have the following css code for my xhtml website

#menubalk li a
{
font-family: comic sans ms,verdana,helvetica,sans-serif;
text-decoration: none;
display: block;
padding: 0.5em 0em 0.5em 1em;
color: white;
width: 90%;
background-color: #000099;
border-left: 1px solid #000098;
border-right: 1px solid #000098;
border-top: 1px solid #000098;
border-bottom: 1px solid #000098;
margin-bottom: -5px;
}

==> this is the css that i use to draw my navigation buttons in html. I want to have one panel of buttons that are drawn right under each other without additional whitespace between two buttons. With the option "margin-bottom: -5px;" it draws correctly in opera & netscape(mozilla) but not in internet explorer. if i set the bottom margin to 0px it only draws correctly in internet explorer. Does anyone have a sollution for this problem preferebly without using additional scripts or using browser specific stylesheets

Thanks anyway,
egiss

[tedster]

Have you tried both margin-top:0px; and margin-bottom:0px;?

The reason it looks like you need a negative margin bottom might be to compensate for the default margin-top. Setting them both to zero makes sure that they will actually collapse to 0 cross-browser when two elements bump up against each other.

[egiss]

well, i tried your suggestion but as a feared i have the first problem again: it shows correctly in internet explorer but not in opera/mozilla. the 5px margin remains.

[egiss]

the actual problem isnīt the white space between the two elements no more but the "flickering" of the elements when you try to use then in explorer.

[edited by: Nick_W at 10:17 pm (utc) on Feb. 24, 2003]
[edit reason] See sticky mail ;-) [/edit]

[Birdman]

Make sure the padding and margin are the same in:

a
a:visited
a:hover

[DrDoc]

Why don't you just remove the <ul> and <li>'s? They are not necessary.

And change #menubalk li a to just #menubalk a in your style sheet.

Also, you might want to edit your post and remove the URL.

<ul>'s and <li>'s shouldn't be used for layout purposes - only as they are intended, for lists. You can easily create the same effect using padding and margins.

[WibbleWobble]

Lists are layout, and they've perfectly good uses aside from bulleted lists; one of the most prominent being navigation menus. As with everything, there are pros and cons to using them, though.

[Nick_W]

I disagree. Lists are lists. You can use them for navigation, I do all the time, they're great for it.

They are not layout though, they're just lists...

Nick

[HarryM]

One thing that may be worth checking is whether you are trying to compensate with CSS for a problem introduced in the XHTML.

I would check that the XHTML is not introducing something that IE interprets as whitespace. For instance all browsers render "<ul>whatever</ul>" OK, but with IE you can get odd results with:

<ul>
whatever
</ul>

or:

<a>
whatever
</a>

<addition> One other little trick IE has which can obscure the problem, is that it can get confused between specified font sizes and inherited font sizes. If your list is in a div, then IE can render the links with the specified font size, but the line spacing from the font size inherited from the div. This can be the IE default size which is automatically inherited. If your specified font is smaller than the inherited font, then IE adds in extra vertical space. The answer is to always specify a font size to the container which is equal or less than the font size you require. I tend to use "div.class {font:1pt 'Verdana';}" which miraculously gets rid of all sorts of spacing problems.

IE is not being illogical. If you have a page of text and within it specify a few words in a smaller font, then you wouldn't want the line height to change automatically. IE is catering for this, but with unfortunate side effects. </addition>

[edited by: HarryM at 3:53 pm (utc) on Feb. 25, 2003]

[theonliest]

egiss
I had a similiar problem with 'margins behaving badly'; have a look at this thread:

[webmasterworld.com ]

unfortunately, I couldn't resolve the problem, which was similiar to your own, and had to use an unsatisfactory workaround..
ie seems to have problems with deeply contextual selectors (is that the right expression!) and margins!

one question, why do you need to use <li> at all, does the div not automatically create the breaks you want?

[egiss]

thanks to everyone for posting your answers, it realy helped me. I tried DrDoc answer and it was ok from the first try. Now my page renders well in all browsers.
I havenīt tried HarryMīs post but he is probebly right too because i did use
<ul>
bla bla bla
</ul>
This is new information to me because i had no id that explorer would render this as extra whitespace. But as i mentioned before i just removed the <ul> and <li> blocks and everything works fine now. Thanks again.