开发者

CSS menu align left in IE7 - how to center menu in all browsers (IE7, IE8, firefox, ect)

开发者 https://www.devze.com 2023-03-08 02:24 出处:网络
I\'m having trouble with this menu:http://www.krillhome.com/开发者_运维百科home1.html The problem is that in IE 7 the css menu aligns to the left, where I need it centered. When I add align=\"center\

I'm having trouble with this menu: http://www.krillhome.com/开发者_运维百科home1.html

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

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

This is how it looks in IE7: http://www.krillhome.com/incorrect.png (note the menu aligned left)


I noticed is that your menu is not actually centered, it just has some left padding (inherited from the default browser styles most likely). The ul has not had it's padding removed. Try adding these styles:

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

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

Some "by-the-way" comments:

Since you already have the IE conditionals adding classes to the <html> tag for different versions of IE, you can target those browsers like so:

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

I see you have the HTML5 doctype, but you have a lot of "old-school" (aka deprecated) HTML attributes. align is not valid and has not been for a while. I would highly suggest removing those completely and sticking to just CSS.

There are some javascript parse errors there as well. You should get aquianted with Firebug. Also have a look at a CSS reset.


Applying text-align:center to the UL will center-align it in IE7. It doesn't seem to affect that small green bar (which remains aligned to the left), but the list items themselves are centered.

EDIT: You can use conditional comments to apply this CSS only in Internet Explorer 7:

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

精彩评论

暂无评论...
验证码 换一张
取 消