CSS - Flashing (blinking) Table Bkg Images, When Hiding/showing <div>'s

I am having a problem with some css image links not showing up in some browsers (IE 7, for example). Seems to work on most Mac browsers (of course!) Any help is appreciated! I've tried a few different things with the code, which explains the few items that are commented out.

HTML:

<a href="contact-form.php" class="more-info"><img src="images/spacer.gif" width="156" height="79" /></a>
<a href="charity.php" class="community"><img src="images/spacer.gif" width="154" height="72" /></a>

CSS:

a.more-info:link {
display:block;
overflow:hidden;
text-indent:-9999px;
width:156px;
height:79px;
background:url(../images/more-info2.png) no-repeat 0 0;
margin:6px 0 0 3px;
}

a.more-info:hover{
background-position: -156px;
}

a.community:link{
display:block;
overflow:hidden;
text-indent:-9999px;
width:154px;
height:72px;
background:url(../images/community.png) no-repeat 0 0;
margin:6px 0 0 3px;
}

a.community:hover{
background-position:-154px;
}

Hi

I'm having some problems with CSS and was hoping that somebody on here could help me.

Firstly despite having a container (wrap) div set to a padding of : 0px auto; the site is not centering.

Second none of my images are showing, I've attempted to add a background and header image but neither are showing.

I'm a little confused because the same methods work fine on my wordpress site.

Here is a link to the dev site;

C:\Users\Keith\Documents\Site\index.html

And below is the CSS code;

Code:

/* ------------------------------
HTML Redefine Tags
------------------------------ */
body {
	width: 100%;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px;
	background: url (img/background.jpg) no-repeat bottom;
}

input, form, textarea

h1, h2, h3, h4, h5, h6 {
	margin: 0; 
	padding: 0;
}

h1 {
	font-size: 18px;
}

h2 {
	font-size: 14px; 
	color: #999999;
}

h3 {
	font-size: 13px; 
	border-bottom: solid 1px #DEDEDE; 
	padding: 4px 0; 
	margin-bottom: 10px;
}

a:link, a:visited {
	color: #0033CC;
}

a:hover {
	text-decoration: none;
}


/* ------------------------------
PAGE STRUCTURE
------------------------------ */

/* #container has an absolute width (780 pixel) */

#container {
	width: 1024px;
	background: #ececec; 
	margin: 0px auto;
}

#topbar {
	width: 1000px;
	height: 118px; 
	display: block; 
	background: url(img/header.png);
	float: left;
	position: relative
}

#navbar {
	width: auto; 
	display: block; 
	height: 28px;
}

#navbar a {
	heigth: 28px; 
	line-height: 28px; 
	padding: 0 8px; 
	display: inline;
}

#main {
	width: auto; 
	display: block; 
	padding: 10px 0;}

#column_left {
	width: 332px; 
	height: 387px;
	margin-right: 1px;
	margin-left: 13px; 
	background: #000;
	float: left;
}

#column_right {
	width: 332px;
	height: 387px; 
	margin-right: 1px;
	background: #000; 
	float: left;
}

#column_right_adsense {
	width: 332px;
	height: 387px;
	background: #000; 
	float: left;
}

div.spacer {
	clear: both; 
	height: 10px; 
	display: block;
}

#footer {
	width: 1000px;
	height: 150px; 
	display: block;
	margin: 0 13px; 
	padding: 10px 13px; 
	font-size: 11px;
	color: fff; 
	background: #737373;
}

how can i make a blinking text in the css file? as i make a text decoration, i didn't blink! my browser was ie 6 already...

I would like someone else to take a look at this code and see if they can figure out what's wrong.

I'm having a problem getting my dropdown navigation menu to stay live. Instead, when someone moves between options (table rows), the menu flashes. This happens in IE (and not Firefox) and the odd part is that this just started happening. And its not just my computer, it's several other people.

Also, another odd part is that I have the same CSS code (as in using the same functions) used to display the same navmenu on another subdomain, and it works just fine.

You can see the non-working menu here. Here is the working version.

The method of how I display the nav menu is below. Here is the HTML (I have removed the links):

Code:

  <td onmouseover="showmenu('news')" onmouseout="hidemenu('news')" class="fullnav">
   <a href="#" class="fullnav">News</a><br />
   <table class="navmenu" id="news" width="140" cellpadding="0" cellspacing="0">
   <tr><td class="navmenu">Home</td></tr>
   <tr><td class="navmenu">Articles</td></tr>
   <tr><td class="navmenu">News Archives</a></td></tr>
   <tr><td class="navmenu">Quick Hits</td></tr>
   <!-- <tr><td class="navmenu>Blog</td></tr> -->
   <tr><td class="navmenu">Blog</td></tr>
   </table>
  </td>

The relative CSS:

Code:

td.navmenu {
 padding: 3px;
 color: #FFFFFF;
 background-color: #5a7f60;
}
table.navmenu {
 font-size: 11px;
 position: absolute;
 visibility: hidden;
 border-width: 1px;
 border-style: solid;
 border-color: #000000
}
table.fullnav{
 background-color: #FFFFFF;
 border-width: 2px;
 border-style: solid;
 border-color: #48674d;
}
td.fullnav {
 padding-left: 30px;
 background-color: #5a7f60;
}
a.navmenu{
 text-decoration:none!important;
 color:#FFFFFF!important;
}
a.navmenu:hover{
 color: #e7fe25!important;
}
a.fullnav{
 text-decoration: none!important;
 font-weight: bold!important;
 font-size: 13px!important;
 color: #FFFFFF!important;
}
a.fullnav:hover{
 color: #e7fe25!important;
}

And finally, the function I use to make it visible:

Code:

function showmenu(elmnt) {
	document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt) {
	document.getElementById(elmnt).style.visibility="hidden"
}

This problem just started happening, but frustratingly I can't remember what I was changing when it started happening.

The problem is that (almost) all the images on the site seem to be "bumped" 1px out of place, with a black border showing on the top and left hand sides of the images. This is not showing up with ALL images, however. I've embedded an image and you can see the effect on the logo, on the graphics in the body text, and on the sub-menu items (with the 'empty' box icons). However the effect does not occur on the menu items with the 'full' box icons.

OK, apparently, I CAN'T EMBED AN IMAGE. Or a link to an image. Or a link to the site in question. SO I have no idea how I am actually supposed to get help for this problem.

If someone can PSYCHICALLY DEDUCE what the problem might be without being able to view the site or an image of the problem, that'd be ACE!

GAAAAH

Alright, let's see if we can do this with JUST the CSS & HTML. Here is the CSS:
Code:

html {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
}
 body {
margin: 0; 
padding: 0; 
background-color: #FFFFFF;
background-image:url('background-index.gif');
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #666666;
min-width: 900px;
min-height: 100%;

}

img {
border:0;
}

a:link {
text-decoration: none;
color: #0096db;
}

a:hover {
text-decoration: underline;
}

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

#header {
width:900px;
height:80px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0096db;
}

#logo {
float:left;
width:140px;
margin:0;
padding:0;
}

#head_nav {
width:760px;
position:relative;
float: right;
background-color: #ebf9ff;
height: 80px;
margin:0;
padding:0;
}

#clear_both {
clear:both;
}

#sidenav {
float:left;
width:100px;
padding-left:10px;
padding-top:0;
margin-top:0;
}

#content_wrap {
float:right;
width:760px;
background-color: #ebf9ff;
background-image:url('content-background.gif');
}

#content {
float:left;
width:500px;
}

#content h1, h2, h3, ul {
padding-top: 15px;
padding-left: 15px;
}

#content p {
padding-left: 15px;
}

#focus_box {
width:260px;
float: right;
margin-top:0;
padding-top:0;
}

#focus_box h1 {
padding-top:15px;
}

#focus_box p, h1, ul {
padding-left:15px;
}

table.blue_highlight {
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#0096db;
margin-left:15px;
margin-right:15px;
padding-top:15px;
padding:0;
margin:0;
}


#menu2 {
float: left;
width: 200px;
}

#main {
float: right;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #666666;
}

ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #666666;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: 700;
color: #0096db;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color:#666666;
font-weight: bold;
}

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: ;
}

/*!!!!!!!!!!! MENU STYLES FOR LEVEL1MENU !!!!!!!!!!!*/

#level1menu {
position:absolute;
bottom:0px;
padding-left:60px;
}

#sitemap li {
margin-left: 15px;
}

#sitemap ul {
margin-bottom:15px;
}

#sitemap ul li ul {
margin-left:15px;
}

And here is the HTML:
Code:

<%@ LANGUAGE="VBSCRIPT" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


	<title>BB Group Homes</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "(URL address blocked: See forum rules)">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body class="developments">
<div id="header">
<div id="logo">
<!--#INCLUDE FILE="logo.asp" -->
</div>
<!--END LOGO-->
<div id="head_nav">

<!-- #INCLUDE FILE="menutop.asp" -->

<!-- END MENU_TOP -->
<div id="level1menu">
<!-- #INCLUDE FILE="level1menu.asp" -->
</div>
<!--END level1menu-->
</div>
<!--END HEADER -->
<div id="clear_both"></div>
<div id="sidenav">
<!-- #INCLUDE FILE="menu_developments.asp" -->
</div>
<div id="content_wrap">
<img src="banner_developments1.png">
<div id="focus_box">
<!-- #INCLUDE FILE="focus_boxes.asp" -->
</div>
<div id="content">
<h1>Developments</h1>
<table class="blue_highlight">
<tr>
 <td><a href="golfsociety.asp"><img src="Golf_society_residence_logo.gif"></a></td>
 <td><h2>Golf Society Residence</h2>
<p>The Golf society project was initiated for a variety of reasons, some of which include the scenic environmental landscape, increasing trend of Bodrum as a holiday destination for tourists and natives, the beach and the close proximity to the airport.</p>
<p><a href="golfsociety.asp">-> More</a></p></td>
</tr>
</table>
<table class="blue_highlight">
<tr>
 <td><a href="thevillage.asp"><img src="thevillagelogo.gif"></a></td>
 <td><h2>The Village Bodrum - Tuzla</h2>
<p>You will find everything you have dreamed of at Vita Park Golf Resort, a world-c1*** destination in the heart of the peninsula Bodrum, the famed pearl of the Aegean Sea. </p>
<p><a href="thevillage.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluemarina.asp"><img src="bluemarinalogo.gif"></a></td>
 <td><h2>Blue Marina Bodrum - Yalikavak</h2>
<p>Blue Marina Apartments, overlooking the spectacular view of Yalıkavak amongst the centeranian olive trees, designed for all year long living, your comfort and every desire is planned to the finest detail.
</p>
<p><a href="bluemarina.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
 <td><h2>Blue Life Bodrum -Yalikavak</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living  rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
 <td><h2>Kalkan Luxus Villas</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living  rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<p></p>
</div>
</div>

</body>
</html>


</body>

</html>

A lot of the images that are showing the 1px-off problem are contained in the SSIs (I don't think anyone here wants me to post the full content of the SSIs, do they?) but quite a few of the images in the main HTML are, as well: banner_developments1.png & all the logos.

This would be a lot easier if I could show you a picture of what was going on.

Hi there, Everyone:

Firstly, I am a CSS noob...

My site is:

wwwDOTincenseforpeaceDOTcom

(change the word DOT to a . please, new users are not allowed to post URLs on this forum. Thanks)

I have a red background gif on my site. In firefox, it looks great. It DOESN'T show through the cell borders of the main table.

However, it is showing through the cell borders of a table in Internet Explorer (at least IE 8, haven't checked with earlier versions of IE).

Any idea on how to get it to stop showing through on IE?

This is what I THINK is the main table CSS (I told you I am a noob when it comes to CSS).

#content-container{
clear:both;
width:100%;
border-style:solid;
border-color:#666666;
border-spacing:0;
border-width:0 0; /* was border-width:1px 0; before */
padding:0 0 0 0;
margin:0;
/* ie6 min-height hack */
height:270px;
max-height:270px !important;

Thanks in advance.

The following code works in most browsers but not so well in IE, there seems to be an extra block of css shading in the last box in the row.
this is what we really want removed.

has anyone got any ideas how the issue IE can be fixed.

thanks in advance for your help.



Code:

<style type="text/css">
<!--
.menucontainer { background:#799BD9; margin:0 5px;}
.menurtop1, .menurbottom1{ display:block; background:#125892; }
.menurtop1 *, .menurbottom1 *{ display: block; height: 1px; overflow: hidden; background:#799BD9; }
.r1{ margin: 0 5px}
.r2{ margin: 0 3px}
.r3{ margin: 0 2px}
.r4{ margin: 0 1px; height: 2px }
a.one:link { color: #000; }
a.one:visited { color: #000; }
a.one:hover { color: #fff; }
a.one:active { color: #000; }
a.one { text-decoration: none; }
h1 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 0; padding: 5; }
h2 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 5; padding: 5; }
-->
</style>
<style>
<!--
A {color:#000000; font-weight: normal;}

A:hover {color: #0066FF; font-weight: normal;}
-->
</style>
<body bgcolor="#003399">
<table width="100%" style="border-collapse:collapse;">
  <tr> 
    <td width="0%" height="21">
	<div class="menucontainer" align="center">
	<b class="menurtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
	    <table width="100%" style="border-collapse:collapse;" dwcopytype="CopyTableColumn">
          <tr> 
            <td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=a" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l1</font></a> </div></td>
            <td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/members/index.php?ac=s" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l2</font></a> </div></td>
            <td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/members/index.php" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l3</font></a> </div></td>
            <td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=f" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l4</font></a> </div></td>
            <td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=c" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l5</font></a> </div></td>
            <td NOWRAP> <div align="center"><a class="bm" title="link me" href="http://<?=$siteurl;?>/?ac=b" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l6</font></a> </div></td>
            <td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=s" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l7</font></a> </div></td>
          </tr>
        </table>
<b class="menurbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
	</td>
    <td width="5%" NOWRAP><div align="center"><font color="#FFFFFF" size="2" face="Tahoma">123456</font></div></td>
  </tr>
</table>

I have a table as specified:

Code:

<div id="box"> // 800px set to center it with the rest of page
<table id="box"> // for the rest check the css code
  	<tr>
    	<td id="box_top"></td> 
  	</tr>
  	<tr>
    	<td id="box_left"></td>
    	<td id="box_middle"></td>
    	<td id="box_right"></td>
	</tr>
  	<tr>
    	<td id="box_bottom"></td>
  	</tr>
</table>
   </div>

Code:

div#box {
width: 800px;
height: auto;
}

table#box {
table-layout: fixed;
width: 761px;
height: auto;
border-collapse: collapse;
}

#box_top {
background-image: url(images/table_02.png);
width: 761px;
height: 27px;
}

#box_left {
background-image: url(images/table_05.png);
background-repeat: repeat-y;
width: 19px;
min-height: 200px;
}

#box_middle {
background-image: url(images/table_06.png);
width: 761px;
min-height: 200px;
background-repeat: repeat;
}

#box_right {
background-image: url(images/table_07.png);
background-repeat: repeat-y;
width: 18px;
min-height: 200px;
}

#box_bottom {
background-image: url(images/table_12.png);
width: 761px;
height: 26px;
}

The table is collapsed (not at the minimum height), and the middle BG is not repeating, not even showing up. Is there anything wrong here? I've tried making a table using <div> tags but I can't really get the float / clear down yet. I've been doing CSS for a whole 2 days .


Here is a view of the website. (the first table is using <table>), the 2nd I was trying <div> with floating elements.

ok, if you go he

http://www.whiteazn.com/satworld/gallery

youll see at the top, the image ... being overlapped by the row below ....

im trying to use CSS without using tables .....

but any image not inthe first column, doesnt push the row under it down ...

the first column is position: relative, the 2nd and 3rd columns are position: absolute (to get it inthe column position) ....

any other way of doing it so that it will push the row down respectively?

here is the html code that gets outputted to the screen for the whole gallery:

PHP Code:
<div id="galleryContainter">  
<div class="galleryRow">
    <div class="galleryImage1">
        <p class="galleryIMG"><a href="viewimage.php?id=42"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif" width="100" height="60" alt="Gallery Image" /></a><br /><br />
            testing completion of pagination again</p>

      </div>
    <div class="galleryImage2">
        <p class="galleryIMG"><a href="viewimage.php?id=41"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif" width="180" height="110" alt="Gallery Image" /></a><br /><br />
            testing image insert and page numbers</p>
      </div>
    <div class="galleryImage3">        <p class="galleryIMG"><a href="viewimage.php?id=38"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />            on to 2 pages</p>      </div>

    </div>

  <div class="galleryRow">
    <div class="galleryImage1">
        <p class="galleryIMG"><a href="viewimage.php?id=37"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />
            on to 2 pages</p>
      </div>
    <div class="galleryImage2">
        <p class="galleryIMG"><a href="viewimage.php?id=36"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />

            on to 2 pages</p>
      </div>
    <div class="galleryImage3">        <p class="galleryIMG"><a href="viewimage.php?id=34"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />            on to 2 pages</p>      </div>
    </div>

  <div class="galleryRow">
    <div class="galleryImage1">

        <p class="galleryIMG"><a href="viewimage.php?id=32"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />
            on to 2 pages</p>
      </div>
    <div class="galleryImage2">
        <p class="galleryIMG"><a href="viewimage.php?id=31"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />
            on to 2 pages</p>
      </div>
    <div class="galleryImage3">        <p class="galleryIMG"><a href="viewimage.php?id=30"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />            on to 2 pages</p>      </div>

    </div>
  <div class="galleryRow">
    <div class="galleryImage1">
        <p class="galleryIMG"><a href="viewimage.php?id=29"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />
            on to 2 pages</p>
      </div>
    <div class="galleryImage2">
        <p class="galleryIMG"><a href="viewimage.php?id=28"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />

            on to 2 pages</p>
      </div>
    <div class="galleryImage3">        <p class="galleryIMG"><a href="viewimage.php?id=27"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />            on to 2 pages</p>      </div>
    </div>
</div> 





here is the respective CSS:

PHP Code:
/*****************
Gallery Styles
*****************/

#galleryContainter {
    position: relative;
    width:552px;
    margin: 0px;
}

.galleryRow {
    position: relative;
    width: 552px;
    margin: 0px;
    padding-bottom: 5px;
}

.galleryImage1 {
    position: relative;
    top:0px;
    left: 0px;
    width: 180px;
    padding: 2px;
}

.galleryImage2 {
    position: absolute;
    top:0px;
    left: 188px;
    width: 180px;
    padding: 2px;
}

.galleryImage3 {
    position: absolute;
    top:0px;
    left: 376px;
    width: 180px;
    padding: 2px;
}

.galleryIMG {
    text-align: center;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
}

.galleryIMG img {
    border: 2px solid #900;
}

.viewImage {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
} 





thanks ....

sorry if this seems easy ... im just new at trying this new thing of using all CSS, strict, no tables for layout, standards mentality of coding ...

yes i am a css n00b and am trying to place a sliced image (with a link in one slice) from a table (yes adobe) into a <div> like this...
Code:

<!-- display welcome div-->
<div id="welcome">
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
	<tr border="0">
		<td colspan="3">
			<img src="images/welcome_01.jpg" width="536" border="0" height="99" alt=""></td>
	</tr>
	<tr border="0">
		<td rowspan="2">
			<img src="images/welcome_02.jpg" width="67" border="0" height="128" alt=""></td>
		<td>
			<a href="search.php">
				<img src="images/welcome_03.jpg" width="124" height="107" border="0" alt="search viera florida real estate brevard fl"></a></td>
		<td rowspan="2">
			<img src="images/welcome_04.jpg" width="345" border="0" height="128" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/welcome_05.jpg" width="124" border="0"height="21" alt=""></td>
	</tr>
</table>

here is my css snip...
Code:

#welcome{
   padding: 10px 10px 10px 10px;
   height: 250px;
   color: #000000;
   text-indent: 0px;
   
}

the problem is that the sliced image seems to have borders around each slice so the composite images is being rendered thusly..


link to jpeg

URL

http://www.viera-brevard-real-estate.com/badTable.jpg

any ideas appreciated..

advTHANKSance,
- mark

I want to change the "flashing cursor" color in an input field in my css.

This field has a dark background, the text over it is white but when you click in it, the flashing cursor is darkgray an almost invisible.

Look in my login and password box, you will understand:
http://www.jeudebourse.com.

I'm mostly speaking in French and I don't know what is called this cursor. I don't mean the mouse pointer but the cursor that is flashing in the field to indicate your position in this field.

Thanks.

Does anyone know how to manipulate images within spliced tables? I need to manipulate them with CSS so that that bottom half of the image is revealed only when it is clicked or hovered over?

("images/Home.gif", "images/services.gif", "images/Contact.gif", "images/Gallery.gif")


<!-- Save for Web Slices (BannerEdit.psd) -->
<table id="Table_01" width="974" height="220" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6">
<img src="images/SpliceBanner_01.jpg" width="974" height="137" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/SpliceBanner_02.jpg" width="78" height="83" alt=""></td>
<td rowspan="3">
<img src="images/Home.gif" width="208" height="83" alt=""></td>
<td colspan="4">
<img src="images/SpliceBanner_04.jpg" width="688" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Services.gif" width="207" height="82" alt=""></td>
<td colspan="3">
<img src="images/SpliceBanner_06.jpg" width="481" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Contact.gif" width="205" height="81" alt=""></td>
<td>
<img src="images/Gallery.gif" width="198" height="81" alt=""></td>
<td>
<img src="images/SpliceBanner_09.jpg" width="78" height="81" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->

I am displaying a list of users on my site. Each user has a picture with some text below. I want to display this image+text block" and I want it to wrap like text.

I made inline div and tables with these elements but it seems to wrap arbitrarily around the page.

any suggestions?

does anyone know how i can get 4 background images in my table, one for each corner of the table?

they are curved images, as i am aiming for the table to have curved edges.

Thanks