Advanced Search

Results 1 to 2 of 2

Thread: Mega menu issue conflict IE-7

  1. #1
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Mega menu issue conflict IE-7

    hi all

    i m using this menu from sitepoint tutorials

    http://www.sitepoint.com/make-a-mega...u-with-jquery/

    and trying to add jquery rounded corners script with it

    http://jquery.malsup.com/corner/

    but they are not working in IE-7 together. Rollover your mouse over Stuff for him link on the page below

    http://wdpixels.com/coding/multicol/completed.html

    These both scripts works fine in IE-7 separately without any problem.

    vineet

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,708
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by vinpkl View Post
    These both scripts works fine in IE-7 separately without any problem.
    Well not really. The corner script via feature detection uses ordinary or proprietary CSS3 style for border-radius in those browsers that support it. As a result the color and anything else of whatever is beneath these corners shows through. For IE 8 and less it uses a series of tiny divisions with varying right and left border widths to simulate rounded corners. It attempts to match the color of these borders to what it sees as the background color of what it sees as being behind the element to which it's applying these corners. And this isn't done perfectly in complex situations like if the background of the top corners is different to that of the bottom corners or even (as in this case) if the first top corner tiny div has a different background than most of the rest. As a result, even if it worked, these corners would be the color of the menu bar, not white as they should be in this situation, except for the very top one or so, which should be the color of the menu bar.

    That's even if it worked. It doesn't work at all though because these tiny divs are all within the mega menu which has its own style rules for divs found within it. I was able to get it to 'work' by changing all the hard coded divs in the mega menu to spans and changing all references in the stylesheet to div to span. But as I say, the color of these tiny divs' borders was off. I could easily switch them all to white, but then the ones at the very top were off. In IE 7 there was also a problem with the positioning of the drop down, it was too high, adding top margin to the megam element corrects that though,

    Anyways, for one particular menu by using a complicated combination of conditional styles for each of IE 8 and 7 and setting the border colors of these tiny divs more precisely in javascript, this could probably be made to work in those browsers, as long as there aren't any other colors behind the drop downs than just white and the menu bar color. But should the layout or colors change it would have to be done over. Or if there were to be text, other colors, and/or images behind the drop downs, things would still look bad. So may advice is (especially since the market share of IE 8 and 7 is rapidly dwindling) to disable these corners in IE 8 and 7. Where the page has this:

    Code:
    	<script type="text/javascript">
    $(document).ready(function(){
    $("#megam").corner();
    });
    </script>
    Make it like so:

    Code:
    	<script type="text/javascript">
    $(document).ready(function(){
    var ie;
    if((ie = /MSIE (\d+)/.exec(navigator.userAgent)) && ie[1] < 9){return;}
    $("#megam").corner();
    });
    </script>
    Edit: It occurs to me:


    It might be possible that the corners script could be rewritten to use span instead of div and perhaps inverted so that the tiny divs (now spans) would be background transparent and their borders match the background color of the element that they're applied to. But again, considering the fact that both IE 8 and 7 are used less and less all the time and are already used very little, the best approach would be as I have stated, to disable the corner scri[t when used with this menu in those browsers.

    Here's a demo of how it can be done with the existing corners script. But notice how in complying browsers that the input button isn't covered by the upper left corner. In IE 8 and 7 it is. And if you toggle the background in a compliant browser, the corners remain transparent. But in IE 8 and 7 you can see they're white, have been all along:

    http://home.comcast.net/~jscheuer1/s.../hover-4-h.htm

    It's because of that behavior that I recommend simply disabling the corners in IE 8 and 7.
    Last edited by jscheuer1; 11-24-2012 at 03:54 PM. Reason: add speculation and demo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. DD Mega Menu Help
    By KRAZA1 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-15-2012, 11:49 AM
  2. Mega Menu questions
    By lio in forum Dynamic Drive scripts help
    Replies: 15
    Last Post: 10-08-2011, 06:24 PM
  3. Resolved DD Mega Menu getting cut off
    By alaska in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-04-2011, 02:58 PM
  4. DD Mega Menu with php
    By Rambaldi in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-11-2011, 01:39 PM
  5. DD Mega Menu script
    By dynasty in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-20-2011, 12:47 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •