Pulling my hair out what little I have Please Help

[Blackhawkso]

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

[shamai]

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/

[Blackhawkso]

@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.

[Blackhawkso]

@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





Page 1


Page 2


Page 3


Page 4


Page 5

[TheDoc]

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.

[Blackhawkso]

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

[Author]

Posts