www.webdeveloper.com
Results 1 to 2 of 2

Thread: CSS Menu does not display correctly in IE but looks great in FireFox and Chrome

Hybrid View

  1. #1
    Join Date
    Mar 2013
    Posts
    2

    CSS Menu does not display correctly in IE but looks great in FireFox and Chrome

    I created a menu that looks great in Chrome and in Firefox.
    When I view it in IE 9 or 10 the menu has a completely different look (I do not have IE8)
    The seond series of menu options should fall straight down under the first row with no cascading of buttons like they do in FireFox or in Chrome.
    In IE they move to the right significantly. Also it adds ugly padding between each menu option.

    Please view my code and see what might be causing this in IE or what might be missing. Any help would be greatly appreciated.
    Website can be found here : http://www.nfipiservice.com/NFC/nfc2013/TEST/

    My CSS is this

    @charset "utf-8";



    .SuperMenu {
    width: 960px;
    }

    /* Menu CSS */

    #menu192id15, #menu192id15 ul, #menu192id15 ul li, #menu192id15 ul li a{
    padding: 0;
    margin: 0;
    line-height: 1;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: white;
    -webkit-transition: all ease .3s;
    -o-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -ms-transition: all ease .3s;
    transition: all ease .3s;

    }

    #menu192id15:before, #menu192id15:after, #menu192id15 > ul:before, #menu192id15 > ul:after {

    content: "";
    display: table;

    }


    #menu192id15:after, #menu192id15 > ul:after {

    clear: both;

    }

    #menu192id15 a{


    }

    #menu192id15 ul{
    -o-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
    /* [disabled]-moz-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15); */
    -ms-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
    width: 960px;
    text-align: center;
    background-color: #EEE;
    }
    #menu192id15 li {
    float: left;
    display: block;
    }


    #menu192id15 ul > li{
    float: left;
    list-style: none;
    width: 160px;

    }

    #menu192id15 ul > li > a{
    display: block;
    text-decoration: none;
    position: relative;
    color: #00508F;
    font-weight: normal;
    line-height: 20px;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #EEE;
    text-align: center;
    padding-top: 10px;
    padding-right: 2px;
    padding-bottom: 10px;
    padding-left: 2px;
    border: 0.25px solid #E2E2E2;
    }

    #menu192id15 ul > li > a:hover{
    -webkit-box-shadow: inset 0 0 1px #1f325d;
    -o-box-shadow: inset 0 0 1px #1f325d;
    -moz-box-shadow: inset 0 0 1px #1f325d;
    -ms-box-shadow: inset 0 0 1px #1f325d;
    -webkit-transition: all ease .3s;
    -o-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -ms-transition: all ease .3s;
    transition: all ease .3s;
    background-color: #9CF;
    color: #FFF;

    }

    #menu192id15 ul > li > a:hover:before{
    content: "";
    z-index: 2;
    position: absolute;
    border: 1px solid white;
    border-top: 0;
    border-bottom: 0;
    border-right: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: -1px;
    opacity: .2;
    text-align: center;

    }

    #menu192id15 ul > li > a:hover:after{
    content: "";
    z-index: 2;
    position: absolute;
    border: 1px solid white;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    right: -1px;
    opacity: .2;
    text-align: center;

    }

    #menu192id15 > ul > li > ul{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 160px;

    }

    #menu192id15 > ul > li:hover > ul{

    opacity: 1;
    visibility: visible;
    position: absolute;
    border-radius: 0 0 3px 3px;

    }

    #menu192id15 > ul > li > ul{
    width: 160px;
    position: absolute;

    }

    #menu192id15 > ul > li > ul > li{
    float: none;
    position: relative;
    padding-top: 0px;

    }
    #menu192id15 > ul > li > ul > li > a {
    background-color: #CCCCCC;
    color: #00508F;
    }
    #menu192id15 > ul > li > ul > li > a:hover {
    background-color: #3399CC;
    color: #FFF;
    }


    #menu192id15 > ul > li > ul > li > ul{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    }

    #menu192id15 > ul > li > ul > li:hover > ul{
    opacity: 1;
    visibility: visible;
    position: absolute;

    }

    #menu192id15 > ul > li > ul > li > ul{
    left: 160px;
    top: 1px;
    width: 160px;

    }

    #menu192id15 > ul > li > ul > li > ul > li{
    float: none;
    padding-top: 0px;

    }
    #menu192id15 > ul > li > ul > li > ul > li > a{
    background-color: #ECF4FF;
    border: 0.25px solid #E2E2E2;
    }

  2. #2
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,208
    CSS errors Ignore proper CSS 3 rules that may be flagged.

    Tried checking HTML errors several times, but got this each time:
    I got the following unexpected response when trying to retrieve <http://www.nfipiservice.com/NFC/nfc2013/TEST/>:

    500 Can't connect to www.nfipiservice.com:80 (connect: Connection timed out)

    If you made recent changes to your domain name (DNS) configuration, you may also want to check that your domain records are correct, or ask your hosting company to do so.
    Might help...

    Websites Shouldnít Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html
    Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/new...-with-prefixr/
    Responsive Web Design Demystified: http://www.elated.com/articles/respo...n-demystified/
    Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/respo...-5-handy-tips/
    Itís Not Responsive Web Building, Itís Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/

    Beginnerís Guide to Responsive Web Design: http://thinkvitamin.com/design/begin...ve-web-design/
    What The Heck Is Responsive Web Design? (A super-impressive CSS3 presentation built on impress.js, demonstrating the basics of Responsive Web Design): http://johnpolacek.github.com/WhatTh...ressjs/#/title
    Creating Responsive HTML5 Touch Interfaces: http://www.youtube.com/watch?v=lcD9CF0bxyk
    Responsive Images: How they Almost Worked and What We Need: http://www.alistapart.com/articles/r...-what-we-need/
    Responsive Tables: http://www.zurb.com/playground/responsive-tables

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles