CSS - Optimizing Request - Dynamic Layers With Images Working Sample Submittion

A few people seem to have had the problem of the a:hover not working right in ie when applied to images. Mine is just applied to a standard bit of text.

In my menu (CSS only, no javascript) the descriptions are "display:none" in the initial "a" state and then "display:block" in the a:hover state. Works in Firefox, but not ie.

Any ideas? My page is at www.prioritypie.f2s.com/KSA/about.htm

You can see the CSS by clicking on the first link on the left hand side of the page.

Thanks to anyone who can take away the pain and swearing of the last couple of hours.

why won't this work on internet explorer a:hover img { }.

This is exactly what i'm using, it works on firefox but doesn't work on IE. You can see it in action here.
Code:

a:hover img { border: 2px solid #fff; }

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!

Ok, I have this:
Code:

#background {
	position:relative;
	width:600px;
	height:480px;
	z-index:1;
	background-image:"/background.jpg";
	border-style:none;
	color:#000000;
	} <div ID="background">Whatever</div>

But it doesn't work.. why?

have I got this right....any selector effectively becomes a layer once I add a 'position' and a 'z-index'?
Thanks

Chris

Hi guys,

I am using the following code on my page but the 'profile-description' div layer is not displaying correctly

Some of the text shown as a result of this <? echo nl2br($row['description']); ?> is being shown outside the blue border created by this code :

<div style="text-align:center;border:#a9c5df 1px solid;width:90%;padding:20px; background:url(images/bg-image.jpg) no-repeat 0 4px #ffffff;background-position:top right;">


PHP Code:
#div-profile {
 position:relative;
}
#profile-data {
 position:absolute;
 top:-15px;
 right:230px;
 width:250px;
 font: 12px/17px  verdana,arial,sans-serif;
 line-height:18px;
 text-align:left;


}
#profile-pic {
 position:absolute;
 top:0;
 left:-10px;
 width:170px;

}


#profile-description {
 position:relative;
 top:150px;
 left:60px;
  width:450px;
   font: 12px/17px  verdana,arial,sans-serif;
 line-height:18px;
 text-align:left;
}






<div style="text-align:center;border:#a9c5df 1px solid;width:90%;padding:20px; background:url(images/bg-image.jpg) no-repeat 0 4px #ffffff;background-position:top right;">




<div id="div-profile">
                <div id="profile-pic">
                <img src="profile-pics/<? echo $pic ;?>" alt="" width="120" height="140" align="left">
                </div>
                

                <div id="profile-data">
                <br />
                <strong>Name:</strong> <? echo("$row2[first_name]"); ?> <? echo("$row2[last_name]"); ?><br />
                <strong>Specialist Area:</strong> <? echo("$row2[specialist_area]"); ?><br />
                <strong>Phone:</strong> <? echo("$row2[phone]"); ?><br />
                <strong>Mobile:</strong> <? echo("$row2[mobile]"); ?><br />
                <strong>Company:</strong> <? echo("$row2[company]"); ?><br />
                <strong>Address:</strong> <? echo("$row2[city]"); ?>, <? echo("$row2[state]"); ?><br />
                <strong>Email:</strong> 
                <a href="contact-agent.php?id=<? echo $_SESSION['member_id'];?>" title="Contact This Agent" onclick="NewWindow(this.href,'name','450','350','yes');return false">contact us here</a><br />


    <?
    
    }
    ?>
    

                </div>
                

        <br /><br />


                <div id="profile-description">
                
                <? echo nl2br($row['description']); ?>
                
                <br /><br /><br /><br />
                
                
                    <div align="right">
                        <a href="contact-agent.php?id=<? echo $member_id ;?>" title="Contact This Agent" onclick="NewWindow(this.href,'name','450','350','yes');return false">
                        <img src="icon-email.gif" alt="Contact This Agent" width="60" height="60" hspace="10" border="0"></a>
                        
                        <a href="javascript:window.print()" title="Print This Page">
                        <img src="icon-print.gif" alt="Print This Page" width="60" height="60" border="0"></a>
                    </div>
                
                </div>
                
                
            </div> 





Can anyone possibly help?

I hope someone can help me with this, please have a look at a page I have created:

http://www.funnestgames.com/header_1.php

Now before rolling over any of the links on the left side, notice the text "Rollover game for preview". I have been trying to get that inside the white rectangular outlined box, but the only way I know is if i use css and specify a certain number of pixels from the left side. I can't do this because the website is centered, and resizing the page would change the widths and it all gets messy, i hope you have the idea.

I have the same problem if you rollover a link, you can barely read it but it says loading below the text "rollover game for preview"

does anyone know a way to solve my problem? please view source on page if you can help me out and see what i did wrong. the divs start at approx line 135 thanks

Code:

<center>
						<div style="width:100px; height:100px;background-color:#E0E1E2; border: 1px double #ffffff; font-size:11px; font-weight:700; color:#333333; text-align:center;">Game Preview
						<div style="position: absolute; top: 300px;">Rollover game for preview</div>
						<div id="preview" style="width:100px; height:100px;background-color:#E0E1E2; visibility:hidden; z-index:99;">
 						<img name="preview_img" src="spacer.gif" style="height:100px; width: 100px; visiblility:hidden; " onload="showmehideme()">
						<div id="loading" style="font-size:11px; font-weight:700; color:#333333; text-align:center; position: absolute; top: 300px;">Loading...</div>
 						</div>
						</div>
						</center>

I've tried different implementations, but none seem to be working.

I have two images crossing over each other using two position: absolute divs. When I click on the one behind using an onClick javascript function, I want that div's z-layer value to change, but none of the sites are helping me. How do I do this?

How many layers or z-indexes can you reasonably use on one page? I'm thinking mostly IE here, since that is the browser I will be working with.

For instance, you design a bunch of tabs - at least 24, and have a a span or div below those tabs that contain checkboxes and text preceeding each check box, for each tab on its own layer. Maybe a maximum of 40 checkboxes/text per layer. Clicking each tab will hide/unhide the appropriate layer of checkboxes/text in the div area. I know this may be better done axaj style, but for the sake of argument, what would you think is a maximum load for this scenario for a browser (latest IE) on a standard pc that may be up to 3 years old?

Hello All,

Im currently stuck trying to get a layer on top of a layer. The image below shows the problem.

img68.imageshack.us/img68/5579/picture3cl2.png

And here is a link to a code version:

thenpcs.com/beta/

Any help greatfully appreciated!

Hi,

I've been using nested layers in Dreamweaver and wanted to know if it's possible to hide all nested layers of a given layer (say A) by applying a behavior to hide just the layer A to an object? Or is it that in order to hide the nested layers also, I'll need to apply behaviors for each nested layer separately?

Also, is there a way to load the content of a layer (such as swf movies, images and other stuff) only when its property is changed to visible (by default the layer is hidden).

Thanks,
Jayant

Is it possible to make a layer relative to the 'body' or some other container in my web page?
The position of my layer changes with each screen, browser or setting but I would like to be able to keep it, say, 150px in from the left edge of the 800px wide 'container' I've made.
In other words, I want a layer to act like any other selection.
Thanks
Chris

I'm attempting to create three layers, each containing a selection list form item, only one of which will be visible at any one time, based on the selection of another selection list (not shown in the code below).
The layers must be centered within a Table cell:

Code:

<table style="width:90%">
  <tr>
    <td style="text-align:center;">
      <div id="layer1" style="width:100%;">
        <select id="select1">
          <option selected>Option 1</option>
          <option>Option 2</option>
        </select>
      </div>

      <div id="layer2" style="width:100%;">
        <select id="select2">
          <option selected>Option A</option>
          <option>Option B</option>
        </select>
      </div>

      <div id="layer3" style="width:100%;">
        <select id="select3">
          <option selected>Option 1A</option>
          <option>Option 2B</option>
        </select>
      </div>
    </td>
  </tr>
</table>
.
.

This alone renders each layer sequentially, one on top of the other, vertically on the page, which is not what I want.

I have tried using z-index values, but I think the problem stems more from the position value.
I have tried using: Code:

position:relative; left:0px; top:0px;

on each layer, but nothing changes.
I then tried using: Code:

position:absolute; left:0px; top:0px;

on each layer, and the layers *did* overlap each other, but were placed at the top of the page.

So before I tear out all of my hair, does anyone have a suggestion for how to place these layers within a table cell so that they are a) centered horizontally within the cell, and b) overlap each other?

Any help would be greatly appreciated.

Thanks!

- coredumped.

Hi;
I am trying to make couple of layers, 9 to be exact in a page,

all boxes are same size, but of course in different location,

I have them like this:

Quote:
.box-1 {
width: 200px;
height: 155px;
border: 1px;
border-color: #339900;
border-style: groove;
position: absolute;

top: 10px;
left: 10px;}

.box-2 {
width: 200px;
height: 155px;
border: 1px;
border-color: #339900;
border-style: groove;
position: absolute;

top: 10px;
left: 210px;}



and so on for the rest of layers. as you notice all layers have some values, and just the positioning are not same,

can I have all those unchanged value as a class somehow and have other values in as child or something?
I could not find a way around it, to not repeat those values for 9 times when not necessary.

thanks for help

Hi All,

I am looking for some advice really regarding a menu i am trying to incorporate on my site. The menu is set up to be displayed in the left hand column in a website as below:



What i want to do is have the menu on the right hand side, and hence the direction of the flyout etc needs to be changed. The CSS used for the menu is:

Code:

/*---------------------------------*/
/*   Vertical Fly-Out Menu Style   */
/*---------------------------------*/

.verbar	{   /* Color of main vertical menubar and border */
	color: black;
	background-color: #e6e7e6;
	border: 1px outset #fdfefd;
}

.vertitem	{          /* Behaviour of main vertical menu items, leave as is for proper operation */
	text-align: left;
	white-space: nowrap;
}

.vertitem	a {   /* Font style, size of main menu items */
  font-family: Verdana, Arial, sans-serif;
	font-size: 12px;		
	text-decoration: none;
	position: relative;
	display: block;		
}

.vertitem a:link, .vertitem a:visited	{   /* Default font style & color of main menu items */
	color: #000000;
	text-decoration: none;	
}

.vertitem a:hover	{   /* Font style & color, background menu color of main menu item when hovered over */
	color: #ffffff;
	background-color: #21449c;
	text-decoration: none;
}

.vertitem a:active	{   /* Font style & color, background menu color of main menu item when clicked */
	color: #ffff00;
	background-color: #666666;	
	text-decoration: none;	
}

.vertsubmenu	{   /* Behaviour of sub-menu  - leave as is for proper operation of submenus */
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
}

.vertsubframe	{   /* Color of submenu item and border */
	background-color: #e6e7e6;
	border: 2px outset #fdfefd;

	position: relative;
	display: block;	
}

.vertsubitem	{     /* Behaviour of sub-menu  - leave as is for proper operation of submenus */
	text-align: left;
	white-space: nowrap;
}

.vertsubitem a	{   /* Font style, size of submenu items */
  font-family: Verdana, Arial, sans-serif;
	font-size: 12px;			
	text-decoration: none;
	
	position: relative;
	display: block;	
}

.vertsubitem a:link, .vertsubitem a:visited	{   /* Default font style & color of submenu items */
	color: #000000;
	text-decoration: none;	
}

.vertsubitem a:hover	{   /* Font style & color, background submenu color of submenu item when hovered over */
	color: #ffffff;
	background-color: #21449c;
	text-decoration: none;
}

.vertsubitem a:active	{   /* Font style & color, background submenu color of submenu item when clicked */
	color: #ffff00;
	background-color: #666666;	
	text-decoration: none;			
}

.vertsubitem .vertfwdarr, .vertitem .vertfwdarr	{   /* Positioning of right arrow for submenus */
	position: absolute;
	top: 5px;
	right: 8px;
}

.dmselected {   /* Style override for selected category tree */
    background-color: #ccc;
		font-weight: bold;
}

.verbar .dmselected {   /* Style override for selected root category */
    background-color: #999;
}

But unfortunately it doesn't mean a lot to me, i have tried changing single variables at a time, but to no avail. At present the structure is as follows:

Main Category
- Sub category 1
Sub category 2 -

I would like it to be:

Main Category
Sub category 1 -
- Sub category 2

If that makes sense? Any advice would be most appreciated.

Best Regards

Donna