Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to get rid of space in menu of IE

Status
Not open for further replies.
NeckBone

NeckBone

Programmer
Oct 15, 2003
47
US
Hi folks,

I'm trying to get a ul style menu to work in IE without having the space in between the list. IE adds a pixel or two space in between the list items.

Can you tell me of a way to get rid of that space and have the display to look the same as in FF?

Here's the code I'm using at this point:

ul {
margin:0;
padding:0;
width:150px;
font-size:12px;
background-color:#036;
list-style-type:none;
}
li.menu {
display:block;
margin:0;
padding:0;
width:150px;
height:20px;
border-bottom:1px solid #fff;
}
li.menu a:link,a:visited,a:active {
display:block;
margin:0;
padding:0;
width: 150px;
border:1px solid #fff;
height:20px;
color: #fff;
background-color: #036;
text-decoration: none;
text-align: center;
}
li.menu a:hover{
display:block;
margin:0;
border:0;
padding:0;
border:1px solid #fff;
width:150px;
height:20px;
color:#000;
background-color:#fff;
text-decoration:underline;
text-align:center;
}

Thanks a bundle for your input

Youth and beauty are no match for age and experience.
 
Sort by date Sort by votes
Hi Neckbone,

can you post a link (or the HTML code)?
IE behaves differently for different Doctypes - seeing the code may shed light on the issue.

<marc>
New to Tek-Tips? Get better answers - faq581-3339
 
Upvote 0 Downvote
Thanks <marc>
Here's the doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
The ul is like so but with about 10 <li>:

<ul>
<li class="menu"><a href="#" title="List Item</a></li>
<li class="menu"><a href="#" title="Hello">Howdy</a></li>
</ul>

Youth and beauty are no match for age and experience.
 
Upvote 0 Downvote
Neck-

Here is a general tip: Be lazy. Do things with as little typing as possible (as long as they are still browser-legal).

I saved your code in an html an viewed it. I did indeed see some spacing issues between the buttons. I striped down your css code, deleting all the things that were unnecessary and came up with this:

Code: 
<style>
ul  {
	margin:0px;
	padding:0px;
	width:150px;
	font-size:12px;
	background-color:#036;
	list-style-type:none;
}

.menuItem a {
	display:block;
	width:150px;
	height:20px;
	color:#fff;
	background-color: #036;
	text-decoration:none;
	text-align:center;
	border:1px solid #fff;
}

.menuItem a:hover{
	border:1px solid #fff;
	color:#000;
	background-color:#fff;
	text-decoration:underline;
}
</style>

Remember that you should always have units on your measurments. Also remember that the [tt]a[/tt] with nothing attached to it applies to all states of the link (active, hover, visited....).

I am not sure what specifically was creating the error but I would venture a guess that its was because you didnt have measurment units on your padding and margin sizes.

Also take note that I renamed your class to [tt]menuItem[/tt] because they are menu items, not menus themselves.

Hope this helps.

Robert Carpenter
"Disobedience to conscience is voluntary; bad poetry, on the other hand, is usually not made on purpose." - C.S. Lewis (Preface to Paradise Lost)
ô¿ô
 
Upvote 0 Downvote
Actually zero values do not require units, since 0 px is equal to 0 %, em, in, cm or whatever.
 
Upvote 0 Downvote
good to know-thanks

Robert Carpenter
"Disobedience to conscience is voluntary; bad poetry, on the other hand, is usually not made on purpose." - C.S. Lewis (Preface to Paradise Lost)
ô¿ô
 
Upvote 0 Downvote
Thanks guys for your input. I appeciate it.

I got it working with the <ul> style list and it works great.

I had a lot of trouble trying to get a horizontal link menu to work on the same page with the <ul> link menu. I gave up before success there.

Thanks mucho,
neckbone


Youth and beauty are no match for age and experience.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
804
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
789
pmonett
pmonett
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
739
bdwilcox
bdwilcox
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
624
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top