Mobile Friendly Website

CSSPLAY

Doing it with style

Solar map 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

Andy:-
Hello Stu, the Solar Map is partially broken in Safari 2.0.4 - in the "resting" state the planet images are split, for example the right image of Mercury is on the left and the left image is on the right (if that makes sense - I can mail you screenshots if you like). When mousing over a planet, the planet displays correctly.
(17.03.2007, 09:37)

Stu:-
Andy, a scrren shot would help. stu {at} cssplay.co.uk. Ta
(17.03.2007, 11:21)

Stu:-
Andy, I have been looking into the cause of the error in Safari, and it appears to be the no-repeat on the background image. So I have moved this to the :hover state instead.
IE needs a transparent gif initially to make this work.
Hopefully this will cure the Safari problem.
(17.03.2007, 12:10)

Andy:-
Yep it is OK now in the latest Safari - graet stuff! Screenshots sent by E-mail.

KR,

Andy
(17.03.2007, 12:43)

Jon:-
Hi Stu,

Good job on this. I did have problems with IE, though, and thought I'd provide my input on this.

I had several li that were being overlapped by the pop-up menus from other li. This isn't a problem in modern browsers, but when I would try *using* the pop-up menu in IE, once I went to click on a link in the pop-up it would disappear, and the pop-up in the li below that one would appear instead (since IE didn't know I currently had the menu open, and instead thought I was trying to hover on the li below that).

I solved this by adding "z-index:100" to my top-most li, and then adding "z-index:99" to the li below that, rinse and repeat. I'm specifically talking about the #whatever ul li#blah selectors. I thought maybe you should include something about this on the main page, in case anyone is having trouble when their li are too close together.

Thanks!
(21.10.2007, 01:37)

Jon:-
I also wanted to know your reasoning behind including things like position, text-indent, and background for every single "li#id" and "li#id a.tl", instead of just writing a general rule? Those don't change between different li, so I just wrote one general rule where I didn't specify the ID, and ended up cutting my CSS filesize in half.

Not trying to tell you how to write CSS, you're obviously much better, I just wanted to know if there was some kind of drawback to doing this (like possible glitches with older browsers) before I implemented it on my site.

Thanks again!
(21.10.2007, 01:37)

Stu:-
Hi Jon, I agree that the stylesheet could be simplified by removing common styles, but I do not agree that the answer to the IE5.x and IE6 problem is to give the list items their own z-index. This might be ok where the area only overlaps one other area but it would not be ok if they overlapped two or more areas.
The correct answer is to remove the absolute position from the list items and transfer it to the links in IE5.x and IE6 only. Using this method we can give the hovered link a large z-index to make it appear on top of any other link area. I have updated the stylesheet to show this mod (and at the same time simplified the common styling.
(21.10.2007, 14:43)

Jon:-
Stu,

You're right! This solution is much better. I would have probably figured this out, but I had deleted the "#map ul li#planet a.tl:hover" selectors, because I didn't need the image to change on :hover.

Thanks for revising your demo so quickly.. You're a real pro! Although, for my current situation I think I'm going to leave the CSS be as there'll never be an instance where a menu "underlaps" the li "above" it.. but I'm still glad you posted an update! :)

I'll be sure to try this update out on some more complex image maps!

Thanks again.
(21.10.2007, 18:40)

Jon:-
Stu, hope I'm not being too annoying, but couldn't your fix be simplified further to:

#map ul li {position:absolute;}
#map ul li#PLANETS {width,height,top,left}

/* remove from list for lte IE6 */
* html #map ul li {position:static;}
/* and give to links lte IE6 */
* htmp #map ul li a.tl {position:absolute;}
* html #map ul li#PLANETS a.tl {top,left}

I have about 20 "PLANETS" selectors, so it makes a difference. Again, I know there's nothing wrong with your CSS or anything. Just trying to make it simpler for all the other not-so-smart people who come here to use your code! :)

Thanks.
(21.10.2007, 18:55)

Jon:-
^^^ Forgive the typo above. :)
(21.10.2007, 18:58)

Stu:-
Jon, I never worry over saving a few bytes in the stylesheet, but to please you :) I have made your alterations and added another of my own by removing the z-index:500; style from all the hover s to its own style:
#map ul li a.tl:hover, #map ul li:hover {z-index:500;}
The only problem I can see with using
#map ul li {position:absolute;} is that it may have an effect on anyone placing a list within the popup information.
But I think that this is about as far as it can go with simplification.
(21.10.2007, 19:21)

Thomas Dreher:-
I was wondering if this moonmap would also work in a centered page? I have seen many picture maps or css tooltip applications or whatever they are called, but most are relying on having a fixed left orientation within the page.
Your work on this site is great, lots to learn, thank You!
(30.01.2008, 14:54)

Stu:-
Thomas, this will work on any page centered or not.
(30.01.2008, 22:28)

Ivan Schpeh:-
Nice!!!
(06.07.2010, 09:43)



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