Why is it not working as intended in IE 7?

Question

Intended Behavior of The Navigation

IE7 Behavior of the Navigation

Due to Intellectual Property issues with the client I just can't discuss any code.

There is a line or space between two LI tags in IE7 which are not present in Firefox or Chrome.

I tried very hard to detect where is the problem. I think after 6 hourse of try. So any fresh ideas would be helpful.

Can't you distil the problem into a subset and show us that? — Lee Taylor, Sep 13 '12 at 21:13
yes that is correct. I will try and edit the question as much as possible. — Dhruvenkumar Shah, Sep 13 '12 at 21:14
You know HTML & CSS are going to be public anyway once the site is deployed, it's the nature of the web... — elclanrs, Sep 13 '12 at 21:14
I'll think this is a IE6/7 specific Bug called whitespace Bug — Jan Wiemers, Sep 13 '12 at 21:14
Yes whitespace is normalized but significant in XML and therefore many browsers — Matt Whipple, Sep 13 '12 at 21:17
As I rembember this can be fixed by margin:0, padding:0 and overflow:hidden you force all LI tag to be touched — Alberto León, Sep 13 '12 at 21:31
this is tagged `css3`, but IE7 doesn't support any CSS3 features. — Spudley, Sep 13 '12 at 21:32
@Spudley I am so sorry. I will remove the tag. #ALL Thanks for your help. SO Rocks. — Dhruvenkumar Shah, Sep 13 '12 at 21:38
@DhruvenkumarShah Look into a lightweight CSS reset to set some the defaults a lot of browsers tend to vary on. Yahoo YUI 2's, I think was a decent one. — Erik Reppen, Sep 13 '12 at 21:46
@BillyMoat Yes I am using floats. but not for the elements which are coming in dropdown. they are the top level elements. THIS BEHAVIOR is also just when I hover over my mouse not otherwise. It is working fine otherwise. — Dhruvenkumar Shah, Sep 14 '12 at 13:17
I suspect IE might be having problems with CSS the `line-height`, `margin` or `padding` properties. However, without the actual code it's impossible to tell. — user2428118, Sep 17 '12 at 10:23

score 2 · Accepted Answer · answered Sep 17 '12 at 10:19

First, try to integrate a good CSS Reset (good one you can found on www.html5boilerplate.com ).

Second, I can only suppose menu CSS/HTML code (why you don't publish here the code? When is online, EVERY person can read your css/js/html code!):

HTML:

<div class="menu">
  <ul>
     <li>menu item</li>
     <li>menu with subitem
         <ul>
            <li>sub menu item</li>
            ...
         </ul>
     </li>
     ...

CSS:

.menu ul {
   ...

}

I can suggest this kind of reset:

.menu ul, .menu li {
   margin: 0 !important;
   padding: 0 !important;
   display: block;
   list-style: none;
}

and try to obtain other padding/spacing with sub elements (span, a, ecc.).

I think the problem got solved it had some client side css missing so after including those, it did solve the problem. THANKS A LOT. — Dhruvenkumar Shah, Sep 17 '12 at 13:51

Why is it not working as intended in IE 7?

1 Answers1