homepage Welcome to WebmasterWorld Guest from 54.196.207.55
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
css margin problem in internet explorer
problem
egiss




msg:1198833
 11:48 pm on Feb 22, 2003 (gmt 0)
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




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

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




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

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




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

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




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

Make sure the padding and margin are the same in:

a
a:visited
a:hover

DrDoc




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

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




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

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




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

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




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

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




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

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




msg:1198843
 7:35 pm on Feb 25, 2003 (gmt 0)
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.
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved