...

View Full Version : Drop Down Menu Submenu Alignment Problems



chrisfromboji
07-14-2007, 02:16 AM
In firefox my drop down menus work and look fine. But, when I'm testing using IE, the drop down menus appear to start half way over instead of directly below the category they appear below.

Anyone have any ideas?
My website: 12.218.126.198/index2.html
CSS: 12.218.126.198/style.css (this contains the css for the nav and drop down menu)

Thanks!
-Chris

koyama
07-14-2007, 03:09 AM
In firefox my drop down menus work and look fine. But, when I'm testing using IE, the drop down menus appear to start half way over instead of directly below the category they appear below.

Anyone have any ideas?
My website: 12.218.126.198/index2.html
CSS: 12.218.126.198/style.css (this contains the css for the nav and drop down menu)
The problem is that, due to a bug, IE6/7 will center a block-level element under text-align: center. This also happens for absolutely positioned elements with auto offsets in both IE6 and IE7. In IE7 the situation has got somewhat better so that if you specify explicit offsets then the element is positioned correctly [1].

Because you have set text-align: center for your first-level list items your second level menu is displaced because it is absolutely positioned with auto offsets. Since your anchor elements are block-level and are as wide as their parents you can solve the problem by moving text-align: center to the anchor elements instead. Since the second-level menu is not nested within the first-level anchor elements it will not be affected by the text-align: center set for those.


#nav li {
display:inline;
background-color:#245882;
width:120px;
height:22px;
float:left;
margin-left:4px;
/* text-align:center; */
}
#nav a {
width:120px;
height:19px;
padding-top:3px;
text-decoration:none;
color:#a5cae5;
font-weight:800;
display:block;
text-align:center;
}

[1] http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/TextAlignCenterAbsPosBug.html

chrisfromboji
07-14-2007, 03:47 AM
thank you! it works like a charm. i'm still very new to css and am trying to figure out how it all works so you've been a huge help to me!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum