Posted by roy smith on December 8, 2008 at 11:00pm
Jump to:
| Project: | Contented7 |
| Version: | 6.x-2.x-dev |
| Component: | Miscellaneous |
| Category: | bug report |
| Priority: | normal |
| Assigned: | hswong3i |
| Status: | closed (fixed) |
Issue Summary
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)
| Attachment | Size |
|---|---|
| cicivic-screen.png | 116.24 KB |
| cicivic-screen-2.png | 125.55 KB |
Comments
#1
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.
#2
Did you find a solution?
posicionamiento en buscadores
#3
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
#4
Automatically closed -- issue fixed for 2 weeks with no activity.