/    Sign up×
Community /Pin to ProfileBookmark

IE7 spacing issue

Can anyone help me understand why IE7 is adding extra space onto second level menu items on this page, [URL=”http://www2.ccboe.com/piccowaxen/”]http://www2.ccboe.com/piccowaxen/[/URL]

I’ve gone through just about all of the CSS I can and have not been able to find the problem. I’m assuming it’s conflicting CSS because I have a menu CSS document but also a CSS document for the positioning of that menu. Not sure if anyone will be able to help me out or not, but I thought I’d give it a shot!

to post a comment
CSS

1 Comments(s)

Copy linkTweet thisAlerts:
@WebJoelJul 04.2008 — <div id="box1">

<h2>Menu</h2>
[B][SIZE="4"]<p>[/SIZE][/B] <div class="ktcssmenu savvynav_piccowaxen"><div class="ktvertical ktopts_showtimeout_100 ktopts_hidetimeout_100 ktopts_imgreplace_no ktopts_imgreplacestyle_img ktopts_imgdir_ ktopts_imgnames_">

<ul class='lev1 clearfix'><li class="lev1 pos1 lev1_pos1 first lev1_first"><a href="/piccowaxen/" class="lev1 pos1 lev1_pos1 first lev1_first" target="_self">Home</a></li>

<li class="lev1 pos2 lev1_pos2"><a href="http://database.ccboe.com/staff/FMPro?-db=allemp.FP3&-format=search_results.htm&-Script=find_picco&-max=250&-FindAll" class="lev1 pos2 lev1_pos2" target="_
new">Staff Email</a></li>

<li class="lev1 pos3 lev1_pos3"><a href="/piccowaxen/administration/" class="lev1 pos3 lev1_pos3" target="_self">Administration</a></li>

<li class="lev1 pos4 lev1_pos4 haschildren lev1_haschildren"><a href="/piccowaxen/news/" class="lev1 pos4 lev1_pos4 haschildren lev1_haschildren" target="_
self">What's New</a><ul class='lev2'><li class="lev2 pos1 lev2_pos1 first lev2_first"><a href="/piccowaxen/news/sixth.cfm" class="lev2 pos1 lev2_pos1 first lev2_first" target="_self">6th Grade News</a></li>

<li class="lev2 pos2 lev2_pos2"><a href="/piccowaxen/news/seventh.cfm" class="lev2 pos2 lev2_pos2" target="_
self">7th Grade News</a></li>

<li class="lev2 pos3 lev2_pos3"><a href="/piccowaxen/news/eighth.cfm" class="lev2 pos3 lev2_pos3" target="_self">8th Grade News</a></li>

<li class="lev2 pos4 lev2_pos4 last lev2_last"><a href="/piccowaxen/news/media.cfm" class="lev2 pos4 lev2_pos4 last lev2_last" target="_
self">Media Center News</a></li>

</ul></li>

<li class="lev1 pos5 lev1_pos5"><a href="/piccowaxen/calendar/" class="lev1 pos5 lev1_pos5" target="_self">Event Calendar</a></li>

<li class="lev1 pos6 lev1_pos6 last lev1_last"><a href="/piccowaxen/departments/" class="lev1 pos6 lev1_pos6 last lev1_last" target="_
self">Departments</a></li>

</ul></div></div>[B][SIZE="4"]</p>[/SIZE][/B][/QUOTE]
Why is this whole thing wrapped in a paragraph tag?

This is a overly-complicated navigation imo. It appears that there is "line-height" being invoked, line-height is associated with "<p>" text, and this whole thing is, according to this code, [I]text[/I]. That may work but...

You could first try "line-height:0.9em;" to this opening "<p>" and see if this 'shrinks' the height of the textual spacing... It may also shrink the height of the "<li>" if they are not explicitly-stated. Adding "display:block;" to the "<a>"s inside of "<li>" will make the whole area 'clickable', if this issue comes up.

I am still digesting this... like I said, -overly complex.. :p
×

Success!

Help @ssprouse spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...