CSS - The Background Picture Flashes

i have a screenshots page on a website for a peice of software i've written. it has a number of thumbnails on it, when you click a thimnail, the full size image pops up in a new window.

<a href="javascript: void window.open('fullSize.jpg', 'pic1', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=660,height=500');"><img src="thumbnail.jpg" width="120" height="90" border="0"></a>

i want the thumbnail to have an orange (#EE9515) border, bossibly 4px thick, when the user hovers over it. how do i do this?

[http://]blumoney[dot]latestdot[dot]net[/]plb[/]pictures[dot]php
You see?
I want the thumbnails to pile up underneath the full sized image.

I am trying to add a border to my pictures. I read a tutorial about it but however in firefox it escapes from the box. In IE it looks fine. Has anyone had this problem before? Any tips on fixing it?

Thank you

here is the link

http://www.conceptofgravity.com/test/pictures_test.html

My site is a .org that I recently created and I am having picture problems. For some reason that i cant under stand the picture wont link up to my menue as a sub menue and adjust the spacing and type like it does with the regular menu. Ideally I would like to modify it so it is random pick from a file on the server but IDk how and advice on how to make it not cut off my text or have my text over lap it. The site is my name IGADA dot org any suggestions. Really what I need to now is if i should be trying to make this happen in the CSS or in the HTML. I can post the relavent CSS if some one wants me too.

Hello, please take a look at http://www.inbalancepilates.ca/india.html

I've been trying to figure out why there is a purple border around the images. There's nothing in the CSS that's doing this, and none of the cells have borders.

Any help would be great, thanks!

the text on the left of the picture goes "in" a little bit to the image as can be seen he in firefox.
http://www.925-sterling-silver-jewe...ls.php?id=sl211

in IE its ok but its in middle! and yeah i know my css is lacking but i plan to do it all in css once i finish my implementation (php)


PHP Code:
<div style="float:left; position: relative; width: 255px; height: 215px; z-index: 1; left: 5px; top: 5px" id="layer1">
    <img border="0" width="255" height="215" src="images/<?php echo $product; ?>.jpg" > </div>
       <h2><span style="text-indent:0.5in">Detailed Information</span></h2>
       <b>Weight:</b> <?php echo $row['weight']; ?>
       <br/><?
       if($row['category'] == Anklets) { ?>
             <b>Diameter:</b><?php echo $row['diameter'];
       } else if($row['category'] == Bracelets) { ?>
             <b>Diameter:</b><?php echo $row['diameter']; ?>
             <br/>
             <b>Width:</b><?php echo $row['width']; 
       } else if($row['category'] == Necklaces) { ?>
             <b>Width:</b><?php echo $row['width']; ?>
             <br/>
             <b>Length:</b><?php echo $row['length'];
       } else if($row['category'] == Sets) { ?>
              <b><span style="color:red">not sure</span> <?
       } 

I have a 3 column layout: 1st -> 350px, 2nd -> 500px, 3rd -> remainder of containing div.

In the 2nd div, I have 15 pictures arranged to form the letter R, each picture is 100x100 px. I am not using absolute positioning.

I want the first and second column to have a background color of black that is 100% the height of the viewport. The middle column should have a white background and be 100% height. The problem is, the margins I am using for the pictures is throwing things off and I'm not sure how to fix it short of not arranging the pictures the way I want. Is there another way to arrange them to achieve the R shape?

Code:

<div id='container'>
     <div id='first'></div>
     <div id='second'>All of the images are loaded here.</div>
     <div id='third'></div>
</div>

Code:

#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img11, #img12, #img13, #img14, #img15, #img16, #img17, #img18, #img19, #img20 {
	display: block;
	border: 3px solid #B8860B;
	width: 100px;
	height: 100px;
}
#img1, #img2, #img3, #img4, #img5 {
	margin-left: 10px;
}
#img1 {
	margin-top: 60px;
}
#img2 {
	margin-top: 10px;
}
#img3 {
	margin-top: 10px;
}
#img4 {
	margin-top: 10px;
}
#img5 {
	margin-top: 10px;
}
#img6 {
	margin-top: -590px;
	margin-left: 125px;
}
#img7 {
	margin-top: -136px;
	margin-left: 240px;
}
#img8 {
	margin-top: -76px;
	margin-left: 355px;
}
#img9 {
	margin-top: 10px;
	margin-left: 380px;
}
#img10 {
	margin-top: 10px;
	margin-left: 355px;
}
#img11 {
	margin-top: -87px;
	margin-left: 240px;
}
#img12 {
	margin-top: -125px;
	margin-left: 125px;
}
#img13 {
	margin-top: 30px;
	margin-left: 305px;
}
#img14 {
	margin-top: 10px;
	margin-left: 365px;
}

On my site which im using to practice css, the picture isnt being displayed on the main page. Why is this?

http://www.trowbridge-wiltshire.co.uk/newtrowbridge

Cheers

When I setup a td and table to include a photo and I want the photo to "hug" all four sides of the td I just specify cellpadding and cellspacing = 0 within the table. then make sure the </td></tr></table> comes right after the img tag with no spaces or breaks. However I cannot seem to duplicate this in css. No matter what I do there's always a 1-2 pixel space between the photo and the border of the td. any thoughts?? I've looked up and tried to use every paramater I can find.

okey i m just putting hyperlink on picture and i get blue boarded around it? how can i remove it?

I have the following page.

I need the image and all the ajax to be centered on the page, no matter how the user resizes it. I've tried several different methods, but it always seems to screw up the positioning of the ajax buttons.

I would first like to say that I'm a noob to PHP. The problem that I am having is with my picture viewer. When you click on the thumbs, they show above in the main image viewer. The problem is that it is displaying the thumbnail instead of resizing the original image to fit the main image spot. When you click on the main image, the original pic is to be displayed in a lightbox. How do I go about fixing this issue? Thanks in advance for those who help!

Code:

http://conceptsinmotion.net/store/store?page=shop.product_details&flypage=flypage.tpl&product_id=1&category_id=17

PHP Code:
<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?>

<?php echo $buttons_header // The PDF, Email and Print buttons ?>

<?php
if( $this->get_cfg( 'showPathway' )) {
    echo "<div class=\"pathway\">$navigation_pathway</div>";
}
if( $this->get_cfg( 'product_navigation', 1 )) {
    if( !empty( $previous_product )) {
        echo '<a class="previous_page" href="'.$previous_product_url.'">'.shopMakeHtmlSafe($previous_product['product_name']).'</a>';
    }
    if( !empty( $next_product )) {        
        echo '<a class="next_page" href="'.$next_product_url.'">'.shopMakeHtmlSafe($next_product['product_name']).'</a>';
    }
}
?>
<br style="clear:both;" /><center>
<table border="0" style="width: 100%;margin-left: auto;margin-right: auto;">
  <tbody>
    <tr align="right">
      <td colspan="3" align="center">
      <?php  if( $this->get_cfg('showManufacturerLink') ) { $rowspan = 5; } else { $rowspan = 4; } ?>
      <div id="parent_img"><?php echo $product_image ?></div>
        <br/><br/>
        <?php if (count($images)): foreach ($images as $image){$curentwidth += $image->file_image_thumb_width;}?>
        <script type="text/javascript">
      iens6=document.all||document.getElementById
      ns4=document.layers
      var speed=5
      </script>
        <div id="scroll" style="margin-left: auto;margin-right: auto;">
      <div class="box-left" style="width: 15px; float: left;margin:10px 0px 0px 0px"><a class="mouseover_left" onmouseover="movedown()" onmouseout="clearTimeout(movedownvar)" href="#"><img src="<?php echo JURI::root().'components/com_virtuemart/themes/vm_black/images/prev.png';?>" alt="" border="0" /></a></div>
      <span class="box-right" style="float: right;margin:10px 0px 0px 0px"><a class="mouseover_right" onmouseover="moveup()" onmouseout="clearTimeout(moveupvar)" href="#"><img src="<?php echo JURI::root().'components/com_virtuemart/themes/vm_black/images/next.png';?>" alt="" border="0" /></a></span>
      <div id="container" style="overflow: hidden; width: 50%; position: relative; height: 55px;float:center">
        <div id="child" style="position: absolute; width: <?php echo $curentwidth;?>px; left: 0pt; top: 0pt;"> <ilayer name="nscontainer"> <layer name="nscontent" visibility="hidden"> <?php echo $this->vmlistAdditionalImages( $product_id, $images )?> </layer> </ilayer> </div>
      </div>
      <div class="box-right" style="float: right;margin:10px 0px 0px 0px"></div>
      </div>
      <script language="JavaScript1.2">
      if (iens6){
      var crossobj=document.getElementById? document.getElementById("child") : document.all.content
      var contentheight=crossobj.offsetWidth
      }
      else if (ns4){
      var crossobj=document.nscontainer.document.nscontent
      var contentheight=crossobj.clip.width
      
      }
      
      function movedown(){
      if (iens6&&parseInt(crossobj.style.left)>=<?php echo 64*count($images)*(-1)/5-32;?>)
      crossobj.style.left=parseInt(crossobj.style.left)-speed+"px"
      else if (ns4&&crossobj.left>=<?php echo 64*count($images)*(-1)/5-32;?>)
      crossobj.left-=speed
      movedownvar=setTimeout("movedown()",50)
      }
      
      function moveup(){
      if (iens6&&parseInt(crossobj.style.left)<=0)
      crossobj.style.left=parseInt(crossobj.style.left)+speed+"px"
      else if (ns4&&crossobj.left<=0)
      crossobj.left+=speed
      moveupvar=setTimeout("moveup()",50)
      
      }
      
      function getcontent_height(){
      if (iens6)
      contentheight=crossobj.offsetWidth
      else if (ns4)
      document.nscontainer.document.nscontent.visibility="show"
      }
      window.onload=getcontent_height
      </script>
        
     </td>
     <style type="text/css">
          ul.box li{float:left;list-style:none;padding-left:0 !important}
          ul.box{width:100%;margin:0px;padding:0px;}
          li:hover img{opacity:1}
          
      </style>
     
     <script type="text/javascript">
     function show_img(url)
     {
         var output1 = window.document.getElementById('curent').href=url;
         var output2 = window.document.getElementById('img_preview').src=url;
         return true;
         
     }
    
     </script>
     <?php endif;?><br /><br />
      </tr>
    <tr align="right">
      <td rowspan="1" colspan="3" align="right">
      <h1 style="margin-left: auto;margin-right: auto;"><?php echo $product_name ?> <?php echo $edit_link ?></h1>
      </td>
    </tr>
    <?php if( $this->get_cfg('showManufacturerLink')) { ?>
        <tr align="center">
          <td rowspan="1" colspan="3"><?php echo $manufacturer_link ?><br /></td>
        </tr>
        <tr align="center">
          <td colspan="3">&nbsp;</td>
      </tr>
    <?php } ?>
    <tr align="right">
      <td colspan="3" align="center" valign="top">
      <?php echo $product_price_lbl ?> 
      <?php echo $product_price ?><br /></td>
      </tr>
    <tr align="right">
      <td colspan="3" align="center" valign="top"><?php echo $product_packaging ?><br /></td>
      </tr>
    <tr align="center">
      <td colspan="3"><?php echo $ask_seller ?></td>
    </tr>
    <tr id="browseProductDescription">
      <td colspan="3" rowspan="1" align="center"><hr />
          <?php echo $product_description ?><br/>
          <span style="font-style: italic;"><?php echo $file_list ?></span>
      </td>
    </tr>
    <tr align="left">
      <td width="16%" align="left"><?php 
              if( $this->get_cfg( 'showAvailability' )) {
                  echo $product_availability; 
              }
              ?><br />
        </td>
      <td width="17%" align="right"><?php echo $addtocart ?></td>
      </tr>
      <tr align="center">
        <td colspan="4"><?php echo $product_type ?></td>
      </tr>
    <tr align="center">
      <td colspan="4"><hr /><?php echo $product_reviews ?></td>
    </tr>
    <tr align="center">
      <td colspan="4"><?php echo $product_reviewform ?><br /></td>
    </tr>
    <tr align="center">
      <td colspan="4"><?php echo $related_products ?><br />
       </td>
    </tr>
    <?php if( $this->get_cfg('showVendorLink')) { ?>
        <tr align="center">
          <td colspan="4"><div style="text-align: center;"><?php echo $vendor_link ?><br /></div><br /></td>
        </tr>
    <?php  } ?>
  </tbody>
</table></center>
<?php 
if( !empty( $recent_products )) { ?>
    <div class="vmRecent">
    <?php echo $recent_products; ?>
    </div>
<?php 
}
if( !empty( $navigation_childlist )) { ?>
    <?php echo $VM_LANG->_('PHPSHOP_MORE_CATEGORIES') ?><br />
    <?php echo $navigation_childlist ?><br style="clear:both"/>
<?php 
} ?>




Code:

/**
* Main CSS file for the "black color" theme for VirtueMart
* @copyright 2006-2008 soeren
* @colortheme (C) 2008 gtwillemsen - surpass.nl
* @license GNU/GPL
*
*/

/* General Shop Styles here please */
.addtocart_button, .notify_button {
	text-align:center;
	background-position:bottom left;
	width:160px;height:30px;
	cursor:pointer;
	border: none;
	font-weight:bold;
	font-family:inherit;
	color: #ffffff;
	vertical-align: middle;
	overflow:hidden;
}
.addtocart_button {
	background: url( 'images/add-to-cart.png' ) no-repeat  center transparent;
}
.notify_button {
	background: url( 'images/notify.png' ) no-repeat  center transparent;
}
.addtocart_button_module {
	text-align:center;
	background-position:bottom left;
	width:160px;height:30px;
	cursor:pointer;
	color: #ffffff;
	border: none;
	font-weight:bold;
	font-family:inherit;
	background: url( 'images/transparent.png' ) no-repeat  center transparent;
	vertical-align: middle;
	overflow:hidden;
	
}

input.addtocart_button_module:hover  {
	color: #333333;	
}

.addtocart_form {
	width: 100%;
	display: inline;
	white-space: nowrap;
}

/* The quantity box beneath the "add to cart" button  */
.quantity_box {	
	vertical-align: middle;
}
.quantity_box_button {
	width:10px;
	vertical-align:middle;
	height:10px;
	background-repeat: no-repeat;
	background-position: center;
}
.quantity_box_button_down {
	background-image: url(images/down_small.png);
}
.quantity_box_button_up {
	background-image: url(images/up_small.png);
}
.continue_link, .checkout_link {
	margin: 2px;
	padding: 2px 0px 2px 40px;
	vertical-align: middle;
	font-weight: bold;
	font-size: 1.4em;
	width: 40%;
}
.checkout_link {
	margin-left: 40px;
	background: url( 'images/forward.png' ) no-repeat left;
}
.continue_link {
	background: url( 'images/back.png' ) no-repeat left;
}
.next_page {
	background: url( 'images/next_16x16.png' ) no-repeat right;
	padding-right: 30px;
	line-height: 20px;
	float: right;
	width: auto;
}
.previous_page {
	background: url( 'images/previous_16x16.png' ) no-repeat left;
	padding-left: 30px;
	line-height: 20px;
	float: left;
	width: auto;
}

/* This is the text box informing customers about your returns policy */
.legalinfo {
	background: #cccccc;
	border: 2px solid gray;
	margin: 10px;
	padding: 0px 0px 10px 10px;
}

div.pathway {
	margin-bottom: 1em;
}

div.pathway img {
	padding: 0 2px;
}

/* The PDF, Email and Print buttons */
div.buttons_heading {
	margin:10px;
	width:10%;
	float:right;
}

.productPrice {
	font-weight:bold;
	white-space: nowrap;
}
.product-Old-Price {
	color:red;
	text-decoration:line-through;
}
/** BROWSE PRODUCTS STYLES **/
.browseProductContainer {
	width:100%;
	padding: 3px 3px 3px 3px;
	vertical-align: top;
}
.browseProductTitle {
	font-size: 16px; 
	font-weight: bold;
	padding: 3px;
	margin-top: 3px;
	width: 30%;
	float: left;
}
.browseProductImageContainer {
	float: left;
	width: auto;
	margin: 3px;
}
.browseProductImageContainer {
	margin: 3px;
	float: left;
	height:130px;
	width:120px;
}
.browseProductDetailsContainer {
	float: left;
	width: 70%;
}
.browseProductDescription {
	margin-top: 40px;
	width:40%;
}
.browsePriceContainer {
	float: left;
	margin: 5px;
	width:20%;
}
.browseAddToCartContainer {
	width:30%;
	text-align:center
}
.browseRatingContainer {
	float: left;
	width:25%;
	margin: 3px;
	white-space: nowrap;
}

/** Flypage Styles **/
.thumbnailListContainer {
	text-align: center;
	width: 200px;
	height: 200px;
	overflow: auto;
}

/*
General Form Styling
*/
.formLabel {
	float:left;
	width:30%;
	text-align:right;
	font-weight: bold;
	margin: 2px;
	white-space: nowrap;
	clear: left;
	vertical-align: middle;
	margin-top: 8px;
}

#agreed_div {
	white-space: normal;
}

.formField {
	float:left;
	width:60%;
	margin: 2px;
	vertical-align: middle;
	margin-top: 8px;
	
}
.missing {
	color:red;
	font-weight:bold;
}

/**
* Administration Styles
*/
.adminListHeader {
	float:left; height: 48px; background-repeat: no-repeat;
	text-align: left; font-size: 18px; font-weight: bold;
	padding-left: 80px;	
}

.labelcell {
	margin-left: auto;
	font-weight: bold;
	vertical-align: top;
	width: 30%;
}
table.adminform td.labelcell {
	text-align: right;
}
.iconcell {
	vertical-align: top;
	width: 5%;
}
.shop_error, .shop_warning, .shop_info, .shop_debug, .shop_critical, .shop_tip {
	background-color:#FAFAD2;
	background-position:left 5px;
	background-repeat:no-repeat;
	border-color:#AACCAA;
	border-style:dotted none;
	border-width:1px 0pt;
	font-weight: 900;
	margin:1pt 1pt 1em 1em;
	padding:0.5em 1em 1.5em 48px;
}
.shop_error {
	background-image: url( images/error.png );
}
.shop_warning {
	background-image: url( images/warning.png );
}
.shop_info, .shop_tip {
  	background-image: url( images/info.png );
}

.shop_debug {
	background-image: url( images/log_debug.png );

}
.shop_critical {
	font-weight: bold;
	background-image: url( images/log_critical.png );
}
/**
* Addtocart detail Styles
*/
.vmCartContainer { /* Cart Container */
	width: auto;
	float: right;
	background: #cccccc;
	border: 1px solid #000;
	padding: 3px;
}

.vmCartChildHeading { /* Header for the cart */
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 3px;
	text-align: left;
}

.vmCartChild { /* Container for the Child Product */
	
	vertical-align: middle;
	border: 1px solid #000;
	padding-left: 2px;
	padding-right: 2px;
	margin-bottom: 2px;
	float:left;	
}

.vmChildDetail { /* Child Detail, description , attributes ,price, quantity etc */
	vertical-align: middle;
	margin-top: 6px;
}

.vmCartChildElement { /* Individual element styling */
	width: 100%;
	vertical-align: middle ;
	height: 25px;
	text-align: left;
	
}

.vmCartAttributes { /* Attributes Div*/
	
	margin-top:8px;
	width:100%;
}

.vmAttribChildDetail {  /* Product Attributes Styling */
	
}
	

.vmMultiple {
	height:35px;
}



.vmChildType { /* Product type div*/

width: 100%;
}

.vmClearDetail { /*Clear the divs afer child types*/
	clear: both;
}

.vmClearAttribs { /*Clear the divs before the attributes*/
	clear:both;
}
.vmRowOne { /* Odd Row One styling */
	background: #cccccc;	
}

.vmRowTwo { /* Even Row Styling */
	background: white;
}

/* Link Details for link to child*/
.vmChildDetail a, .vmChildDetail a:link {
  font-size        : 11px;
  color            : #000000;
  text-decoration  : none;
  font-weight      : bold;
}
.vmChildDetail a:hover {
  font-size        : 11px;
  color            : #333333;
  text-decoration  : none;
  font-weight      : bold;
}
/* Styling for the form elements to enable correct Line Up  */
.inputboxquantity {
	margin-top: 3px;
	vertical-align: middle;
}
.availabilityHeader {
	text-decoration:underline;
	font-weight:bold;
}
.inputboxattrib {
	float: left;
	margin-top: 0px;
	vertical-align: middle;
	margin-bottom: 2px;
}

.quantitycheckbox {
	margin-top: 6px;
	vertical-align: middle;
}	

/**
* Addtocart detail Styles for placing attributes beside product_types
*/
.vmCartContainer_2up { /* Cart Container */
	width: 100%;
	float: left;
	background: #cccccc;
	border: 1px solid #000;
	padding: 3px;
}

.vmCartChildHeading_2up { /* Header for the cart */
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 3px;
	text-align: left;
}

.vmCartChild_2up { /* Container for the Child Product */
	
	vertical-align: middle;
	border: 1px solid #000;
	padding-left: 2px;
	padding-right: 2px;
	
	margin-bottom: 2px;
	float:left;	
}

.vmChildDetail_2up { /* Child Detail, description , attributes ,price, quantity etc */
	vertical-align: middle;
	margin-top: 6px;
}

.vmCartChildElement_2up { /* Individual element styling */
	width: 100%;
	vertical-align: middle ;
	height: 25px;
	text-align: left;
	
}

.vmCartAttributes_2up { /* Attributes Div*/
	float: left;
	padding: 0px 5px 5px 5px;
	margin: 0px 5px 5px 5px;
	width:50%;
}

.vmAttribChildDetail_2up {  /* Product Attributes Styling */
	
}
	
.vmMultiple {
	height:35px;
}

.vmChildType_2up { /* Product type div*/
	background: #cccccc;
	padding: 0px 5px 5px 5px;
	margin: 0px 5px 5px 5px;
	float: left;
	width: 40%;
	border: 1px solid #000;
}

.vmClearDetail_2up { /*Clear the divs afer child types*/
	
}

.vmClearAttribs_2up { /*Clear the divs before the attributes*/
	clear:both;
}
.vmRowOne_2up { /* Odd Row One styling */
	background: #cccccc;
}

.vmRowTwo_2up { /* Even Row Styling */
	background: white;
}

/* Link Details for link to child*/
.vmChildDetail_2up a, .vmChildDetail_2up a:link {
  font-size        : 11px;
  color            : #000000;
  text-decoration  : none;
  font-weight      : bold;
}
.vmChildDetail_2up a:hover {
  font-size        : 11px;
  color            : #333333;
  text-decoration  : none;
  font-weight      : bold;
}

.vmCartModuleList  {
  cursor : pointer;
  font-size        : 11px;
  color            : #000000;
  text-decoration  : none;
  font-weight      : bold;
}
.vmCartModuleList:hover {
  font-size        : 11px;
  color            : #333333;
  text-decoration  : none;
  font-weight      : bold;
}
.vmquote {
	margin: 4px;
	border: 1px solid #cccccc;
	background-color: #E9ECEF;
	padding: 10px;
	font-size: 12px;
	color: #254D78;
}
.editable {
	background: #ffff33;
	cursor: pointer;
}
ul.pagination li {
	padding: 2px 1px;
	display: inline;
	background: none;
}
.hr {
  clear:both;
  border:1px solid #FFFFFF;
  height:1px;
  width:100%;
  text-align:left;
}
.hr_div {
        height:10px;
        width:100%;
}
.clr {
  clear: both;
  overflow:hidden;
}
.box img, #child ul li a img {
height:48px;
margin:0 2px 0 0;
width:64px;
}
#parent_img {width: 325px; height: 221px; margin-left: auto; margin-right: auto;}
#parent_img a {text-decoration: none;}
#parent_img a img {width: 325px; height: 221px}

Dear All,

On top of my page I like to have a picture which is stretched from left to right with an gap (left/right) of 11px.

That works for IE & Opera.

BUT in Netscape & Firefox it doesn't stop 11px on the right site. ??????

Does anybody have an idea .. damn think is quite important for my design.

The call in (XHTML validated) page is.
<div id="banner">
<img class="ocean" src="/_img/headers/texture.gif" alt="" />
</div><!-- end banner -->

the CSS:
.ocean {
position:absolute;
top:12px;
width: 100%;
left:11px;
right:11px;
height: 110px;
border: 0;
}


banner
#banner {
background:#fff;
background-color: #7adaff;
height:110px;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-bottom: 1px solid white;
voice-family: "\"}\"";
voice-family: inherit;
height:110px;
}
html>body #banner {
height:110px;
}

body {
margin:10px 10px 10px 10px;
padding: 0;
font: 'verdana', 'geneva', 'arial', 'sans-serif';
color : #6388ff;
background-color: tomato;
border: 1px solid white;
}

Appreciate any ideas

Jack

I have 2 problems with the following code:
1- the vertical align only works in FF (not IE)
2- i cannot get the #index .contact to attach to the bottom right hand corner of the wrapper



* {
margin: 0;
padding: 0;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
}

body{
font: 100% verdana, helvetica, sans-serif;
background-color: #fff;
color: #000;
}

#container{
display: table;
height: 100%;
width: 100%;
margin: 0;
}

#content{
display: table-cell;
vertical-align: middle;
position: relative;
}

#index{
border: 1px dotted gray; /*for clarity in the demo*/
width: 900px;
height: 645px;
margin: 0 auto;
}
#index .logo{
position: relative;
top: 0px;
left: 0px;
}
#index .contact{
position: absolute;
bottom: 0px;
right: 0px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> I2Eye Design </title>
<link rel="stylesheet" href="/styles/main.css">
</head>
<body>

<div id="container">
<div id="content">
<div id="index">
<div class="logo">logo</div>

<center>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="400" height="400" id="index_eyeball" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="index_eyeball.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="index_eyeball.swf" quality="high" bgcolor="#ffffff" width="400" height="400"
name="index_eyeball" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</center>

<div class="contact">contact button</div>
</div>

I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this?

The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever.

http://www.area51entertainment.co/index.php?about