Trouble with CSS modal window

laketrout · 12-02-2011, 01:10 AM

Hi Folks!

This is my first post here. I'm not a newbie with CSS, but certainly no expert and I need some help! I have a modal window that I want to populate with color swatches (essentially build a color pallet). I'm looking for a pure CSS3 solution, however inserting li's with the three sample colors swatch id's in the code below are not nesting inside the "pallet" I am trying to populate. Can anyone please help? I've been stumped all day. I stripped the HTML down to basically nothing, but left all of the CSS:

Code:

<html>
<head>

<style type="text/css">

.pallet, .pallet_arrow_right { 
  color:#ffffff;
  cursor:normal;
  display:-moz-inline-stack;
  display:inline-block;
  font-size:12px;
  padding: 10px 10px; /* vertical, horizontal pad */
  position:relative;
  text-align:center;
  text-shadow:0 -1px 1px #111111;
  height: 300px;
  width: 400px;
  
  -moz-border-radius-topleft:4px ;
  -moz-border-radius-topright:4px ;
  -moz-border-radius-bottomright:4px ;
  -moz-border-radius-bottomleft:4px ;
  border-top-left-radius:4px ;
  border-top-right-radius:4px ;
  border-bottom-right-radius:4px ;
  border-bottom-left-radius:4px ;

  -moz-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
  box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
  background-color:#3b3b3b;
  background-image:-moz-linear-gradient(top,#555555,#222222);
}
.pallet:after, .pallet_arrow_right:after {
  content:"\25B8";
  display:block;
  font-size: 16px;
  height:0;
  line-height:0;
  position:absolute;
}
.pallet_arrow_right:after {
  color:#222222;
  right: -10px;
  top: 15px;
  margin-top: 10px;
}
#aqua {
	height: 75px;
	width:70px;
	background: aqua;
	-moz-border-radius: 15px 5px / 5px 15px;
	border-radius: 15px 5px / 5px 15px;
}
#green {
	height: 75px;
	width:70px;
	background: green;
	-moz-border-radius: 15px 5px / 5px 15px;
	border-radius: 15px 5px / 5px 15px;
}
#yellow {
	height: 75px;
	width:70px;
	background: yellow;
	-moz-border-radius: 15px 5px / 5px 15px;
	border-radius: 15px 5px / 5px 15px;
}
</style>


<body>
<p>
    <span class="pallet_arrow_right">Inside here, I want rounded boxes to make a color pallet</span>  
</p>

</body>
</html>

Thank you all for your help, perhaps it's a simple oversight that I am missing because I have been staring at this for so long. I don't require any prefixes besides -moz (this will render in FireFox only). Thank you all for your help, I would really appreciate some pointers!

Thanks in advance!

- LakeTrout

Excavator · 12-02-2011, 01:23 AM

Hello laketrout,
I'm not sure why it didn't work for you. I added a ul with li's using your id's and it seems to work fine for me in FF.

Try this and compare with yours -

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
/* HTML5 tags */
		header, section, footer,  aside, nav, article, figure {
	display: block;
}
#container {
	width: 800px;
	margin: 0 auto;
	padding: 50px 0 400px;
	background: #999;
}
.pallet, .pallet_arrow_right {
	color:#ffffff;
	cursor:normal;
	display:-moz-inline-stack;
	display:inline-block;
	font-size:12px;
	padding: 10px 10px; /* vertical, horizontal pad */
	position:relative;
	text-align:center;
	text-shadow:0 -1px 1px #111111;
	height: 300px;
	width: 400px;
	-moz-border-radius-topleft:4px;
	-moz-border-radius-topright:4px;
	-moz-border-radius-bottomright:4px;
	-moz-border-radius-bottomleft:4px;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	border-bottom-right-radius:4px;
	border-bottom-left-radius:4px;
	-moz-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
	box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
	background-color:#3b3b3b;
	background-image:-moz-linear-gradient(top, #555555, #222222);
}
.pallet:after, .pallet_arrow_right:after {
	content:"\25B8";
	display:block;
	font-size: 16px;
	height:0;
	line-height:0;
	position:absolute;
}
.pallet_arrow_right:after {
	color: #222222;
	right: -10px;
	top: 15px;
	margin-top: 10px;
}
	ul {
		padding: 0;
		list-style: none;
	}
		#aqua,
		#green,
		#yellow {
			height: 75px;
			width: 70px;
			-moz-border-radius: 15px 5px / 5px 15px;
			border-radius: 15px 5px / 5px 15px;
		}
			#aqua {background: aqua;}
			#green {background: green;}
			#yellow {background: yellow;}
</style>
</head>
<body>
        <div id="container">
                <div class="pallet_arrow_right">
                	<ul>
                    	<li id="aqua"></li>
                        <li id="green"></li>
                        <li id="yellow"></li>
                    </ul>
                <!--end .pallet_arrow_right--></div> 
        <!--end container--></div>
</body>
</html>

laketrout · 12-02-2011, 01:43 AM

Thank you Excavator!

I knew I had it close, it looked fine to me! I noticed a silly HTML issue with what I had before (I know, I know - for shame

). I had the container ID (what I called modalWindow) and the class for .pallet_arrow_right reversed in their tags! It's been a long week, I must say I'm a little embarrassed at such a silly mistake on my first post here! I sincerely appreciate the fresh eyes that fixed the problem and the remarkably fast reply. Thank you very much!

Cheers,

- LakeTrout