Mobile Friendly Website

CSSPLAY

Doing it with style

Variable width Drop down DL COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

Tim:-
Stu- Great menu, it has been a huge help to me.

Just wanted to let you know I have discovered a bug with it in Opera. If there is a forward slash (/) in a top-level link it breaks that menu item in Opera 9. It doesn't seem to pose a problem for IE6, Firefox, or Safari. Got any idea what is causing this? I also tried using the ASCII code for this to no avail (/).
(31.07.2007, 16:02)

Brianna:-
Beautiful Menu! I think it will work out perfect for my website www.jasonandbrianna.net
(08.08.2007, 18:42)

Lucas from Hungary:-
It was a big surprise for me to face that this kind of menu is such a unique kind that only you did make it.
Big up for the use of declaration-list! Also the CSS is easily styleable. Great!

Sad, that if all <dd>s are shorter than the <dt>, then clicking outside the text their bg (even the bottom-line) makes their bg and clickability collapse.

This happens to me when I download YOUR PAGE...

I don't know if it's related to the DTD or something like that... I would really appreciate a good idea about that!

Thank you!
(05.11.2007, 20:51)

Lucas from Hungary:-
Sorry.. I mean, your demo is OK online, but fails when I download it. Same issue with my styled instances in FF. Testing goes with XAMPP.
OK, my main goal was to make my menu accessible to IE users (usually still v6), but for God's Sake, why to degrade a standards-compliant browser?
I don't know where's the glitch...

(In the meantime I read you were starting with the Z80 just like I did in my childhood! With my stepfather we were converting tape-loader routines to floppy-disk loaders in games like Winter Games, just for the challange, but our main favorites were Trap-door, The Sentinel, Deus Ex Machina as I can remember so far...)
(05.11.2007, 23:30)

Lucas not hungry:-
Sorry again, I was a bit confused last night.
To clear it: your downloaded demo works well. I can even change the menu between the <ul> tags with my own - it still does.
My question then: what may cause that the area in the dropbox around the text isn't linking - after a click inside the dropbox but not on the text itself (even on the bottom-line) leads the background to collapse to the clickable area of the text.

Excuse me again for the confusion before!
(06.11.2007, 21:26)

Yet hungry Luke:-
Yes, after a few days of testing my conclusion is that this menu is only working in the environment of your site's other CSSs.
In my example I make a new page in MODx CMS, assigning no template to it, copying your page's code to content is wrong.
Seeing the same page after copying your sites other css-files to their place makes the menu work. Form me this means the menu isn't good in other environment than yours.
Or not?
(17.11.2007, 22:19)

Stu:-
This menu will work on any site that has a standards compliant doctype. Make sure that your DTD is chosen from the list on www.w3.org/QA/2002/04/valid-dtd-list.html
(17.11.2007, 22:37)

Stu:-
I have stripped this down to the CSS and html for the demo only and placed the result here
www.cssplay.co.uk/test/variable_dl.html .
You will see that this works without and extra styling. All that is needed is a standards compliant doctype. The font size and type can be varied as you wish.
(17.11.2007, 22:43)

Parker Crawford:-
Is there a way to center this menu? I wrapped it in another div but still can only center it using margin.
(20.11.2008, 15:11)

Stu:-
The fact that it has a variable width makes it difficult to center. It can be done using display:table and display:table-cell but this is buggy in Firefox. IE would need to use display:inline-block;
(20.11.2008, 15:40)

10 of 14 comments (part 1). [ » ] [ * ]



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page