Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

css margin problem in internet explorer




11:48 pm on Feb 22, 2003 (gmt 0)

10+ Year Member


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,


1:31 am on Feb 23, 2003 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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.


9:24 pm on Feb 24, 2003 (gmt 0)

10+ Year Member

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.


9:36 pm on Feb 24, 2003 (gmt 0)

10+ Year Member

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]


9:46 pm on Feb 24, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Make sure the padding and margin are the same in:



9:51 pm on Feb 24, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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.


9:56 am on Feb 25, 2003 (gmt 0)

10+ Year Member

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.


10:24 am on Feb 25, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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



2:43 pm on Feb 25, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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:




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


3:33 pm on Feb 25, 2003 (gmt 0)

10+ Year Member

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?


7:35 pm on Feb 25, 2003 (gmt 0)

10+ Year Member

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
bla bla bla
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.

Featured Threads

Hot Threads This Week

Hot Threads This Month