CSS - Css Box That Is Sticky In Upper Right Hand Corner While Scrolling

friends
i have table..
that table corner must be in the curve form..
i dont know to do..
plz send the links for my problem


curve edge is my output..
for that related css link plz



thanks in advance

Am having a problem with turning a design into a tableless layout.
I've attached the part of the layout I'm trying to code and this is the code I'm using:

xhtml Code:
Original - xhtml Code <div class="content"> <div class="bar">Devshed Rocks the socks of oneself</div> <div class="leftcon">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lu ptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div> <div class="rightcon">Hey</div> </div>

  
    <div class="content">
        <div class="bar">Devshed Rocks the socks of oneself</div>
        <div class="leftcon">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
        lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
        esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, 
        consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
        eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lu ptatum zzril 
        delenit augue duis dolore te feugait nulla facilisi.</div>
        <div class="rightcon">Hey</div>
    </div>

And here is the css:

css Code:
Original - css Code .content { width:570px; float:right; margin-top:20px; background-color:#CCCCCC; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; } .leftcon { width:450px; padding:5px; float:left; border-right:1px solid black; background-color:#FFFFFF; padding-left:15px; background-image:url(images/cornerbot.jpg); background-repeat:no-repeat; } .bar { background-color:#66CC00; font-size:12pt; padding:10px; padding-left:15px; background-image:url(images/corner.jpg); background-repeat:repeat-y; }

  

 .content {


 width:570px;


 float:right;


 margin-top:20px;


 background-color:#CCCCCC;


 font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;


 }


  


 .leftcon {


 width:450px;


 padding:5px;


 float:left;


 border-right:1px solid black;


 background-color:#FFFFFF;


 padding-left:15px;


 background-image:url(images/cornerbot.jpg);


 background-repeat:no-repeat;


 }


  


 .bar {


 background-color:#66CC00;


 font-size:12pt;


 padding:10px;


 padding-left:15px;


 background-image:url(images/corner.jpg);


 background-repeat:repeat-y;


 } 

The corner image simply won't line up with the bottom half of the corner which I have as the left floated background image. Anyone able to point out what I'm doing wrong or perhaps offer another solution?

Thanks

Hello

I did try, search, change samples from this forum, ( found one about to place a image down at left ).

I need a image on the right side at the bottom of a container with text. The text should float arround ( left and above ) the image. Simple target to say, but even with samples from some books and this forum, I can't get it to work.

How to let work on the left or right top alligned, I did wrote a working sample.
Please can anybody help me out.

I am trying to attach 4 rounded images to a box, I have read hundreds of guides but non that seem to help. The problem I think is that I have set the size of the box rather than letting the amount of text written in it define the size. The idea is that the white box (mainarea) will have 3 different colour boxes inside it, but herein lies another problem. They are not inside the box they are merely on top of it, is this a problem. At the moment I have one corner (bottom left) positioned perfectly. My problem is the other 3. As you can see I have removed all the previous attempts to do this. Please someone help I think my hair is falling out!

CSS

Code:

body { 
 background-image: url(bg2.png); 
 background-repeat: repeat; 
}

#image1 {
 position:relative;
 width:650px;
 height:125px;
 background-image: url(banner.png);
 margin-left: auto;
 margin-right: auto;
}

#navi {
 position:relative;
 top:20px;
 margin-left: auto;
 margin-right: auto;
 width:650px;
 height:50px;
 background-image: url(navibg.png);
 /*background : #ffcc66 url(bg_navPrimaryShadow.gif) repeat-x 0 100% */
 }

#mainarea {
 position:relative;
 top:40px;
 margin-left: auto;
 margin-right: auto;
 width:650px;
 height:480px;
 background:#ffffff url(cornerbtlft.png) 0 100% no-repeat;
 }


#box1 {
 position:absolute;
 top:250px;
 left:200px;
 width:600px;
 height:150px;
 background-color:#ffcc66;
 }

#box2 {
 position:absolute;
 top:420px;
 left:200px;
 width:280px;
 height:275px;
 background-color:#ffcc66;
 }
 
#box3 {
 position:absolute;
 top:420px;
 right:200px;
 width:280px;
 height:275px;
 background-color:#ffcc66;
 }

#leftlg {
 position:absolute;
 top:230px;
 left:17px;
 width:140px;
 height:500px;
 background-color:#ffffff;
 }
 
#rightlg {
 position:absolute;
 top:230px;
 right:17px;
 width:140px;
 height:500px;
 background-color:#ffffff;
 }
 
#footer {
 position:relative;
 height:70px;
 }

HTML

Code:

<body>
<div id="image1"></div>

<div id="navi"></div>


<div id="mainarea"></div>
<div id="topleft"></div>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="leftlg"></div>
<div id="rightlg"></div>
<div id="footer"></div>


</body>

I've only recently started teaching myself CSS and have been playing around with various techniques. The problem I'm having is that for some reason, there is a little box in the top left part of the page. Its link is the same as the link in my header, but it follows the behaviors of my navigation links. This doesn't make any sense to me since the two should be completely separate from each other. So the problems are that there is this little box in the top of the screen that shouldn't be there and why is it behaving the same as my navigation links. Here's a screenshot of what I'm talking about:

Screenshot

And I know the colors and page look horrible, I'm just playing around with things now.

Here's my CSS code:
Code:

body{ 	background: #000000 url('BG.gif') repeat-y 50%; 	background-attachment: fixed; 	padding: 0; 	margin: 0; 	z-index: 1; }  #container{ 	width: 800px; 	margin: 0 auto; 	text-align: left; 	padding: 0; }  #header{ 	padding: 0; 	margin: 0; }  #header h1{ 	text-indent: -99999px; 	background: #AAEECC; 	height: 125px; 	width: 800px; 	padding: 0; 	margin: 15px 0 0 0; }  #header img{ 	border: 0 none black; }   #navigation{ 	background: blue; 	height: 35px; 	border: 2px white solid; 	-moz-border-radius: 12px; 	z-index: 1; }  #navigation ul{ 	list-style: none; 	margin: 0; 	padding: 5px 300px; 	font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif; 	z-index: 1; 	-moz-border-radius: 2px; 	border: 1px black solid; }  #navigation li{ 	color: white; 	padding: 2px; 	z-index: 1; 	display: inline; 	text-align: center; 	float: left; } #navigation a{ 	z-index:1; 	text-decoration: none; }  #navigation a:link, a:visited{ 	background: #DD33AA; 	padding: 5px; }  #navigation a:hover, a:active{ 	padding: 20px; 	background-color:#7A991A; }  #content{ 	padding: 10px; 	text-indent: 15px; 	background: #333000; 	min-height: 250px; 	width: 630px; 	color: #ffffff; 	float: left; 	margin: 5px auto auto 5px; 	-moz-border-radius: 45px; 	border: 2px white solid; 	-moz-box-shadow: 10px 10px 2px #999; 	z-index:2; }  #left{ 	width: 105px; 	padding: 10px; 	-moz-border-radius: 15px; 	border: 2px white solid; 	min-height: 270px; 	float: left; 	background: #FA3333; 	z-index:2; }  #clear{ 	clear: both; } #footer{ 	width: 780px; 	background: #A82921 50%; 	padding: 4px 10px; 	text-align: center; 	margin: 0 auto 0 0; 	clear: both; 	position: relative; 	opacity: .8; }

And here's the HTML code:
Code:

 <body>  <div id="container">  	<div id="header"> 		<a href="http://www.yahoo.com"><h1>My Site</h1></a>	 	</div>  	<div id="navigation"> 		<ul> 		<li><a href="http://www.google.com">Home</a></li> 		<li><a href="http://www.google.com">Page 2</a></li> 		</ul> 	</div> 	 	<div id="left">Left side</div> 	 	<div id="content"> 		Content goes here 	</div> 	<div id="clear"></div> 	<div id="footer"> 		Footer 	</div>  </div>  </body>

I have searched around, but nothing has yet fixed my problem. I have a table. I want one of the cells to have a white background, a black border and rounded corners. However, when I try to place the curve images in the corner, they jump to the corners of the table and not the cell. Can anyone spot my mistake/guide me to a higher level of understanding? Thanks in advance.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            div.RedTable {
                position: relative;
                width: 700px;
                min-height: 500px;
                background-color: #8B0000;
                border: 2px solid black;
            }
                td.ContentWindow {
                    position: relative;
                    background-color: white;
                    border: 2px solid black;
                    padding: 10px;
                    margin: 10px;
                }
                    img.WindowULCorner {
                        position: absolute;
                        top: -2px;
                        left: -2px;
                    }
                    img.WindowURCorner {
                        position: absolute;
                        top: -2px;
                        right: -2px;
                    }
                    img.WindowLLCorner {
                        position: absolute;
                        bottom: -2px;
                        left: -2px;
                    }
                    img.WindowLRCorner {
                        position: absolute;
                        bottom: -2px;
                        right: -2px;
                    }
        </style>
    </head>
    <body>
        <div class="RedTable">
            <table summary="" width="100%">
                <tr>
                    <td class="ContentWindow">
                        <img class="WindowULCorner" src="images/white_UL.gif" alt="" />
                        <img class="WindowURCorner" src="images/white_UR.gif" alt="" />
                        <img class="WindowLLCorner" src="images/white_LL.gif" alt="" />
                        <img class="WindowLRCorner" src="images/white_LR.gif" alt="" />
                            
                        filler text 1
                    </td>
                    <td style="width: 35%;">
                        filler text 2
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

Hi,
I have 5 images to display in my rounded corner. It works fine but i can't resize the whole image below 350px in height.The width seems fine for what i want about 140px. The height sizes of the side,trc,brc image are all 120 px each and total 360px. If I set the height to below 350 then i get the bottom chopped off with squarish corners. Why can't this image resize itself because i specify in % size?

Code:

div#t3 {

	height:350px;
     background: url(../images/tlc.jpg) top left no-repeat;
	color: black;

    width: 100%;
}

div#tr {
 height:10%;
  background: url(../images/trc.jpg) top right no-repeat;


	}
	
 div#mr{
    height: 80%;
       height: 100px%;
  background: url(../images/side.jpg) top right repeat-y;

	}


 div#ft {

  height:10%;
  
    background: url(../images/blc.jpg) bottom left no-repeat;

    }

 div#ft2{
    height:100%;
     height:50px;
  background: url(../images/brc.jpg) bottom right no-repeat;

}


//html

<div id="t3">
<div id="tr">
</div>
<div id="mr">

  gdfgdg<br>fsdfds<br>asdasdasdasdasdasd

</div>
<div id="ft">
<div id="ft2">
</div>
</div>
</div>

I copy code to make a rounded corner and test it with my images

It is a mess as I get 1 image out of 4 displaying and i did get the names correct.

How do I assemble cut my image sizes for this? I create a rounded corner in Gimp and cut it up.

I am ANNOYED at the time spent doing this.
Images enclosed and here is code i use from

http://www.vertexwerks.com/tests/sidebox/

Code:

<html>
<head>

<style type="text/css">
/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */

body { background-color:Green  }

.sidebox {
	margin: 0 10; /* center for now */
	width: 27em; /* ems so it will grow */
	background: url(wbright2.png) no-repeat bottom right;
	font-size: 100%;
}
.boxhead {
	background: url(whright2.gif) no-repeat top right;
	margin: 0;
	padding: 0;
	text-align: center;
}
.boxhead h2 {
	background: url(whleft2.png) no-repeat top left;
	margin: 0;
	padding: 22px 30px 5px;
	color: white; 
	font-weight: bold; 
	font-size: 1.2em; 
	line-height: 1em;

}
.boxbody {
	background: url(wbleft2.png) no-repeat bottom left;
	margin: 0;
	padding: 5px 30px 31px;
}

</style >
<title>
</title>
</head>
<body><h1>It works!</h1>
<div class="sidebox">
	<div class="boxhead"><h2>Test Headline</h2></div>
	<div class="boxbody">
		<p>This is a short sample paragraph.</p>
		<p>And another onsdasdadsadsadsadsadsadsad
		asdsadadsaffffffffffffffffffffffffffffff dsdsf sdfdsf sdfdsf sdfsdf sdfsd 
		sdfffffe.</p>
	</div>
</div>
<br />

asSADSADSAD
<img src="whleft2.png" />

</body></html>

Hi, you would have already seen one of my newbie topics here today, and here is another one. I need to put a image in the corner of an absolutly positioned div. I don't know how to do that. It would be in the upper left-hand corner.

Any suggestions?

Perhaps I should pick up a CSS book, is there one that you reccomend.

Thanks,
-Sam

Hi, I'm still trying to learn CSS. Using CSS instead of tables really increases the versatility of the page, but, don't the graphics suffer? I'm trying to make a 3column layout which resizes according to the resolution. I've made it, but IMO it would look more appealing if I could make the corners curved as in... the menu box corners and the content space corners. Is there anyway to do this?

Thanks so much for taking the time to read my question.

I have a rounded corner that isn't working. For now, I have a red corner, so that it stands out and I know it's position.

I would like the right side to look the same as the left side of the contentheaderbox (this is where the page title goes like Home, or Contacts, or Site Map).

Not sure how to do this, I've run out of ideas. I have no where to post it, so I've attached the files.

Thanks for the help.

Brad

Hello,

Quick Q:

How would I go about getting this effect (drop-shadow/rounded corners around the main container div - here are a couple examples):

http://urlgreyhot.com/personal/

http://www.fiftyfoureleven.com/sandbox/weblog/

I am aware of the tutorials found on ALA site... but those tuts do not use .png's to achieve the drop-shadow/rounded-corner effect.

Can someone point me to a nice tutorial?

I have tried viewing the CSS of above sites, but I have found it a bit confusing, and I would prefer a simplified version of the code.

Anyone feel like sharing techniques?

Thanks in advance!
Cheers
M

I have a form design that i've been working on and I've got the border to appear correctly in FF, but not in IE. In IE the sides of the border don't meet the top pieces. I've heard about something similar before and solution involved negative margins. This did work to correct IE but then FF was messed up.
The form is contained in the #wrapper div. I would really appreciate anybody's help. I'll warn you though, I'm pretty new to web design.

Here's the HTML & PHP (The first 2/3 is php):

Code:

<?php require_once('Connections/getBiz.php'); ?>

<?php
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////DREAMWEAVER FUNCTION - USED TO STRIP OUT COMMAS ETC.
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}//end DreamWeaver Function

//USED CHECK IF FORM FIELD IS EMPTY
function notEmpty($variable){
if($variable == NULL || $variable == ''){
	$ntEmpty = false;
	} 
else {
	$ntEmpty = true;
	}
return($ntEmpty);
} //end notEmpty function

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//BEGIN HTML CODE CREATION
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
session_start();
$currentPage = $_SERVER["PHP_SELF"];



$num_fields = 0; //Initiate counter for filled fields
//Set form field variables to 'missing'
$name = "-1";
$city = "-1";
$zip = "-1";
$begDate = "-1";
$endDate = "-1";
$maxRows_Biz = 10;
$pageNum_Biz = 0;

if (isset($_GET['pageNum_Biz'])) {
  $pageNum_Biz = $_GET['pageNum_Biz'];
}
$startrow_Biz = $pageNum_Biz * $maxRows_Biz;

//CHECK EACH FORM FIELD TO SEE IF IT'S EMPTY
if (isset($_GET['Name']) && notEmpty($_GET['Name'])) {
  $name = $_GET['Name'];
  $num_fields++;
}
if (isset($_GET['City']) && notEmpty($_GET['City'])) {
  $city = $_GET['City'];
  $num_fields++;
}
if (isset($_GET['zp']) && notEmpty($_GET['zp'])) {
  $zip = $_GET['zp'];
  $num_fields++;
}
if (isset($_GET['Beginning_Date']) && notEmpty($_GET['Beginning_Date'])) {
  $begDate = date("Y-m-d", strtotime($_GET['Beginning_Date']));
  $num_fields++;
}
if (isset($_GET['Ending_Date']) && notEmpty($_GET['Ending_Date'])) {
  $endDate = date("Y-m-d", strtotime($_GET['Ending_Date']));
  $num_fields++;
}
if (isset($_GET['Submit']) && notEmpty($_GET['Submit'])) {
	$submit = true;
}
//print ($begDate);

mysql_select_db($database_getBiz, $getBiz);

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//IF FORM FIELDS WERE SUBMITTED, CREATE QUERY BASED ON NUMBER OF FILLED FIELDS
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//print (str_replace(' ','',GetSQLValueString($zip, "defined")));
//print ("Here is the zip" . $zip . "<br>");
//print ("Here is the zip" . GetSQLValueString($zip, "defined"));
if ($num_fields > 0) {  
	$query_Biz = "SELECT * FROM biz WHERE ";
	if ($name != "-1") {
		$query_Biz .= "bizName LIKE '%" . $name . "%'";
		$num_fields--;
		if ($num_fields > 0) {
			$query_Biz .= " AND ";
		}
	}
	if ($city != "-1") {
		$query_Biz .= "city LIKE " . GetSQLValueString($city, "text") ;
		$num_fields--;
		if ($num_fields > 0) {
			$query_Biz .= " AND ";
		}
	}
	if ($zip != "-1") {
		$query_Biz .= "zip IN ( " . $zip . " ) ";
		$num_fields--;
		if ($num_fields > 0) {
			$query_Biz .= " AND ";
		}
	}	
	if ($begDate != "-1") {
		$query_Biz .= "incDate > " . GetSQLValueString($begDate, "date");
		$num_fields--;
		if ($num_fields > 0) {
			$query_Biz .= " AND ";
		}
	}
	if ($endDate != "-1") {
		$query_Biz .= "incDate < " . GetSQLValueString($endDate, "date");
		$num_fields--;
	}
/// PUT A LIMIT ON THE QUERY ////////////////////////////////////////////////////////////

	$query_limit_Biz = sprintf("%s LIMIT %d, %d", $query_Biz, $startrow_Biz, $maxRows_Biz); //add limit 
//	print($query_limit_Biz);

	$Biz = mysql_query($query_limit_Biz, $getBiz) or die(mysql_error());
	$row_Biz = mysql_fetch_assoc($Biz);

	if (isset($_GET['totalRows_Biz'])) {  //get total # rows from clicked link....
		$totalRows_Biz = $_GET['totalRows_Biz'];
	} else {
		$all_Biz = mysql_query($query_Biz, $getBiz); //or from adjunct query 
		$totalRows_Biz = mysql_num_rows($all_Biz);
	}
	$totalPages_Biz = ceil($totalRows_Biz/$maxRows_Biz)-1;
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//CHECK FOR NEW PARAMETERS AND INCORPORATE THEM
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

$queryString_Biz = "";
if (!empty($_SERVER['QUERY_STRING'])) {   //get the query parameters from clicked link
  $params = explode("&", $_SERVER['QUERY_STRING']);
  $newParams = array();
  foreach ($params as $param) {
	if (stristr($param, "pageNum_Biz") == false && 
        stristr($param, "totalRows_Biz") == false) {
//		  print($param);
	      array_push($newParams, $param);
    }
  }
  if (count($newParams) != 0) { //add new parameters, if any, to queryString
    $queryString_Biz = "&" . htmlentities(implode("&", $newParams));
  }
}
$queryString_Biz = sprintf("&totalRows_Biz=%d%s", $totalRows_Biz, $queryString_Biz);
//print ($currentPage);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//BEGIN HTML
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
?> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NewBizFL - The only site devoted exclusively to free business listings</title>
<link href="css/hilite.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
	<div id="logo">
		<h1>newbizFL</h1>
	</div>
	<div id="menu">
		<ul>
			<li class="active"><a href="#">homepage</a></li>
			<li><a href="#">search</a></li>
			<li><a href="#">about us</a></li>
			<li><a href="#"> faq</a></li>
			<li><a href="#">contact us</a></li>
		</ul>
	</div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</div>
<div id="wrapper">
    <div class="top"></div>
    <div class="rside">
        <div class="content">
            <div id="srchForm">
                <form name="form1" method="get" action=<?php $currentPage ?> >
                  <fieldset id="location">
                    <ol>
                        <li>
                        <label for="Name">Business Name:</label> 
                        <input type="text" name="Name" id="Name">
                        </li>
                        <li>
                        <label for="City">City:</label>
                        <input type="text" name="City" id="City">
                        </li>
                        <li>
                        <label for="Zip Code">Zip Code:</label>
                        <input type="text" name="zp" id="Zip Code">
                        </li>
                    </ol>  
                  </fieldset>
                  <fieldset id="dateRange">
                    <ol>
                        <li>
                        <label for="Beginning Date">Beginning Date</label>
                        <input type="text" name="Beginning_Date" id="Beginning Date">
                        </li>
                        <li>
                        <label for="Ending Date">Ending Date</label>
                        <input type="text" name="Ending_Date" id="Ending Date">
                        </li>
                    </ol>    
                  </fieldset>
                  <input type="submit" name="Submit" id="Submit" value="Submit" />
                </form>
            </div>
            <div id="dataTable">
            <?php  
            /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            //IF NO RECORDS, SHOW 'NO RECORDS' MESSAGE.  ELSE, SHOW TABLE WITH RECORDS
            /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            if ($totalRows_Biz == 0 ) {
                echo '<td>No Records to Display' . ' Sorry </td>'; } 
            else {
                echo '<p>&nbsp; Records' . ($startrow_Biz + 1) . ' to '  . min($startrow_Biz + $maxRows_Biz, 	$totalRows_Biz) . ' of ' . $totalRows_Biz . '</p>';  // Result Page Heading: 'Records 1 to 10 of 40'
                echo '<table border="1">';
                echo "<thead>";
                echo "	<tr>";
                echo "		<th scope=\"col\">Business Name</th>";
                echo "		<th scope=\"col\">Address</th>";
                echo "		<th scope=\"col\">City</th>";
                echo "		<th scope=\"col\">Zip</th>";
                echo "		<th scope=\"col\">Filing</th>";
                echo "		<th scope=\"col\">Date</th>";
                echo "		<th scope=\"col\">President</th>";
                echo "	</tr>";
                echo "</thead>";
                $counter = 0; // counter to highlite rows
                do {  //do loop till all records are printed
                    if ($counter++ % 2) {
                        echo '<tr class="hilite">'; } 
                    else {
                        echo '<tr>'; } 
                    echo '<td>' . $row_Biz['bizName'] . '</td>';
                    echo '<td>' . $row_Biz['Address'] . '</td>';
                    echo '<td>' . $row_Biz['city'] . '</td>';
                    echo '<td>' . $row_Biz['zip'] . '</td>';
                    echo '<td>' . $row_Biz['incDate'] . '</td>';
                    echo '<td>' . $row_Biz['type'] . '</td>';
                    echo '<td>' . $row_Biz['pres'] . '</td>';
                    echo '</tr>';
                    } while ($row_Biz = mysql_fetch_assoc($Biz));
                echo '</table>';
            /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            //LINKS FOR 'PREVIOUS', 'NEXT', ETC..
            /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            echo '<table border="0">';
                echo '<tr>';
                    ////FIRST LINK
                    echo '<td>';
                    if ($pageNum_Biz > 0) { // Show if not first page 
                        echo '<a href="' . sprintf("%s?pageNum_Biz=%d%s", $currentPage, 0, $queryString_Biz) . '">First</a>'; } 
                    echo '</td>';
                    ////PREVIOUS LINK
                    echo '<td>';
                    if ($pageNum_Biz > 0) { // Show if not first page 
                        echo '<a href="' . sprintf("%s?pageNum_Biz=%d%s", $currentPage, max(0, $pageNum_Biz - 1), 	$queryString_Biz) . '">Previous</a>';}
                    echo '</td>';
                    ////NEXT LINK
            //		print ("This is querystringbiz = " . $queryString_Biz);
            //		print ('%s?pageNum_Biz=%d', $currentPage, 23) ;
            //		print ("total pages = " . $totalPages_Biz);
            //		print ("current page = " . $pageNum_Biz);
            //		print (printf("%s?pageNum_Biz=%d", $currentPage, 2));
                    echo '<td>';
                    // Show if not last page 
                    if ($pageNum_Biz < $totalPages_Biz) { 
                        echo '<a href="' ;
                        echo $currentPage . '?pageNum_Biz=' . ($pageNum_Biz + 1). $queryString_Biz;
                        echo '">Next</a>' ; 
                    }
                    echo '</td>';
                    ////LAST LINK
                    echo '<td>';
                    if ($pageNum_Biz < $totalPages_Biz) { // Show if not last page 
                        echo '<a href="' . sprintf("%s?pageNum_Biz=%d%s", $currentPage, $totalPages_Biz, $queryString_Biz) . '">Last</a>';}
                    echo '</td>';
                echo '</tr>';
            echo '</table>';
            }
            ?>
            </div>
        </div>
	</div>
    <div class="bottom"></div>
</div>
</body>
</html>
<?php if (isset($totalRows_Biz)) {
	mysql_free_result($Biz);} ?>

And here's the CSS:

Code:

@charset "utf-8";
.hilite {
	background-color: #CCCCFF;
}
body {
	font-family : "Trebuchet MS", Arial, sans-serif;
	padding: 0;
	text-align: center;
	background-image: url(../images/gradient.png);
	background-repeat: repeat-x;
	background-color: #ecffec;
}
#wrapper {
	width: 920px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	text-align: left;
	background-color: #FFFFFF;
}
#wrapper .bottom {
	background-image: url(../images/bottom.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	height: 21px;
}

table, th, td  {
border : 1px solid #d4e0ee;
border-collapse : collapse;
font-family : "Trebuchet MS", Arial, sans-serif;
color : #555;
} 
#wrapper .rside {
	background-image: url(../images/right.png);
	background-repeat: repeat-y;
	background-position: right top;
}

#header {
	width: 900px;
	height: 40px;
	margin: 0 auto 20px auto;
	padding-top: 10px;
}
#menu {
	float: right;
	padding-top: 10px;
}
#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	margin-left: 5px;
	padding: 1px 10px;
	text-decoration: none;
	font-size: 12px;
	color: #FFFFFF;
	background-color: #A6A6FF;
}

#menu .active a {
}

#menu a:hover {
	text-decoration: underline;
}

#logo {
	float: left;
}
#logo h1 {
	float: left;
	margin: 0;
	font-size: 38px;
	color: #8484FF;
}

#logo h1 sup {
	vertical-align: text-top;
	font-size: 24px;
}

#logo h1 a {
	color: #0099E8;
}
#wrapper #dataTable {
	text-align: left;
	clear: both;

}
legend {
	margin-left: 1em;
	color: #000000;
	font-weight: bold;
	padding: 0;
}
fieldset ol {
	list-style: none;
	margin: 0;
	padding: 0.5em 0em 0em .5em;
}
fieldset li {  
padding-bottom: 1em;
} 
label {
	float: left;
	width: 7em;
	margin-right: 1em;
}
#wrapper #location {
	float: left;
	width: 40%;
	margin-right: 15px;
	margin-left: 5px;
}
#wrapper #dateRange {
	margin-right: 20px;
}

input {
background: #F3F4EC !important;
}
#wrapper .top {
	background-image: url(../images/top.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 18px;
	margin: 0;
}
#wrapper .top span {
	background-image: url(../images/leftside.png);
	background-repeat: repeat-y;
	background-position: left top;
}
#wrapper .content {
	background-image: url(../images/leftside.png);
	background-repeat: repeat-y;
	background-position: left top;
	padding-top: 0px;
	padding-right: 20;
	padding-bottom: 0;
	padding-left: 20;
}
#wrapper .content span {
	background-image: url(../images/right.png);
	background-repeat: repeat-y;
	background-position: right top;
}

Sorry, I know my code is probably a mess. I really appreciate anyone's help with this, though.
Oh, and by the way, does anyone know how to attach things to a post? For example, a screen capture (jpeg) or the images I used?

Hey, I'm trying to figure out how to make a table area have rounded corners that will change color dynamically on different page backgrounds. I know how to set rounded corners on just 1 color, but is there code, css/html/java/php that would allow the corners to take the color of whatever the background looks like, even if its a picture? All the ways I try make the rounded corner image transparent which turns the table back into a square.

Let me know if my question wasn't clear!

Thanks!!!!!!!!!!!!!

I am very new to CSS, but I am trying to use it to make a tabbed rounded-corner centered menu bar for my webpage. I've gone through a number of iterations, and I feel like I'm close, but it's not quite right. The left rounded-corner image appears to be just slightly too high compared to the middle/right part of the tab. The css and html codes are below. Thank you for any help.

Kate

CSS CODE:

#tabs8 {
float:left;
width:100%;
background:#FCF1F6;
border-bottom:4px solid #E276A7;
overflow:hidden;
position:relative;
}
#tabs8 ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#tabs8 ul li {
display:block;
float:left;
list-style:none;
margin:0 0 0 1px;
padding:0px 3px;
position:relative;
right:50%;
}
#tabs8 ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 0px;
background:url("tableft8.gif") no-repeat left top;
text-decoration:none;
line-height:1.3em;}
#tabs8 a span {
background:url("tabright8.gif") no-repeat right top;
padding:3px 10px;
color:#333;
line-height:1.3em;}

#tabs8 ul li a:hover {
background:#369;
color:#fff;
}
#tabs8 ul li a.active,
#tabs8 ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}-->




HTML CODE:

<div id="tabs8"><ul>
<li id="current">
<div align="center"><a href="index.html"><span>Home</span></a></div>
</li>
<li>
<div align="center"><a href="cake-shaping.html"><span>Cake Shaping</span></a></div>
</li>
<li>
<div align="center"><a href="decorations.html"><span>Edible Decorations</span></a></div>
</li>
<li>
<div align="center"><a href="gallery.html"><span>Gallery</span></a></div>
</li>
<li>
<div align="center"><a href="blog.html"><span>Blog</span></a></div>
</li>
<li>
<div align="center"><a href="subscribe.html"><span>Subscribe</span></a></div>
</li></ul></div>