| Author |
Message |
|
forquare1
I haven't seen my friends in so long
Joined: Thu Apr 23, 2009 6:36 pm
Posts: 5156
Location: /dev/tty0
|
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
|
| Fri May 28, 2010 12:26 pm |
 
|
|
|
tombolt
Spends far too much time on here
Joined: Fri Apr 24, 2009 8:38 am
Posts: 2967
Location: Dorchester, Dorset
|
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?
|
| Fri May 28, 2010 4:44 pm |
|
|
|
big_D
What's a life?
Joined: Thu Apr 23, 2009 8:25 pm
Posts: 10691
Location: Bramsche
|
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...
_________________
"Do you know what this is? Hmm? No, I can see you do not. You have that vacant look in your eyes, which says hold my head to your ear, you will hear the sea!" - Londo Molari
Executive Producer No Agenda Show 246
|
| Sat May 29, 2010 6:29 am |
|
|
|
forquare1
I haven't seen my friends in so long
Joined: Thu Apr 23, 2009 6:36 pm
Posts: 5156
Location: /dev/tty0
|
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.
|
| Sat May 29, 2010 12:00 pm |
|
|
|
Nick
Spends far too much time on here
Joined: Thu Apr 23, 2009 11:36 pm
Posts: 3527
Location: Portsmouth
|
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? _________________
|
| Sat May 29, 2010 11:26 pm |
|
|
|
big_D
What's a life?
Joined: Thu Apr 23, 2009 8:25 pm
Posts: 10691
Location: Bramsche
|
 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;
} | | | | |
_________________
"Do you know what this is? Hmm? No, I can see you do not. You have that vacant look in your eyes, which says hold my head to your ear, you will hear the sea!" - Londo Molari
Executive Producer No Agenda Show 246
|
| Sun May 30, 2010 10:07 am |
|
|
|
Nick
Spends far too much time on here
Joined: Thu Apr 23, 2009 11:36 pm
Posts: 3527
Location: Portsmouth
|
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? _________________
|
| Sun May 30, 2010 1:04 pm |
|
|
|
forquare1
I haven't seen my friends in so long
Joined: Thu Apr 23, 2009 6:36 pm
Posts: 5156
Location: /dev/tty0
|
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.zipI really appreciate your help. I'll have a closer look over the next few days at it myself too. Thanks again, Ben
|
| Mon May 31, 2010 12:37 pm |
|
|
|
Nick
Spends far too much time on here
Joined: Thu Apr 23, 2009 11:36 pm
Posts: 3527
Location: Portsmouth
|
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: 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: 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.  _________________
|
| Mon May 31, 2010 5:14 pm |
|
|
|
forquare1
I haven't seen my friends in so long
Joined: Thu Apr 23, 2009 6:36 pm
Posts: 5156
Location: /dev/tty0
|
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 
|
| Mon May 31, 2010 7:40 pm |
|
|
|
Nick
Spends far too much time on here
Joined: Thu Apr 23, 2009 11:36 pm
Posts: 3527
Location: Portsmouth
|
No worries. I'd still suggest scrapping it and using display:inline; though.
_________________
|
| Mon May 31, 2010 7:58 pm |
|
|
|
forquare1
I haven't seen my friends in so long
Joined: Thu Apr 23, 2009 6:36 pm
Posts: 5156
Location: /dev/tty0
|
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 
|
| Mon May 31, 2010 8:03 pm |
|
|
|
paulzolo
What's a life?
Joined: Thu Apr 23, 2009 6:27 pm
Posts: 12251
|
I thought you used Freeway, which has CSS menus sorted.
|
| Thu Jun 03, 2010 10:31 pm |
|
|
|
forquare1
I haven't seen my friends in so long
Joined: Thu Apr 23, 2009 6:36 pm
Posts: 5156
Location: /dev/tty0
|
Faye's sire uses Freeway, but I edit mine myself (I like to keep it geeky)...
|
| Fri Jun 04, 2010 12:38 am |
|
|
|
Nick
Spends far too much time on here
Joined: Thu Apr 23, 2009 11:36 pm
Posts: 3527
Location: Portsmouth
|
It's the way things should be, Ben. _________________
|
| Fri Jun 04, 2010 1:25 am |
|
|
