[Solved] Ul Navigation all wrong in IE7

[guirigales]

Hello All.

I am putting together a site which so far is testing OK in Firefox, Safari, Chrome IE8 etc but in IE7 the navigation and language flags are stepping horizontally down.

Heres the css.

/* Navigations*/



ul#languages{

display: inline;

position: relative;

height: 20px;

}

ul#languages li a{

display: block;

text-indent: -9999px;

float: right;

margin-top: 28px;

height: 20px;

}

#centered_header .english{

background-image: url(../images/english_flag.jpg);

background-repeat: no-repeat;

width: 35px;

height: 20px;

text-decoration: none;

}

#centered_header .english:hover{

background-image: url(../images/english_flag_bw.jpg);

background-repeat: no-repeat;

width: 35px;

height: 20px;

text-decoration: none;

}

#centered_header .german{

background-image: url(../images/german_flag.jpg);

background-repeat: no-repeat;

width: 35px;

height: 20px;

text-decoration: none;

}

#centered_header .german:hover{

background-image: url(../images/german_flag_bw.jpg);

background-repeat: no-repeat;

width: 35px;

height: 20px;

text-decoration: none;

}

#centered_header .spanish{

background-image: url(../images/spain_flag.jpg);

background-repeat: no-repeat;

width: 35px;

height: 20px;

text-decoration: none;

}

#centered_header .spanish:hover{

background-image: url(../images/spain_flag_bw.jpg);

background-repeat: no-repeat;

width: 35px;

height: 20px;

text-decoration: none;

}

#navbar{

display: block;

clear: both;

position:relative;

height: 57px;

}

#navbar li a{

text-indent: -9999px;

float: right;

margin-top: 13px;

}

ul#navbar li a.home{

width: 125px;

height:57px;

background: url(../images/nav_home1.jpg);

background-position:top center;

background-repeat: no-repeat;

}

ul#navbar li a.contact{

width: 173px;

height:57px;

background: url(../images/nav_contact1.jpg);

background-position:top center;

background-repeat: no-repeat;

margin-left: 6px;

}

ul#navbar li a.promotions{

width: 162px;

height:57px;

background: url(../images/nav_promotions1.jpg);

background-position:top center;

background-repeat: no-repeat;

margin-left: 16px;

}

ul#navbar li a:hover{

background-position: bottom center;

}



/* navigations Ends*/

Heres a link to the page.

http://stgeorge.easypeasydesign.com/

If anyone can point me in the right direction I´d appreciate it.

Cheers
Guirigales

[guirigales]

I have managed to correct the fault, I just wish I knew how.
Thanks

[zackw]

The problem is because you were floating the anchor link in the list and not the li’s themselves
when making a navigtation using a list and list items (which is the proper way in my opinion) also use the list itself and the list items to determine positioning.. also check out css shorthand.. i think chris has a good tutorial on it in his screencasts
where u declare

background: url(../images/nav_promotions1.jpg);

background-position:top center;

background-repeat: no-repeat;

u could easily instead say

background:url(../images/nav_promotions1.jpg) no-repeat top center;

BAM 1 line of css and u declare all 3 things in an easy to read manner.

[guirigales]

Many thanks Zackw. Very kind

[Author]

Posts