CODEWITHSUNDEEP
htmlcssnavigation
Jon Kyte
Jon Kyte

Reputation: 2020

Navigation UL in IE 7 and 8

I have created a website that I have almost completed and tested it in Firefox, chrome, safari, opera and IE 9 and they all work and look the same.

I used Adobe's Browser Lab to test the site on IE8 and IE7 and some of the CSS3 is broken which was bound to happen as it's not supported, however, my navigation seems to break and I cannot figure out why as to my knowledge I am using CSS2 declarations for it.

To see my navigation working here is a link to the code:

http://jsfiddle.net/6SkkP/

or here is the code: 

<div id="container">
<!--Start Navigation Section -->
    <header>
        <a href="index.html"><img src="http://www.jrk-design.co.uk/gl/images/logo.png" width=245 height=64 alt="Goldie Locks Logo" /></a> 
        <nav>
            <ul id="main_nav">
                <li><a href="index.html" id="index">home<p> a warm welcome</p></a></li>
                <li><a href="hair.html" id="hair">hair<p>hair extensions</p></a></li>
                <li><a href="beauty.html" id="beauty">beauty<p>beauty treatments</p></a></li>
                <li><a href="contact.php" id="contact">contact<p>drop me a line</p></a></li>     
            </ul>
        </nav>
    </header>
    </div>​

and my CSS:

header {
width: 910px;
height: 85px;
}

header img {
margin: 24px 0px 0px 0px;
}

nav {
height: 85px;
float: right;
text-align: center;
}

nav ul#main_nav {
padding: 0;
margin: 0;
}

nav li {
display: inline-block;
width: 132px;
height: 85px;
text-decoration: none;
text-transform: uppercase;
}

nav li a {
display: block; 
width: 132px;
height: 30px;
color: #b06e28;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
padding: 55px 0px 0px;  
}

nav li a p {
font-style: italic;
font-size: 14px;
color: #858585;
text-transform: lowercase;
padding: 0;
margin: 0;
}

a#index {
background-image: url(http://www.jrk-design.co.uk/gl/images/index_nav.png);
}

a#hair {
background-image: url(http://www.jrk-design.co.uk/gl/images/hair_nav.png);
}

a#beauty {
background-image: url(http://www.jrk-design.co.uk/gl/images/beauty_nav.png);
}

a#contact {
background-image: url(http://www.jrk-design.co.uk/gl/images/contact_nav.png);
}

ul#main_nav li a:hover {
color: #4c4c4e;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
background-position: 0;
}

body.index ul#main_nav li a#index {
background-position: 0;
}

body.hair ul#main_nav li a#hair {
background-position: 0;
}

body.beauty ul#main_nav li a#beauty {
background-position: 0;
}

body.contact ul#main_nav li a#contact {
background-position: 0;
}

Here is what my nav SHOULD look like:

Nav OK

And here is how it renders in IE7:

IE7

And IE8:

IE8

Also, I am using the HTML5 shiv

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

Can any one shine some light on my situation?

Thanks guys.

Upvotes: 0

Views: 477

Answers (4)

Manish Sharma
Manish Sharma

Reputation: 1720

The above two answers are right I want to add one more thing to that 

nav li {
display: inline-block;}

ie7 doesn't support the inline-block property so try

nav li {display:block; float:left} or some fall back for ie7

Upvotes: 1

JesperCodes
JesperCodes

Reputation: 294

If I was you, I would use a div as container for the navigation instead

Upvotes: 0

nixblu
nixblu

Reputation: 89

If the above doesn't work, just don't use the nav tag and just add a # to make it a div. Then put the html in to divs, 

<div id="nav">

etc.

Upvotes: 1

StuartM
StuartM

Reputation: 6823

I am not sure if IE7/8 handle the nav tag. Try adding the shiv to see if that resolves it.

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

If not, you might need to change nav to be then update the css for nav to be .nav

Upvotes: 1

Related Questions