Padding not working well in IE9

Discussion in 'HTML & Website Design' started by Kaleem Ullah Hashmi, Jan 12, 2015.

0
  1. #1
    Top navigation menu with drop down works perfectly in IE8 but in IE 9 it didn't support padding or height as it has to be. When i adjust it according to IE9 then in IE8 extra height appear.

    check this link:

    http://moghulweb.com/KLB/

    Here is my CSS:

    .navigationlink{margin-left:10px; font-family:Arial;}

    .navigationlink ul {
    /*text-align: left;*/
    display: inline;
    margin: 0;
    padding: 15px 4px 17px 0;
    list-style: none;

    }
    .navigationlink ul a {color:#fff; text-decoration:none; font-size:12px;}
    .navigationlink ul span{display:block; text-align:center; font-size:9px;}
    .navigationlink ul li {


    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 14px 13px;
    /*background: #fff;*/
    /*cursor: pointer;*/
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    text-align:center;
    border-right:1px solid #000;
    }
    .navigationlink ul li:last-child {border-right:none;}
    .navigationlink ul li:hover {
    background: #8f4201;
    color: #fff;
    }
    .navigationlink ul li ul {
    padding: 0;
    position: absolute;
    top: 55px;
    left: 0;
    width: 200px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;

    }
    .navigationlink ul li ul li {
    background: #8f4201;
    display: block;
    color: #fff;
    text-align:left !important;
    /*text-shadow: 0 -1px 0 #000;*/
    }
    .navigationlink ul li ul li:hover { background: #c66202;}
    .navigationlink ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
    }

    You can see there is extra space appear in IE9.

    Does anybody have solution of that. Its Urgent plz help me.
     
    Kaleem Ullah Hashmi, Jan 12, 2015 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    <!DOCTYPE html>
    <!--[if IE 7]>
    <html class="ie ie7" lang="en-US">
    <![endif]-->
    <!--[if IE 8]>
    <html class="ie ie8" lang="en-US">
    <![endif]-->
    <!--[if !(IE 7) & !(IE 8)]><!-->
    <html lang="en-US">
    <!--<![endif]-->

    Those are the top lines of moghulweb.com/KLB, the IE's conditional-statements. Looks ok. Non-IE won't parse any of them and just print <html lang="en-US">. However, IE.9 and up won't print anything because the last one is commented out. So maybe the red tags shouldn't be there?
     
    Last edited: Jan 12, 2015
    hdewantara, Jan 12, 2015 IP
  3. Kaleem Ullah Hashmi

    Kaleem Ullah Hashmi Active Member

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    56
    #3
    no it didn't work
     
    Kaleem Ullah Hashmi, Jan 13, 2015 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    When you set display:inline on a block level element (like UL) it becomes VERY inconsistent cross-browser. Setting vertical-align to top or bottom (you'll have to play with it) may address the issue slightly, but generally I wouldn't trust it.

    Legacy IE CANNOT make non-inline level elements display:inline-block; -- as such you probably shouldn't be setting it there. A haslayout trigger and display:inline on the LI may be better, with any actual styling being put inline-block on your anchors instead.

    Generally speaking though, you really don't have viable markup OR design concepts there -- fixed metric fonts, fixed layout, no media targets on your LINK, scripttard banner with jquery bloated goofiness, little if anything resembling proper semantics (a laugh when HTML 5 is being thrown at it willy-nilly), static CSS in the markup, overstuffed meta, endless pointless DIV and classes for NOTHING -- though much of that is just that it's your typical turdpress garbage; The people behind turdpress and the halfwits making templates for it not knowing enough about HTML or CSS to be making websites for anyone; see:
    <div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-30">
    Code (markup):
    Made more sense last time I farted...
     
    deathshadow, Jan 13, 2015 IP