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)

CommentFileSizeAuthor
cicivic-screen-2.png125.55 KBroy smith
cicivic-screen.png116.24 KBroy smith

Comments

roy smith’s picture

roy smith commented

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.

ernestto’s picture

ernestto commented

Did you find a solution?

posicionamiento en buscadores

hswong3i’s picture

hswong3i commented
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

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.