Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2011
    Location
    New Hampshire, USA
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Trouble with CSS modal window

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    laketrout (12-02-2011)

  • #3
    New Coder
    Join Date
    Dec 2011
    Location
    New Hampshire, USA
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •