Mobile Friendly Website

CSSPLAY

Doing it with style

non floating menus 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

mrruben5:-
Holy shit Stu that's awesome, good job! How would I make the linksbar 100% of the parent element? (Width)
(27.07.2005, 15:05)

Stu:-
Just add width:100% to the <ul> style.
(27.07.2005, 15:25)

mrruben5:-
Thanks!
The links are aligned left but a little text-align: center should solve that trick :P
(27.07.2005, 22:17)

Brett:-
Could images be used in this menu, similar to your fitted doors example?
(29.07.2005, 02:22)

Martin:-
that's not valid CSS, hacks are the culprits.
(29.07.2005, 15:35)

mrruben5:-
Using conditional comments you could paste the rules for ie in there. That will validate :)
(29.07.2005, 16:13)

Stu:-
Martin display:inline-block IS a valid style. See http://www.w3.org/TR/CSS21/visuren.html The display property 9.2.4 inline-block
This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.
It is just that ONLY IE recognises it (even the w3c validator has not been brought up to date).
(29.07.2005, 16:22)

Jo-an:-
Hi, Stu. This <a href="http://tinyurl.com/bw63e">a_css_exp_with_active_state</a>, would there be any chance to make this more standards compliant, moreover the active state seems to work in IE and other browsers ?? Would love to see your idea, to improve it.
(02.08.2005, 18:59)

Stu:-
Jo-an, I will take a look once I feel well again.
(03.08.2005, 22:02)

Jo-an:-
Get well soon, Stu ...
(04.08.2005, 21:06)

Stu:-
Jo-an, thanks. I am having a few problems at the moment with my health. I am suffering from Hashimoto's Thyroiditis (a type of autoimmune thyroid disease) and it looks like it may have spread to other organs. I had an upper and lower endoscopy a week ago which found a problem in my stomach. Still waiting for results of biopsy to confirm what it is.
Hopefully it is not too serious and they can treat it. Anyway, feeling a bit better now so will take a look at your your car :hover and :active states to see if there is any way to improve. I will post here if I find an answer.
(07.08.2005, 20:45)

Jo-an:-
Stu: here is the original post regarding the car example http://avalonstar.com/featurettes/runningwithsprites

My findings: a DOM script could help too, changing className styles. But we are here to do it CSS-wise ...
(12.08.2005, 12:28)

Stu:-
Jo-an, I have had a quick look at the page http://avalonstar.com/featurettes/runningwithsprites and have come up with this alternative http://www.stunicholls.myby.co.uk/test/car.html
This one is slightly different in that it does not move the background image but moves the whole link instead ;o) It suffers from the same IE fault in that the active state doesn't always work until you move the mouse off the link. It works in FF and Opera using the :focus pseudo class (Opera needs the mouse button to be held down). Hope this is of some use. I also changed the car image from a .png to a .jpg to reduce the image file size.
(13.08.2005, 13:14)

Stu:-
Jo-an, I have tamed the bug in IE whereby the :active state didn't always work until you moved the mouse of the link. It is a curious bug, but all it needs is a global a:visited state to be defined. So I have added a:visited {color:#000;} and now the :active state works every time in IE. A very odd bug and a very odd fix.
(13.08.2005, 19:24)

Jo-an:-
Stu, you did a great job. I looked at the test example, and indeed declaring a style for the 'link' text in IE can invoke the a:active state to be fixed.
(15.08.2005, 20:57)

Stu:-
Jo-an, I stumbled on this fix by accident when I noticed that 'menu fifteen' on my site did not have a problem with the :active state. The only difference was that this page also uses my default cssplay.css so I set about removing styles one at a time until menu fifteen had the problem. All that was left in the end was the a:visited style so I added that and all was fixed.
(15.08.2005, 22:23)

Jo-an:-
Stu, your comment on why not use jpeg instead of pngs to reduce filesize is certainly to be considdered. One can of course use third-party plug-ins as there is superPNG (to reduce filesize of pngs in Photshop), or make the png in fireworks (here the png filesize is somehow reduced). But in this case, the png can be replaced with jpeg easily.

the IE flicker problem, with the background styles that cause the reloading of the images is still a big problem. Cache settings I tried for eg Apache, these settings in .htaccess at root levell:

<FilesMatch ".(gif|jpe?g|png)$">
Header append Cache-Control "max-age=86400, must-revalidate"
</Files>

The 'sprites' method surely does not benefit with the IE flicker but we can preload our images, and so seperate sliced images can help ou too.
(16.08.2005, 13:54)

Stu:-
I have found some success in stopping the flicker by using the following in .htaccess

ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/jpeg A2592000

and have a demo here
http://www.stunicholls.myby.co.uk/articles/animation/index.html
(17.08.2005, 09:03)

Jo-an:-
comments on the car example are not accesible at this time.
(19.08.2005, 15:02)

Stu:-
Hi Jo-an, the site has moved to a new host and any links to the www.s7u.co.uk comments will no longer work. You should be able to access them on this site though.
(19.08.2005, 15:44)

Jo-an:-
Hi Stu, I have a prob with unclickable image links in but IE 5.0 WIN. Can I send a testpage mailwise (if possible)?
(22.08.2005, 16:33)

Stu:-
Jo-an, you can email me if you like.
stu[at]s7u.co.uk
(22.08.2005, 17:16)

nicolas:-
Wow, this is seriously great stuff as I've always considered using "floats" as some hack to get what we want. One question though, any reason you aren't using this method on your site? Any drawbacks I'm not aware of?
(13.09.2005, 22:21)

John:-
hey Stu, I have to say I really like these types of menus and have tried incoprerating the centered menu onto a new layout for my site, and what I've noticed us that most of the time it would work great without any errors, but after you browse the site a little more it would messed up a little. what would happen is one of the links would jump above or below the actual line its suppose to be on so instead of it having say 3 links on one line it would push one of the links on top of the other one, making it 2 lines.. would you know any kind of solutions for this?
thanks
(14.09.2005, 23:17)

Daniel:-
Hey Stu, excellent site! I'm trying to combine both the snazzy border technique with the Horizontal non-floating list with unkown width and I am having trouble with the snazzy curve at the tops of menu listings in IE6. IE6 is not correcting the width setting of 1px in the * html hack:

* html .menu {
display:inline-block; /* for IE only */
width:1px; /* IE will expand to fit menu width */

It's only allowing the snazzy top 1px of space and therefore showing on the left curve of the snazzy tops on each of the menu headings.

Any ideas?
(04.10.2005, 17:23)

johan:-
A tiny question: Does the centered example of the floated horz nav works
in IE5 MAC too: as seen on
<http://www.cssplay.co.uk/menus/centered2.html> There was a mention in
your prior version of your site that
Bruno Fass. added the coding for including IE5 MAC support ??


Yours Sincerely,
(07.10.2005, 15:05)

Brett:-
Stu,

Is there a way to make the entire menu take a fixed width? I have tried to get the second menu to take an exact width of 760px however I just cannot get it to work, in explorer, no probs in firefox!
(10.04.2006, 11:39)

DeadMeatGF:-
Man - these menus are totally screwed in my IE7b2. I mean really, really screwed!
I just get a list of boxes, one below the other, and all the width of the container. At least, I think they are, but they disappear behind the adverts - BAD IE7, go to your room!
(11.04.2006, 09:46)

Josh:-
Hey, I have seen the same thing on several sites when using IE7b2. I believe the problem spans from the unknown widths. Usually happens when using width:auto;. It expands to fit the total available width.
(15.05.2006, 21:11)

Warren:-
Broken in IE7 :(

Shows as wide vertical bars
(29.09.2006, 09:46)

Reid Young:-
I got a similar kind of menus working in IE6, IE7, Safari, Camino, and Firefox (Mac/Win). The CSS isn't perfectly beautiful, but after about 20 hours of work, the menu sure looks and resizes nicely :)

www.homesofchoice.net
(13.10.2006, 09:30)

bogdan:-
Warren you are right ... this menu is not working in IE7 :(
(05.11.2006, 23:55)

Stu:-
IE7 fixed the bug that makes this work in IE6 but has not added the style that makes this work in Firefox etc. So this method is not suitable for IE7 ..... yet. Still working on an alternative.
(06.11.2006, 07:53)

Tom:-
Stu, how do you make li items display inline across pages?

For a horizontal website I'm using li's and it puts a line break in instead of going horizontally. I used li {display: inline; float:left;} and it doesn't work?

Is it possible to stop the li's from breaking?
(28.01.2007, 12:45)

Carol:-
Thank you so much, I have spent days trying to sort out my horizontal navigation so that it displays properly in IE6 (it was fine in everything else). You provided me with a line of code that fixed my problem ( white-space: nowrap).
(06.09.2007, 12:05)

daaaaaaamnShame:-
Nice ...but how useful is it to release sthg that doesn't work in IE?
I suggest you separate projects that are not finished into a separate section and not mix them with 100% operational ones... would save us a LOT of time.
(30.06.2008, 13:30)

Stu:-
This does work in IE6. It was produced before IE7 came out. There is a note in the instructions to this effect. I am still looking for an IE7 answer.
(30.06.2008, 15:54)

ixpack:-
change your browsers. Hey RESPECT for author good job - you r doing something. if i will use any script on my pages i will donate.
(26.09.2008, 23:50)

ixpack:-
and hey ppl use your own heads and upgrade his work lol
(26.09.2008, 23:52)



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