#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2005
    Location
    Qualicum Beach, BC
    Posts
    70
    Rep Power
    14

    2Q's - Why aren't the images lining up, and why isn't the shadow working?


    Here's the site:

    http://www.whitecapgraphics.com/APP/index.php

    Here's the CSS:
    Code:
    @import url("shadows.css");
    
    * {margin:0; padding:0;}
    body {
    	background-image:url(images/background.gif);
    	color:#450109;
    	behavior:url(scripts/csshover.htc); 
    	width: 100%;
    }
    img {
    	behavior:url(scripts/pngbehavior.htc); 
    }
    img#yap {
    	width:167px;
    	height:145px;
    	border: 0;
    }
    a {
    	color:#D6970C;
    	text-decoration:none;
    	font-weight:bold;
    	font-variant:small-caps;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:.9em;
    }
    a:visited {
    	color:#D6970C;
    	text-decoration:none;
    	font-weight:bold;
    	font-variant:small-caps;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:.9em;
    }
    a:hover {
    	color:#450109;
    	text-decoration:underline;
    }
    a:active {
    	color:#450109;
    	text-decoration:underline;
    }
    
    div#main {
    	background-color: #FFFFFF;
    	margin: auto;
    	border-width: 0px 5px 0px 5px;
    	border-style: solid;
    	border-right-color: #450109;
    	border-left-color: #D6970C;
    	border-bottom:15px solid #450109;
    	min-width:980px;
    	width: 95%;
    	width: expression((documentElement.clientWidth < 1000) ? "980px" : "95%" );
    }
    #main #logo {
    	background-image:url(images/headerbg.gif);
    	background-position: top center;
    	background-repeat:no-repeat;
    	background-color:#71001E;
    
    }
    #logo #logoimage {
    	text-align:center;
    	margin:auto;
    	margin-left:193px;
    }
    #main #leftflourish {
    	float:left;
    }
    #main #rightflourish {
    	float:right;
    }
    div#navigation {
    	background-color:#400000;
    	float: right;
    	margin: 0;
    	width: 100%;
    	min-height: 24px;
    	border:0;
    }
    
    div#navigation ul {
    	margin-left: 193px;
    	padding-left: 5px;
    	padding-right: 5px;
    	background-image:url(images/logob.jpg);
    	background-position:center;
    	background-repeat:no-repeat;
    }
    div#navigation ul li {
    	float: left;
    	list-style-type:none;
    	width: 25%;
    	position: relative;
    	z-index:99;
    }
    div#navigation a {
    	text-decoration:none;
    	font-variant:normal;
    	color: #DFCDB6;
    	text-align:center;
    	display: block;
    	width: 100%;
    	line-height: 25px;
    	font-family: serif;
    	font-size:1.1em;
    	font-weight:normal;
    	letter-spacing:-.05em;
    }
    div#navigation a:hover {
    	color: #FFCC00;
    }
    div#navigation ul li ul {
    	width: 90%;
    	padding: 0;
    	margin:0;
    	margin-left:5%;
    	margin-right: 5%;
    	position:absolute;
    	display: none;
    	background-image:url(images/uldropback.jpg);
    	background-position:bottom;
    	background-repeat:no-repeat;
    	background-color:#DAC4A5;
    }
    div#navigation ul li ul li {
    	width: 100%;
    	background:transparent;
    	background-image:url(images/lidropback.jpg);
    	background-position: left center;
    	background-repeat:repeat-y;
    }
    div#navigation ul li ul li a{
    	color:#660000;
    	background-image:url(images/adropback.jpg);
    	background-position:right;
    	background-repeat:repeat-y;
    	line-height:1.8em;
    }
    div#navigation ul li ul li a:hover{
    	color:#71001E;
    	font-weight:bold;
    	text-decoration:underline;
    }
    /* shows drop down on hover */
    div#navigation ul li:hover ul, div#navigation ul li ul:hover {display:block;}
    
    div#lcolumn {
    	width: 190px;
    	float: left;
    	margin: 0;
    	padding: 0;
    	position: relative;
    	top: -66px;
    	z-index:999;
    }
    div#lcolumn ul{
    	padding:0;
    	margin-bottom:2em;
    }
    div#lcolumn ul li {
    	list-style-type:none;
    	text-align:center;
    	width: 167px;
    	margin-bottom: .1em;
    	background-image: url(images/yapdropback.jpg);
    	background-color:#660000;
    	background-repeat: repeat-y;
    }
    #main #body #lcolumn ul li a {
    	color:#DFCDB6;
    	text-decoration:none;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size:.9em;
    	line-height: 24px;
    	letter-spacing: -.02em;
    	font-variant:small-caps;
    	margin: 0;
    }
    #main #body #lcolumn ul li a:hover {
    	color: #ffcc00;
    }
    #main #body #lcolumn #featureContent {
    	padding-top: 114px;
    	background-image: url(images/featurestitle.jpg);
    	background-repeat: no-repeat;
    	width: 190px;
    }
    #main #body #lcolumn #featureContent div{
    	padding-right: 30px;
    	padding-left:10px;
    	background-image:url(images/featuresback.jpg);
    	background-repeat:repeat-y;
    	color:#FFFFCC;
    }
    #main #body {
    	background-image:url(images/chaser.jpg);
    	background-position:bottom right;
    	background-repeat:no-repeat;
    	position: relative;
    	margin-bottom:3em; /*1.25 + 1.75*/
    	clear:both;
    	height: 100%;
    }
    #main #body #content {
    	padding-left: 210px; /*fix for IE - it's including from side of L Column*/
    	position: relative;
    	top: 48px;
    	z-index:1;
    	padding-bottom:200px;
    }
    #content img {
    	border: 1px solid black;
    	padding: 5px;
    	margin: 0px 10px;
    }
    h1 {
    	font-family: "Times New Roman", Times, serif;
    	font-size: 1.3em;
    	line-height:1.1em;
    	text-transform: uppercase;
    	color: #350000;
    	width: 50%;
    }
    #main #body #content div ul li {
    	float: right;
    	list-style-type:none;
    	padding-left: 2%;
    	line-height:2em;
    	display:block;
    	font-weight:bold;
    	font-size:.9em;
    }
    h2 {
    	position:relative;
    	width: 98%;
    	background-image:url(images/navback.jpg);
    	background-repeat:repeat-x;
    	padding-top:1%;
    	font-family: "Times New Roman", Times, serif;
    	font-size: 1.2em;
    	text-indent: 2em;
    	padding-bottom: 1.5em;
    }
    #main #body #content div ul {
    	width: 46%;
    	position: absolute;
    	top: .2em;
    	right:0;
    	padding-right:4%;
    }
    h1:first-letter {
    	font-size: 1.7em;
    }
    div#h1line {
    	background-image:url(images/divider.gif);
    	background-position:right;
    	height:65px;
    	width: 97%;
    }
    h3 {
    	font-size: 1.2em;
    	padding-left: 4%;
    }
    h4 {
    	font-size: 1em;
    	font-weight:bold;
    	padding-left: 6%;
    	line-height:1em;
    	font-family:Georgia, "Times New Roman", Times, serif;
    }
    
    .h3line {
    	background-image:url(images/smdivider.gif);
    	background-position: top right;
    	background-repeat:no-repeat;
    	min-height: 2em;
    }
    hr {
    	color:#660000;
    	margin-left: 4%;
    	width: 90%;
    }
    #content p {
    	padding: .5em 20px 1.5em 2%;
    	margin: 0 8% 0 4%;
    	font-family:Georgia, "Times New Roman", Times, serif;
    }
    ul.contentlist{
    	padding: 0px 20px 1.5em 2%;
    	margin: 0 8% 0 4%;
    	font-family:Georgia, "Times New Roman", Times, serif;
    }
    p.center {
    	text-align:center;
    }
    table {
    	width: 80%;
    	font-family:Georgia, "Times New Roman", Times, serif;
    }
    form table {
    	padding-left:6%;
    	margin-bottom:1.5em;
    }
    form td {
    	font-weight:normal;
    }
    td {
    	font-weight:bold;
    }
    .right {
    	text-align:right;
    	padding-right: 2%;
    	width:59%;
    }
    div.table {
    	top: -1.5em;
    	width:auto;
    	position:relative;
    }
    div.iframe {
    	display: block;
    	width: 92%;
    	margin-left: 4%;
    	height:60em;
    }
    span.leftcell{
    	display:block;
    	width:47%;
    	text-align:right;
    	float:left;
    	padding-right:1%;
    	font-family:Georgia, "Times New Roman", Times, serif;
    }
    span.rightcell{
    	display:block;
    	width:49%;
    	float:left;
    	text-align:left;
    	padding-left:1%;
    	font-weight:bold;
    	font-family:Georgia, "Times New Roman", Times, serif;
    }
    span.question {
    	font-weight:bold;
    }
    span.package {
    	width:55%;
    	float: left;
    }
    #main #footer {
    	text-align: center;
    	position:relative;
    	top: -1em;
    	padding: 0 3% 0 3%;
    }
    div#logoBottom {
    	border:0px;
    	padding:0;
    	margin:auto;
    	text-align:center;
    }
    
    /* Hack Zone - KILL INTERNET EXPLORER! & Aslett Clearing */
    .clearfix:after {
    	content: ".";
    	display: block;
    	height: 0;
    	clear: both;
    	visibility: hidden;
    }
    .clearfix {display: inline-table;}
    /* backslash hack hides from IE mac \*/
    * html .clearfix {height: 1%;}
    * html #main #body #content {padding-left:10px;width:80%;}
    * html #main #body #content div ul {
    	top: .6em;
    }
    * html a:hover {text-decoration:underline;}
    * html #main #body #lcolumn ul li a {
    	font-size: .8em;
    }
    * html hr {
    	text-align:left;
    }
    * html div#h1line {
    	width:98%;
    }
    .clearfix {display:block;}
    /* end backslash hack */
    I have two little questions. One, the logo is divided into three parts, and they just don't seem to be lining up correctly. I think they should be right though? Can anyone see why?

    Second, I found some CSS styling that is supposed to provide a text shadow in any browser. I'm using it because the text for the main links is blending in too much with that background bit. It works in IE6, but it doesn't seem to be working for Firefox, where it's supposed to be using :before I think. I'm unable to test any other browsers except IE7 which I just haven't yet. Here is the attached shadows style sheet code:

    Code:
    /* CSS Document */
    /* default setup that everything sees */
    .shadow {
      /* needed for Internet explorer */
      height: 1em;
      filter: Shadow(Color=#666666, 
                     Direction=135, 
                     Strength=5);
    
      /* Needed for Gecko */
      line-height: 2em;
      white-space: nowrap;
    }
    
    /* 
     * used by browsers which know about
     * :before to create the shadow 
     */
    .shadow:before {
      display: block;
      margin: 0 0 -2.12em 0.15em;
      padding: 0;
      color: #666666; 
    }
    
    #shadow_1:before { 
      content: 'In shadow'; 
    }
    #second_2:before { 
      content: 'Happy Shadowing!'; 
    }
    
    /*\*/
    html*.shadow {
    
      [color:red;/* required by Safari 
                  * so that [] is correctly
                  * begun. associated with
                  * the property, yet hiding
                  * it. Seen by IE6 */
    
        /* 
         * seen by IE6 and Safari, but hidden
         * from Gecko 
         */
        text-shadow: #666666 5px 5px 5px; 
    
      ]color:auto; /* resets color for IE6 */
    }/**/
    
    /* 
     * end hack using dummy attribute selector
     * for IE5 mac
     */
    .dummyend[id]{clear: both;}
    
    /*\*/
    html*.shadow:before {
    
      [color:red;/* required by Safari. 
                    seen by IE6 */
    
        /* 
         * seen by IE6 and Safari, but hidden
         * from Gecko 
         */
        display: none;
    
      ]color:auto; /* resets color for IE6 */
    }/**/
    
    /* 
     * end hack using dummy attribute selector
     * for IE5 mac
     */
    .dummyend[id]{clear: both;}
    Any assistance is of course greatly appreciated. Thanks!
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2005
    Location
    Qualicum Beach, BC
    Posts
    70
    Rep Power
    14
    Would it be easier to keep the logo as a single transparent .png and z-index it behind the links? Is this even possible? I'm a bit CSS brain dead - I always forget half of what I learn when I work with it. *eek*
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2005
    Location
    Qualicum Beach, BC
    Posts
    70
    Rep Power
    14
    Well I've axed the shadows for now, but I could really use some help with the logo image.

IMN logo majestic logo threadwatch logo seochat tools logo