...

View Full Version : Vertical Menu Alignment Problems



chrisfromboji
07-14-2007, 09:30 PM
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. (http://www.codingforums.com/showthread.php?p=587977#post587977)

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. (http://www.codingforums.com/showthread.php?p=587977#post587977)

Image 1: (IE7)
http://img413.imageshack.us/img413/5171/ienormnk5.png
Image 2: (Firefox)
http://img57.imageshack.us/img57/3074/firefoxprobvr9.png

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)

koyama
07-14-2007, 10:43 PM
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:


.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.

#content {
overflow: hidden;
}


[1] http://www.andybudd.com/archives/2003/11/no_margin_for_error/ (First half of article has a good explanation of margin collapsing.)

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum