Grow your CSS skills. Land your dream job.

Pulling my hair out what little I have Please Help

  • # March 15, 2012 at 5:49 pm

    If you have a look at this fiddle http://jsfiddle.net/AAqyf/ you will see the css and html I am working on. Now in chrome safari and firefox what a suprise it works fine apart from the odd little glitch. The issue is when I come to IE (Oh the shock lol). The ul li for the navigation throws it’s toys out of the pram. Can someone help me please with what I will need to put in the conditional style sheet to solve this issue please.

    Cheers guys
    Phil

    # March 15, 2012 at 6:22 pm

    I may not know what Im talking about and I don’t have IE with me so I can’t see whats wrong…
    is this ie8 or 9?

    I have barely looked but nav is not going to work in ie8 without adding some js or making nav into a block.
    I use this to help in IE before 9
    http://code.google.com/p/html5shiv/

    # March 15, 2012 at 6:36 pm

    @shamai The issue is that I have a unordered list that I have floated left and then put some styling on it for my navigation. IE is saying up yours to all my styling and so it’s not working at all.

    # March 15, 2012 at 7:28 pm

    @shamai Here is the exact section of the css and html for the section i am having trouble with

    CSS

    CSS
    nav ul a {
    display: block;
    margin: 0 auto;
    width: 194px;
    color: #292e37;
    background: #0d1524;
    font-size: 2em;
    text-decoration: none;
    font-weight: bold;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -ms-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    }
    nav ul a:hover {
    color: #0d1524;
    background: #292e37;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -ms-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -ms-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    }

    nav ul li {
    list-style-type: none;
    display: inline;
    float: left;
    text-align: center;
    border-left-color: #101010;
    border-left-width: 0.2em;
    border-left-style: solid;
    border-right-color: #101010;
    border-right-width: 0.2em;
    border-right-style: solid;
    border-bottom-color: #101010;
    border-bottom-width: 0.2em;
    border-bottom-style: solid;
    }

    HTML

    HTML
    # March 15, 2012 at 10:38 pm

    I’m assuming you’re talking about IE8 and below? If so, it won’t recognize the < nav> element. You’ll need to include something like the HTML5shiv to get that sorted out.

    # March 18, 2012 at 10:10 am

    I got it working now cheers guys. Ended up having to do a div with the id of nav

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".