x404.co.uk
http://www.x404.co.uk/forum/

WebKit doesn't display CSS drop down menus correctly
http://www.x404.co.uk/forum/viewtopic.php?f=4&t=8526		 Page 1 of 1
Author:  forquare1 [ Fri May 28, 2010 12:26 pm ]
Post subject:  WebKit doesn't display CSS drop down menus correctly
Hi all,

On my website I have recently run out of room to add more links, so have divided them into several menus. These use CSS as I dislike use JavaScript.

In Firefox (and all other Gecko browsers), Opera and Lynx, these look great and work perfectly. However, in WebKit (Safari and Chrome), they don't...The menus appear, but appear as a horizontal menu rather than vertical...

The former is the desired effect. But which is the most standards adhering in this process? Has Gecko and Presto been tweeked to allow such breakages of the standards? Or does WebKit just not conform to the standards as much as I'd like?

Ben
Author:  tombolt [ Fri May 28, 2010 4:44 pm ]
Post subject:  Re: WebKit doesn't display CSS drop down menus correctly
Without seeing it, it's hard to say. Could it be something to do with the elements being interpreted as inline rather than block by webkit, so they need to be explicitly set as block elements?
Author:  big_D [ Sat May 29, 2010 6:29 am ]
Post subject:  Re: WebKit doesn't display CSS drop down menus correctly
Can you post the CSS? I wrote an inventory tracking system, which generated CSS menus and Safari and Chrome worked without any problems on it - it had to, the studio were using Macs and Safari...
Author:  forquare1 [ Sat May 29, 2010 12:00 pm ]
Post subject:  Re: WebKit doesn't display CSS drop down menus correctly
big_D wrote:
Can you post the CSS? I wrote an inventory tracking system, which generated CSS menus and Safari and Chrome worked without any problems on it - it had to, the studio were using Macs and Safari...


Code:
#menu{
   text-align: left;
   border-right: 10px solid #C5C5C5;
   border-left: 10px solid #C5C5C5;
   background-color: #999999;
   height: 25px;
   font-size: 14pt;
   vertical-align: middle;
}

ul#nav li{
   padding: 0em 0.5em 0.5em 0.5em;
   margin: 0px;
   border: none;
   height: 10px;
}

ul#nav{
   list-style: none;
}

ul#nav li, ul#nav li ul li{
   float: left;
   position: relative;
}

ul#nav li a{
   display: block;
}

li ul{
   list-style: none;
   float: left;
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   padding: 0.1em;
   white-space: nowrap;
   background-color: #999999;
   border-right: 2px solid #C5C5C5;
   border-left: 2px solid #C5C5C5;
   border-bottom: 2px solid #C5C5C5;
}

li>ul{
   top: auto;
   left: auto;
}

li:hover ul, li.over ul{
   display: block;
}

#menu a:link{
   color: #000000;
   text-decoration: none;
}

#menu a:visited{
   color: #000000;
   text-decoration: none;
}

#menu a:hover{
   color: #660000;
   text-decoration: none;
   font-style: normal;
}


It's largely from another site, I'm not sure what most of it is doing, but I seems to work under Gecko and Presto.
Author:  Nick [ Sat May 29, 2010 11:26 pm ]
Post subject:  Re: WebKit doesn't display CSS drop down menus correctly
That CSS isn't exhaustive, is it?

I would guess that you have a top-level <ul></ul> going horizontally along the top, and each <li></li> contains a further <ul></ul> that you want to go vertically?

If that's the case, you must have forced the top level <ul></ul> to go horizontal (display:inline;), and I'd guess that the subsequent <ul></ul> elements are inheriting this attribute.

Also - how come you are giving some elements an absolute position of 0,0 and also floating them? Surely floating them is enough on it's own?
Author:  big_D [ Sun May 30, 2010 10:07 am ]
Post subject:  Re: WebKit doesn't display CSS drop down menus correctly
You shouldn't generally mix absolute and relative. All the positioning should be relative. That will often mess things up.

I'll have a look and see if I have a copy of my menus knocking around... It was a project for my last employer and it was an internal website...

edit: The code is loosely based on a template from Stu Nichols (http://www.cssplay.co.uk/menus/ ). I have modified it a fair bit, but the basic concept comes from. Unfortunately the menu system is generated dynamically from a MySQL database, using PHP, so there isn't any menu html code to see - I don't have a running MAMP server here any more...

Code:
.menu {
   background-image   : url(../images/menu_background.png);
   background-repeat   : repeat-x;
   border            : none;
   clear            : both;
   color            : #F6E7E4;
   float            : left;
   font-family         : Arial, Helvetica, sans-serif;
   font-size         : 12px;
   font-weight         : bold;
   height            : 40px;
   line-height         : 36px;
   list-style-type      : none;
   margin-top         : 11px;
   position         : relative;
   white-space         : nowrap;
   width            : 99%;
   z-index            : 101;
}

.menu ul {
   list-style-type      : none;
   margin            : 0;
   padding            : 0;
   position         : relative;
}

.menu ul ul {
   height            : 20px;
   line-height         : 20px;
   padding-left      : 25px;
   padding-right      : 10px;
   position         : relative;
   z-index            : 102;
}

/* float the list to make it horizontal and a relative positon so that you can
   control the dropdown menu positon */
.menu li {
   float            : left;
   position         : relative;
   width            : 135px;
}

.menu li li {
   clear            : left;
   position         : relative;
   z-index            : 103;
}

/* style the links for the top level */
.menu a, .menu a:visited {
   color            : #F6E7E4;
   display            : block;
   float            : left;
   font-size         : 12px;
   height            : 40px;
   line-height         : 40px;
   padding-left      : 25px;
   padding-right      : 10px;
   text-decoration      : none;
   white-space         : nowrap;
   width            : 150px;
}

a.active_entry:link, a.active_entry:visited, .menu a:hover  {
   border            : none;
   color            : #120000;
   float            : left;
   list-style-type      : none;
   padding-left      : 25px;
   padding-right      : 10px;
   white-space         : nowrap;
}

.menu ul ul a.active_entry:link, .menu ul ul a.active_entry:visited  {
   border            : none;
   color            : #120000;
   float            : left;
   font-size         : 10px;
   height            : 20px;
   line-height         : 20px;
   list-style-type      : none;
   padding-left      : 25px;
   padding-right      : 10px;
   white-space         : nowrap;
   z-index            : 1000;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
   background-color   : #565656;
}

/* style the second level hover */
.menu ul ul a.drop:hover {
   background-color   : #565656;
   color            : #120000;
   font-size         : 10px;
}

.menu ul ul :hover > a.drop {
   background-color   : #565656;
   color            : #120000;
}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
}

/* style the third level hover */
.menu ul ul ul a:hover {
   background-color   : #565656;
   color            : #120000;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul, .menu ul ul ul {
   height            : 0;
   left            : 0;
   position         : absolute;
   top               : 40px;
   visibility         : hidden;
}

/* position the third level flyout menu */
.menu ul ul ul {
   left            : 149px;
   top               : -1px;
   width            : 149px;
}

/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
   left            : -149px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {
   border-collapse      : collapse;
   left            : 0;
   position         : absolute;
   top               : 0;
   }

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   background-color   : #565656;
   border-width      : 0 1px 1px 1px;
   color            : #FFFFFF;
   font-size         : 10px;
   height            : 20px;
   line-height         : 20px;
   padding-left      : 25px;
   padding-right      : 10px;
}

/* style the top level hover */
.menu a:hover {
   background-image   : url(../images/menu_background.png);
   background-repeat   : repeat-x;   
   color            : #120000;
}

.menu ul ul a:hover {
   background-color   : #565656;   
   color            : #120000;
}

.menu :hover > a {
   background-image   : url(../images/menu_background.png);
   background-repeat   : repeat-x;
   color            : #120000;
}

.menu ul ul :hover > a {
   background-color   : #565656;
   color            : #120000;
   height            : 20px;
   line-height         : 20px;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul, .menu ul a ul a:hover ul , .menu ul li ul li:hover ul
.menu ul li ul li ul li:hover ul, .menu ul li ul li ul a:hover ul {
   visibility         : visible;
}

/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul {
   visibility         : visible;
}

/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul, .menu ul ul :hover ul,
 .menu ul ul :hover ul ul, .menu ul ul ul :hover ul {
   visibility         : hidden;
   
}

.active_menu {
   color            : #120000;
}
Author:  Nick [ Sun May 30, 2010 1:04 pm ]
Post subject:  Re: WebKit doesn't display CSS drop down menus correctly
big_D wrote:
You shouldn't generally mix absolute and relative. All the positioning should be relative. That will often mess things up.


Well yeah, that's the point I was making.

This is all guess work without all the markup.

Can you host it somewhere and link us, Ben?
Author:  forquare1 [ Mon May 31, 2010 12:37 pm ]
Post subject:  Re: WebKit doesn't display CSS drop down menus correctly
Sorry, been a bit of a hectic weekend...I've not looked at the menus much since I posted this as I've been working on some other things.

The code is pretty much a copy and paste job from a tutorial I found somewhere. It worked fine in Camino, but then when I went to test out some other things, I found that WebKit didn't like it.
I've zipped the menu source, the main index page and the CSS files into a file you can download here: http://hashbang0.com/personal/menu.zip

I really appreciate your help. I'll have a closer look over the next few days at it myself too.

Thanks again,
Ben
Author:  Nick [ Mon May 31, 2010 5:14 pm ]
Post subject:  Re: WebKit doesn't display CSS drop down menus correctly
Okay, so it turns out to be a problem with floats. I've tested with Chrome and Firefox, and to me the way Chrome handles it is more logical. Not sure about standards - but I would guess Chrome is probably more standard.

I don't know why, but for some reason this guy has decided not to use display:inline; and has instead forced the behaviour with float:left; but in doing so, he has forced the behaviour onto both the top level, and the embedded <li></li> elements.

This is the problem:
Code:
ul#nav li, ul#nav li ul li{
   float: left;
   position: relative;
}


It floats the top level <li></li> elements to force them horizontal, which I suppose is fine (although he should have just used display:inline; for the same effect). The problem is that he has also included the emebedded <li></li> elements.

So replace the above code with:

Code:
ul#nav li{
   float: left;
   position: relative;
}

ul#nav li ul li {
float: none;
}


And it now works a treat on both Chrome and Firefox.

The default behaviour of a <ul></ul> is to drop <li></li> elements vertically. He chose to over-ride that behaviour with floats, and Firefox only did it to the top level <ul</ul>

Moral of the story: use display:inline; instead. :lol:
Author:  forquare1 [ Mon May 31, 2010 7:40 pm ]
Post subject:  Re: WebKit doesn't display CSS drop down menus correctly
Nick, thanks very much!

The changes have been uploaded and it works well on all of the browsers I have access to (all but IE).

Thanks very much :D
Author:  Nick [ Mon May 31, 2010 7:58 pm ]
Post subject:  Re: WebKit doesn't display CSS drop down menus correctly
No worries. I'd still suggest scrapping it and using display:inline; though.
Author:  forquare1 [ Mon May 31, 2010 8:03 pm ]
Post subject:  Re: WebKit doesn't display CSS drop down menus correctly
I'll give it a look over when I get the chance :)
CSS is one of my least favourite parts of web design, and at the minute, I'm concentrating most of my efforts on a script I've just published as that's more fun :P
Author:  paulzolo [ Thu Jun 03, 2010 10:31 pm ]
Post subject:  Re: WebKit doesn't display CSS drop down menus correctly
I thought you used Freeway, which has CSS menus sorted.
Author:  forquare1 [ Fri Jun 04, 2010 12:38 am ]
Post subject:  Re: WebKit doesn't display CSS drop down menus correctly
paulzolo wrote:
I thought you used Freeway, which has CSS menus sorted.


Faye's sire uses Freeway, but I edit mine myself (I like to keep it geeky)...
Author:  Nick [ Fri Jun 04, 2010 1:25 am ]
Post subject:  Re: WebKit doesn't display CSS drop down menus correctly
It's the way things should be, Ben. :P
Page 1 of 1 All times are UTC
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/