Page 1 of 1

Color Picker

Posted: Mon Jun 19, 2006 6:23 pm
by Benjamin
http://astions.com/colors/ - Works great in Firefox

I made a color picker a long time ago, was just digging through some old stuff and found it. Problem was that I could never get it to render in IE.

Anyone have any clues?

Here is the css...

Code: Select all

<style type="text/css">
#navlist {
margin: 0px auto 150px auto;
width: 200px;
}
#navlist li {
list-style-type: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
#navlist ul {
margin: 0;
padding: 0;
}
#navlist a {
display: block;
padding: 0px;
border: 0px;
text-decoration: none;
text-align: center;
font-size: 0px;
}
#navlist a:link, #navlist a:visited {
height: 1px;
line-height: 1px;
margin: 0px;
padding: 0px;
}
#navlist a:hover {
line-height: 40px;
font-size: 18px;
padding: 5px;
border: 2px solid;
border-color: #000000;
height: auto;
color: #000000;
font-weight: bold;
}

#navlist a:active,
#uberlink a:link, #uberlink a:visited,
#uberlink a:hover, #uberlink a:active {
}
</style>

Posted: Mon Jun 19, 2006 6:57 pm
by RobertGonzalez
The only way that will work in IE6- is to add a bottom border to each li element. It's a weird hack, but a known issue with IE's handling of block-level elements. I ran into this myself on several projects. The easiest, and most commonly adopted fix, is adding a bottom border 1px wide that is the same color as the background of the blobk level element that you are in. The thing to remember is to apply it to the hover pseudo element if you are using it or it will crap out every time you hover over the element.

PS That is one freaking cool little app. 8O

Posted: Mon Jun 19, 2006 7:18 pm
by Benjamin
ACK!

That's not the answer I was looking for. Thanks for letting me know at least.

Posted: Mon Jun 19, 2006 10:12 pm
by Luke
I would put the color hex outside the actual color picker... would make more sense. Pretty cool though!