CSS - Picture Problems

Dear All,
I have the following issue with the CSS solution (2).
Everytime I move the cursour over the pic it flashes


1.) If I display a picture/link like this .. it doesn't flash:

<a href="www.aaa.com"><img src="pic.gif" alt="" border="0" style="float: left; width: 250px; height: 163px; margin: 0 1.5% 0;" /></a>

works fine!

2.)Now doing it via CSS:

<a href="www.aaa.com" id="mainpic"><span>Test</span></a>

#mainpic {
float: left;
width: 250px;
height: 163px;
margin: 0 1.5% 0;
text-decoration:none;
background:url('pic.gif') no-repeat;
border:medium none;
display:block;
}
#mainpic span {
visibility:hidden;
}


Would be very nice if somebody could tell me what I'm doing wrong.
Thanks a lot in advance
Jack

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> <?
       } 

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.

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!

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;
}

How to add a background picture to a table？
Anyone helps? Thanks in advance.

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

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}

hi, i would like to ask if it is possible to make the background picture repeat diagonally, that is not one under another in a column.
somehow like this:
Code:

graphics   graphics   graphics   graphics   graphics   
   graphics   graphics   graphics   graphics   graphics   
      graphics   graphics   graphics   graphics   graphics   
         graphics   graphics   graphics   graphics   graphics   

thanx

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

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

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 am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container.

Anyone know why there is a shift, and what I can do about it?



Style sheet code pasted below:

Code:

body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3; 
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}

h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}

h2 {
font-size:2em;
}

h3 {
font-size:1.5em;
}

h4 {
font-size:1.25em;
}





a:link {
color:#8090AC;
text-decoration:none;
}

a:visited {
color:#B17F6C;
text-decoration:none;
}

a:hover {
color:#E9DF55;
text-decoration:underline;
}

a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}

#header {
height:200px;
width:760px;
margin:0;
padding:0;
}

#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
	font-size: 12pt;
	color: #e9df55;
	background-color:transparent;
	text-indent: 200pt;
	vertical-align: text-bottom;
}
navigate{
	color : #105BAC;
	background-color : transparent;
	height : 20px;
	font-size: 100%;
	border-top : 1px solid #999999;
}

#navigate ul {
	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 150px;
	margin-right: 0px;
	padding: 2px 0 0 0;
}
#navigate ul li {
	display: inline;
}
td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}
p {
	font-size: 14px;
	color: #FFFFFF;
	left: 50px;
	right: 50px;
}



#main {
	width: 660px;
	padding-right: 50px;
	padding-left: 50px;
}
#footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #666666;
	height: 100px;
	width: 760px;
	vertical-align: text-bottom;
	text-align: center;
	
}

#SplashImage {
	float: left;
}
.image-left {
	clear: none;
	margin-bottom: 10px;
	float: left;
	margin-right: 20px;
	margin-left: 10px;
}
.image-right {
	clear: none;
	margin-bottom: 10px;
	margin-left: 10px;
	float: right;
}

http://www.senti.ca/~kgf/programs/pickleball/

So here's the question... how do I make this picture, not transparent? Right now it's at 75% transparency on top of that background which makes it look very faded. Any ideas? I have tried:

Code:

	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity:1;

And placing it inside of a div... sadly this doesn't work.