Primary links menu disconnected from banner on Firefox [#344551]

I'm just starting to play with Drupal 6.6 for a new site I'm doing. I tried Contented7 6.x-2.14. My site displays fine on Safari (Version 3.2.1 (5525.27.1) for OSX), but when I view it on Firefox 3.0.4 (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4), the primary links menu is disconnected from the banner. I'm attaching a screen shot (cicivic-screen.png) to illustrate the problem.

If I reduce the type size enough (Command-Minus), eventually the menu merges back into the banner (cicivic-screen-2.png)

Comment	File	Size	Author
	cicivic-screen-2.png	125.55 KB	roy smith
	cicivic-screen.png	116.24 KB	roy smith

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

roy smith CreditAttribution: roy smith commented 9 December 2008 at 00:20

I've played with this a bit more and understand better what's going on. I can make it happen on both Firefox and Safari. All you have to do is adjust the font size and/or the window width such that total width of the site name ("City Island Civic Association") and the primary links menus titles ("About Minutes Committees Membership Community") exceeds the width of the column.

My knowledge of CSS is pretty minimal, but from what I can see, the "primary-links" div doesn't float under the "slogan-floater" div.

Comment #2

ernestto CreditAttribution: ernestto commented 2 March 2009 at 10:43

Did you find a solution?

posicionamiento en buscadores

Comment #3

hswong3i CreditAttribution: hswong3i commented 21 April 2009 at 13:23

Version:	6.x-2.14	» 6.x-2.x-dev
Assigned:	Unassigned	» hswong3i
Status:	Active	» Fixed

It is now get fixed within http://drupal.org/cvs?commit=200176. Some code snippet as reference:

@@ -350,8 +366,14 @@ ul.links li.upload_attachments {
   padding: 0 10px;
 }
 #wrapper #container #header {
+  position: relative;
   height: 100px;
 }
+#wrapper #container #header #logo {
+  position: relative;
+  line-height: 0;
+  z-index: 2;
+}
 #wrapper #container #header #logo img {
   float: left; /* LTR */
   margin: 10px 0 0 10px; /* LTR */
@@ -362,9 +384,20 @@ ul.links li.upload_attachments {
   padding: 0;
 }
 #wrapper #container #header #slogan-floater .site-slogan {
+  position: relative;
   float: left; /* LTR */
   clear: both;
 }
+#wrapper #container #header #slogan-floater .site-name {
+  position: relative;
+  z-index: 2;
+}
+#wrapper #container #header ul.primary-links {
+  position: absolute;
+  right: 0; /* LTR */
+  bottom: 0;
+  z-index: 2;
+}
 /* With 3 columns, require a minimum width of 1020px to ensure there is enough horizontal space. */
 body.two-sidebars {
   min-width: 980px;

Code tested among IE6/7/8, FF2/3/3.1, Opera9.51/9.64, Safari3.22/4beta. Well... IE6 coming with very tiny position (margin/padding) problem... Let's forget IE6 :D

For more detail technical information, please refer to https://developer.mozilla.org/En/Understanding_CSS_z-index