If a web page with drop-down menus is not displaying correctly on iPad or iPhone with the Safari web browser the cause may be that the browser on these devices may not support the :after pseudo-class.
A common CSS construct that is in use is the :after pseudo-class. It's a rather useful construct to prevent issues where you might have a dropdown menu but elements below the dropdown menu end up pushed to the side or text is wrapping around when they it should not.
I was so busy writing the article I forgot to include my code example! I've added it to the end. True is the saying ... The one escaping from the lion (of deadlines) falls to the bear (of forgetting).
The elements are behaving as if the portion of these menus that drop down are on the same stacking order (z-order) - thus they move aside.
The fix for this is to apply the attribute clear:both to the element immediately following the menu element so that it ignores the menu items and falls naturally where it ought to in the page.
There are three ways to do this...
1. Insert a div with the following code immediately after the menu elements.
While this works, its not the best approach to solving the problem. Its too easy to forget to insert it, or forget it's there so months later someone who doesn't know what this div does may remove it and suddenly you got a problem and You don't know why.
2. Insert the following attribute into the CSS for the element below the menu: clear:both.
3. Use the :after pseudo-class in your CSS file to cause the menu element to apply the clear:both attribute to the first element that follows the menu element. You simply add the clearfix class to your menu element using something like this ...
and then in your CSS you put the following code:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
The nice thing about this is you have only to repeat this code once, and for any additional menus you add, you simply need to add the class="clearfix" to your menus and the elements below will now render in their proper place.
The problem and the reason for this blog is that currently Safari for iDevices does not appear to support this. Also it is not supported by IE7 and earlier. There are methods that does work for IE5-7 and you will find all you need to know in the url cited below. It really is a good read.
I ran into this issue using Zen based themes in Drupal 6 and like many bugs its a bit difficult to find help for on Google at the time of this writing. So in the interest of saving others the head-scratching and in hopes that this solution might show up in google when someone else runs into this I decided to write about this as my first technical blog.
You can read more about this and some other really interesting web tips and tricks at the url below.
http://www.positioniseverything.net/easyclearing.html
If you have any questions, feel free to email me under contact me or request an account, and you will be able to comment and ask questions on this site.
Enjoy!
Code sample ...
And here is my css files and the html for a complete example. Copy the code into a directory or folder to see it run.
The css file: style.css
a {
color: black;
}
a:visited {
font-weight: normal;
font-style: italic;
color: purple;
}
a:hover {
text-decoration: none;
color: black;
font-weight: bold;
}
a:active {
background-color: navy;
color: aqua;
}
body {
text-align: center;
color:white;
font-family: georgia,verdana, geneva,ariel,hevetica,sans-serif;
background: aliceblue url('backgroundStrip.jpg') repeat;
}
.content {
width:785px;
}
.clearfix { /* This to prevent invisible menu dropdowns from pushing this class of elements around*/
clear:both;
}
/* Beginning of stuff relating to the actual dropdowns. */
.headerText {
color:whitesmoke;
position: relative;
top:7px;
text-decoration: underline;
}
/* Styles from the suckerfish menu example. */
/* This controls the start of the menu, even tho top position of the header top.*/
.menu {
border:none;
z-index:999; /*Ensure menu pops up in front of all other items*/
height:30px;
}
.menu, .menu ul {
padding: 0;
margin: 0; /* We don't want gaps between menu items. These would cause a collapse */
list-style: none; /* No bullets */
}
.menu a {
border-top:1px solid black; /* Put a line between menu items. */
display: block;
padding: 0;
width: 210px;
background-color: tan;
}
.menuLink {
position: relative;
padding: 0 0 0 0;
}
.menuLinkText {
position: relative;
text-align: center;
}
.menu li ul {
position: relative;
/*left: -999em; *//* This addresses the actual menu items not headers. */
visibility: hidden; /* Traditionally, the menus were hidden by positioning them off screen but hiding works too. */
height:0; /* If we don't put this here hovering over the hidden menu items to react to hover and becoem visible. We want
the menus to be revealed by hovering over the headers at first.
*/
}
.menu li:hover ul, .menu li ul:hover { /* This causes the menu items to come on screen.*/
/*left:auto;*/ /* When this hovers it puts the menu items where they belong.*/
visibility: visible;
line-height: 20pt;
height:30px;
}
/* These two control the position of the menus */
#coolLinksMenu {
position:relative;
float: left;
}
#coolVideosMenu {
position:relative;
float: right;
}
/*These below are for the headers which are not links at all*/
#coolLinksHeader, #coolVideosHeader {
position:relative;
color:black;
font-weight: bold;
text-decoration: none;
width: 210px;
height:30px;
background-color:black;
}
CSS for IE differences: iestyles.css
/* IE 7 and earlier leaves gaps between the menu elements which causes the menus to collapse on mouse over.*/
.menu li {
margin:-3px;
top:2px; /* This could probably be done better with padding.*/
}
And finally, the index.html. Apologies for this being un-necessesarily long. I stripped this down from an old web page I wrote and didn't want to spend much more time with it, stripping it down further.
Migrainesoft's Proof of Concept - CSS dropdown menus with headers
Dropdown menus with headers using HTML/CSS only
Hover over Cool Links and Cool Videos to see drop-downs.
