Geek asks and answers

CSS menu aligns left in IE7 - as the central menu in all browsers (IE7, IE8, firefox, ect)

I am having problems with this menu: http://www.krillhome.com/home1.html

The problem is that in IE 7 the css menu is left-aligned where I need it to be centered. When I add align="center"to the div, this fixes the problem in IE7, however it then pushes the entire menu to the right by about 20 pixels in every other browser.

I thought that maybe my fields were turned off, but they look normal. I was hoping to add <!--[if lt IE 7 ]> <div class="nav-wrap" align="center"> <![endif]-->, but that doesn't work either.

Here's what it looks like in IE7: http://www.krillhome.com/incorrect.png (pay attention to left alignment)

+3
source share
2 answers

I noticed that your menu is actually not focused, it just has the remaining addition (inherited from the default browser styles, most likely). uldid not delete it. Try adding these styles:

.nav-wrap { text-align:center }
.nav-wrap ul { padding:0 }

Give it a try and see if it centers your menu. It works in Firefox for me. You can use instead display:block;margin:0 auto;width:***px.

Some comments "in their own way":

Since you already have IE conditions that add classes to the tag <html>for different versions of IE, you can target these browsers as follows:

html.ie7 {/* some rule for IE7 */}

, HTML5, HTML " " ( ). align . CSS.

JavaScript. Firebug. CSS reset.

+1

text-align:center UL IE7. , ( ), .

EDIT: CSS Internet Explorer 7:

<!--[if lte IE 7]> <link rel="stylesheet" href="..." type="text/css"> <![endif]-->
0

More articles:


All Articles