4 replies [Last post]
maxl
maxl's picture
Offline
Regular
United States, Fort Collins, CO
Last seen: 12 years 42 weeks ago
United States, Fort Collins, CO
Timezone: GMT-6
Joined: 2007-06-25
Posts: 20
Points: 0

Hey everyone. I've got this weird problem with an unordered list, specifically in IE 7. It's nothing special of a list, just LI elements stacked vertically with no padding or margins.

It looks like the top of the UL has some padding, as its pushing every LI item down about 3 pixels. I've set a background color of gray to the UL and it shows up in the gap on top, which makes me think its a padding issue.

This is really weird because i just created an exact menu system just like this one and i never ran into this problem. I've tried comparing the two CSS sheets but i can't find anything thats different really.

Please take a look:http://www.amgci.com/teledent
below is the CSS code:
#div-navigation { position:absolute; top:138px; left:290px; height:20px; width:552px; }
#main-nav { margin:0px; padding:0px; border:0px solid black; width:550px; height:20px; list-style:none; color:white; font: 10px "Myriad Pro", "Trebuchet MS", Verdana; position:relative; }
#main-nav li { float:left; padding:0px; margin:0px 5px 0px; background:url(../images/nav-tab.png) no-repeat; width:78px; height:20px; text-align:center; position:relative; }
#main-nav li#services-mitem:hover { color:#f5f6dd; }
#main-nav li#services-mitem:hover #services-sub1 { display:block; position:absolute; left:0px; top:0px; }
#services-sub1 { display:none; border:1px solid; margin:0px; padding:0px; list-style:none; width:78px; background:#ccc; height:auto; }
#services-sub1 li { float:none; background:#F3F2DA none; color:#606330; margin:0px; padding:0px; border:1px solid; }
#services-sub1 li.body:hover { background:#BEC682; }
#services-sub1 li.top { width:78px; height:7px; }
#services-sub1 li.bottom { background:url(../images/nav-bak-bottom.png); height:14px; }

Thanks for all your suggestions in advance.

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 30 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Try font-size:0; in

Try font-size:0; in #services-sub1
and font-size:10px; in #services-sub1 li

maxl
maxl's picture
Offline
Regular
United States, Fort Collins, CO
Last seen: 12 years 42 weeks ago
United States, Fort Collins, CO
Timezone: GMT-6
Joined: 2007-06-25
Posts: 20
Points: 0

That worked! I have no idea

That worked! I have no idea why it worked though, can you explain to me what was happening before?

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 30 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

IE reserves space for the

IE reserves space for the text even when there is no text. Setting the font-size to 0 removed your gap.

maxl
maxl's picture
Offline
Regular
United States, Fort Collins, CO
Last seen: 12 years 42 weeks ago
United States, Fort Collins, CO
Timezone: GMT-6
Joined: 2007-06-25
Posts: 20
Points: 0

why does it need to

why does it need to 'reserve' space for text in the UL when text is going into LI elements in the first place and not the UL?