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 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    25
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Vertical Menu Alignment Problems

    You (the forum) helped answer my first css question, but it seemed that the answer changed my menu's vertical alignment. I don't know how to keep the same affect within the css as achieved here.

    In IE7 the nav menu spacing looks fine as in image 1 below. But with firefox the nav menu spacing doesn't look correct (image 2). I want to achieve a vertical centering of the nav menu in both firefox and ie7 while keeping the solution reached here.

    Image 1: (IE7)

    Image 2: (Firefox)


    Once again,
    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)
    Last edited by chrisfromboji; 07-14-2007 at 10:33 PM.

  • #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 IE7 the nav menu spacing looks fine as in image 1 below. But with firefox the nav menu spacing doesn't look correct (image 2).
    It is IE6/7 that is rendering the page incorrectly. That gap has nothing to do with your menu. It is coming from here:
    Code:
    .post {
    	margin-top:20px;
    }
    You need to read about margin collapsing [1] to understand why the top margin of .post should stick out of #content.

    In IE6/7, triggering hasLayout [2] is quite much like establishing a new block formatting context. Among other things this means that margin collapsing does not happen with the inner elements.

    Generally, to get around margin collapsing, you can use padding-top instead of margin-top. As mentioned, a cleaner method may be to use overflow: hidden on #content.
    Code:
    #content {
    	overflow: hidden;
    }
    [1] http://www.andybudd.com/archives/200...gin_for_error/ (First half of article has a good explanation of margin collapsing.)

    [2] http://www.satzansatz.de/cssd/onhavinglayout.html


  •  

    Posting Permissions

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