Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    25
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Drop Down Menu Submenu Alignment Problems

    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

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by chrisfromboji View Post
    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.
    Code:
    #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/BrowserBugsSe...AbsPosBug.html

  • #3
    New Coder
    Join Date
    Jul 2007
    Posts
    25
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •