CSS - Couple Of Css Issues...

Ok If you go to:

http://www.zahra-zahra.com/innerPage.html

if you hover over the side menu (sub/subcontact)which are supposed to be nested lists.. you will see some alignment issue with the pink and the brown-ish..

also the nested list was moved a bit forward so i added margin:-0.5em; but IE doesnt like it and has moved the li further back..
relevant code:
PHP Code:
#sideMenu {
    margin-top:0.2em;
    float:left;
    clear:left;
    width:24%;
}
#sideMenu ul {
    float:left;
    width:100%;
    list-style:none;
    margin:0em;
    padding:0em;    
}
#sideMenu li {
    clear:left;
    background-image:url(images/site/backgrounds/sideLi.jpg);
    padding:0.4em;
    margin-bottom:0.1em;
}
#sideMenu ul li ul {    
    margin:-0.5em;
    padding:0em;
    margin-top:0.3em;
    padding-top:0.2em;
    padding-bottom:0.2em;
}
#sideMenu ul li ul li {
    width:100%;
    background-image:url(images/site/backgrounds/sideLiLi.jpg);
}
#sideMenu a {
    text-indent:0em;
    text-decoration:none;
    color:#663333;
    margin-left:0em;
    font-size:1em;    
}
.nestedList a {
    text-indent:0em;
    padding:0.3em;
    padding-left:3em;
}
.nestedList a:hover {
    background-image:url(images/site/backgrounds/sideLiLiHover.jpg);
    background-position: -0.4em 0em; 
} 





HTML

PHP Code:
<div id="sideMenu">
        <ul>                
                <li><a href="">Contact</a>
                    <ul class="nestedList">
                        <li><a href="">sub</a></li>
                        <li><a href="">SUBcontact</a></li>
                    </ul>
                </li>
                <li><a href="">Return</a></li>
                <li><a href="">News</a></li>
                <li><a href="">FAQ</a></li>
                <li><a href="">bout us</a></li>
                <li><a href="">Home</a></li>
        </ul>
    </div> 





just a side question i have in the above code a nested class.. why cant i do something like

.nestedList ul {

}

i tried that but it didnt work...

Hey all,

I'm hoping someone can help me!

Basically i've been setting up this website (using e107) and the theme I am using isn't exactly what I want, there are a few pages that don't quiet work.

Anyway I have tried to modify this and I have just been unsuccessful, I did manage to do a little bit but just reverted back as the chances were it wasn't right!! All I need is to remove 2 areas of the page and make the center piece fill the page.

If you think you can help me reply here and ill talk to you either via IM or PM as I will have to give you login details and URLs etc

Thanks,
Ben

I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??

Code:

<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
<div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div>

</div>


<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
<div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>

</div>

Unfortunately I am going to have to get more involved in CSS rather than happily concentrating on PHP development. We have realised that getting our designers to CSS stuff is just costing us time as they lack the experience and don't understand the semantics.

Anyway, as such I need to find out a few things I know but don't know if you know what I mean.

Where can I find out the official definitions of CSS operators...

* html for example..what the * does.

class1>class2...what the > does...stuff like that.

Hey,

I came across this forum and hopefully somebody can help me.

Here is my website: http://www.jmuelectricmotorcycle.tk

When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container.

Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page.

Thanks. Here is my css:

Code:

html {
	font: normal 12px verdana, arial;
        background-color: #000
}

body {
text-align: center
}

#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}

.hasSidebar #fw-container {
	width: 1000px;
}

a, 
a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* --- Header --- */

#fw-head {
	position: relative;
	height: 196px;
	background: #242424;
}

#fw-title {
	font: bold 26px verdana;
	letter-spacing: -1px;
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 0;
	margin: 0;
	z-index: 10;
}

#fw-title a, 
#fw-title a:visited, 
#fw-title a:hover {
	color: #fff;
}

.fw-logo {
	width: 760px;
	height: 196px;
	position: absolute;
}

.hasSidebar .fw-logo {
	width: 1000px;
}

/* --- Navigation --- */

#fw-mainnavwrap {
	background: #242424;
	padding: 10px 20px;
	font-family: arial;
	font-weight: normal;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#fw-mainnavwrap ul {
	margin: 0;
	padding: 0;
	background: transparent;
	list-style-type: none;
}

#fw-mainnavwrap li {
	margin: 0px 15px 0px 0px;
	display: inline;
}

/* --- Content --- */


#fw-bigcontain {
	width: 760px;
	float: left;
}

.fw-paragraph {
	background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
	border-bottom: 1px solid #000;
	padding: 15px 20px 10px;
	overflow: hidden;
}

.fw-title {
	margin: 0px 0px 10px;
	font: 18px verdana;
	color: #fff;
}

.fw-text {
	margin-bottom: 10px;
}

/* --- Sidebar stuff --- */

.hasSidebar #fw-sidebar {
	width: 239px;
	float: right;
	font-size: 12px;
	clear: right;
	border-left: 1px solid #000;
}

#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
	color: #fff;
	text-decoration: none;
}

#fw-sidebar .fw-title {
	font-size: 1.3em;
	font-weight: normal;
}

/* --- Footer --- */


#fw-footer {	
	font: normal 10px verdana, sans-serif;
	background: #242424;
	margin: 0px;
	padding: 11px 0px 1px;
	color: #999;
	clear: both;
	width: 760px;
}

.fw-footertext {
	background: #161616;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	margin: 0px;
	padding: 6px 0px 6px 20px;
}

Hello guys, my name's Ben, how y'all doing?

I recently took over a website for my uni canoe club and am trying to design a new, better looking version of the site at present. I am getting there, but I am having a few issues with CSS that I can't seem to fix. Note that I have been testing the site on Firefox, and plan to come back to any IE issues once it looks good with standards.

A static mockup (php will come later) of the site as it stands now can be found here (URL www DOT uhcc DOT co DOT uk/v3_mockup/) (excuse the dodgy slogon, that's just a placeholder from one of our old t-shirts) the two problems I am having are as follows:
I can't seem to remove the white spaces between the images in the right hand column. margin and padding are set to 0 for the images, so I can't see what is causing it I need the left and right column to extend right down to the footer. They are both set at "height:100%" but that doesn't seem to work. Also the #main div doesn't seem to extend down as far as the footer, either! ARGH!
Any help will be much appreciated!

I am brand new to CSS and I'm having two issues. I've searched around and I cannot figure this out.

1. I cannot get text inside a div. I'm using an external style sheet and I can't seem to get text to go inside a scrolling DIV. I'm completely confused.

2. The second issue is if the window shrinks or someone is using a smaller resolution, I want the CSS to shrink the page and stay uniform as well. It also doesn't play nicely in IE.

The issue I'm having is I'm not very comfortable with my CSS yet so I'm kind of hesitant to play around too much.

Here is my code. Please don't laugh too hard :/

Code:

body {
	background: white url(xxxxxx) repeat-y center;
}

#header { 

position: fixed; top: 0px; left: 20%;

}

#headertext {

position: fixed; top: 15px; left: 268px;
width: 100%;

}

#navbar {

position: fixed; top: 150px; left: 256px;
width 100%;

}

#navbartext {

position: fixed; top: 150px; left: 240px;
width: 100%;

}

#footer {

position: fixed; top: 735px; left: 256px;
width 100%;

}

#footertext {

position: fixed; top: 747px; left: 251px;
width 100%;

}

#textbackground {

background-color: #000000;
position: fixed; top: 193px; left: 256px;
width: 768px;
height: 542px;
overflow: auto;

}

I think I did alright for a first time CSS writer but it's obviously not right.

EDIT: Fixed. I think the issue was because of the fixed positioned div tag at the top of the page. I had to set the width of the content_wrapper div.

EDIT 2: Well partially fixed. It now has the scroll bar, but when the window is decreased below 1000px in width, the floated header div doesn't scroll via the scroll bar. Any way to fix this?

On this page:
http://www.area51entertainment.co/emoto

When the page is resized below 1000px no scroll bar comes up.

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<base href="http://www.area51entertainment.co/" />
<title>Emoto <?php echo "$section"; ?></title>
<meta charset="UTF-8" /> 
<meta name="verify-v1" content="" />
<meta name="keywords" content=""  />
<meta name="description" content="" />
<meta name="author" content="Andrew McCarrick" />
<?
if(isset($_GET['investors'])){
echo '<meta name="robots" content="noindex, nofollow" />';
}
else{
echo '<meta name="robots" content="index, follow" />';
}
?>
<style type="text/css">
body,html {
background: #FFFFFF; /* Old browsers */
color: #FFFFFF; 
font-family: Verdana; 
margin-right:auto;
margin-left:auto;
max-width:1000px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
<link rel="stylesheet" href="emoto/style.css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="apple-touch-icon-precomposed" href="http://www.area51entertainment.co/TouchIcon.png" /> 
<link rel="image_src" href="./logo.png" /> 
</head>
<body>
<div class="wrapper">
<div class="header_float">
<div class="header_wrapper">
<div class="logo">
Picture
</div>
<div class="links">
Home | Settings | Notifications | Requests | Messages | Search Bar
</div>
<div class="links_right">
Profile Link/Sign-Out 
</div>
</div>
</div>
<div class="content_wrapper">
Test2Test2 Test2
</div>
</div>
</body>
</html>

Code:

a:link {color: #FFFFFF; text-decoration: none;}
a:visited {color: #FFFFFF; text-decoration: none;}
a:active {color: #FFFFFF; text-decoration: none;}
a:hover {color: #3399FF; text-decoration: none;}

.wrapper{
min-height: 2000px;
}

.header_float{
width: 100%;
min-width: 1000px;
height: 35px;
top: 0px;
left: 0px;
position: fixed;
background: #49963A;
z-index: 1000;
}

.content_wrapper{
position: relative;
top: 35px;
}

.header_wrapper{
width: 1000px;
height: 35px;
margin-right:auto;
margin-left:auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

.logo{
float: left;
width: 150px;
height: 25px;
font-size: 26px;
position: relative;
top: -1px;
left: 8px;
}

.links{
float: left;
width: 670px;
height: 25px;
position: relative;
top: 7px;
}

.links_right{
float: right;
width: 180px;
height: 25px;
position: relative;
top: 7px;
}

img{
border: 0px;
}

www.archanix.com/tanya/work.html

Not sure why, but the nav links appear differently in IE and FF. I want it to look like it is in FF. For some reason there is extra space in IE.

Another issue is my css image rollovers. Since the background images aren't preloaded there tends to be a brief "flash" before appearing on hover.

Damn css. This would be so much easier if I just used the javascript rollover since you can tell it to preload the images.

Any help to any of these issues would be greatly appreciated.

-Jesse

Ok, this is my last chance at solving this problem.

I've created my site using CSS and XHTML, working fine in all the PC browsers I can find, but for some reason it is a different story on a Mac, especially IE.

It seems the left hand column of my site spreads across the full width, knocking the right frame down below it. I've looked and looked at my CSS code and I can't see what might be causing the problem.

My site is here, my CSS and XHTML is valid, although I have removed one CSS file due to problems so that is nothing to worry about.

If anyone can help, pref if you have a Mac, I would be so greatful.

EDIT #2: Would have been nice if I had gotten some help. Anyways, managed to fix it by just messing around with the coding.

Here's what I did if anyone needs this as reference or help:
Quote:
/* --------------- Div ID's --------------- */

/* ----- HEADER ----- */

#header {
width:741px;
height:224px;
background-image:url("");
border:solid 0px #000;
}

/* FAUX LAYOUT WRAPPER */

#wrapper{
width:741px;
background:url("") repeat-y;
overflow:auto;
margin-top:0px;
position: relative;
}

/* ----- NAVIGATION ----- */

#sidebar {
width:182px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 0px #000;
float: right;
position:relative;
right:92px;
top:0px;
}

/* ----- MAIN CONTENT ----- */

#main {
width:362px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 0px #000;

margin-top:0px;
position:relative;
left:72px;
top:0px;
}

/* ----- FOOTER ----- */

#footer {
width:741px;
height:325px;
background-image:url("");
margin-top:0px;
border:solid 0px #000;
}






EDIT: I fixed problems 1 and 3 but I still need help with problem 2. Why aren't my div layers moving AT ALL when I use the position: absolute value relative to another div layer????? Please help! Thanks!

Oh, forgot to mention, I'm using wordpress 2.7 in case it affects anything at all.

And here's the part of css concerning the divs :

Quote:
/* --------------- Div ID's --------------- */

/* ----- HEADER ----- */

#header {
width:741px;
height:224px;
background-image:url();
border:solid 0px #000;
}


/* FAUX LAYOUT WRAPPER */

#wrapper{
width:741px;
background:url();
overflow:auto; /* USE FIREFOX GUYS! WE ONLY NEED THIS LINE BECAUSE INTERNET EXPLODER ISN'T READING CODE PROPERLY */
margin-top:0px;
position: relative;
}


/* ----- NAVIGATION ----- */

#sidebar {
width:180px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 1px #000;
float:right;
}


/* ----- MAIN CONTENT ----- */

#main {
width:460px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 1px #000;
margin-top:0px;
position: absolute;
top:0;
right:30;
}


/* ----- FOOTER ----- */

#footer {
width:741px;
height:325px;
background-image:url();
margin-top:0px;
border:solid 0px #000;
}




Resolved Stuff: (incase anyone has the same issue and wanted to know what I did)

Quote:
Okay, I'm having trouble positioning my div boxes in the wrapper and some other minor issues that I just can't seem to make it work. They a

1) The background images are not lined up. How do I make the background images line up? (The header and footer have a background image and so does the content box). They are all off by a couple of pixels and I can't seem to get it to work. [FIXED: Just changed the size of the images, apparently css wasn't the problem.]

2) How do move the two div boxes in the div wrapper so that they are only over the image? (More specifically, the right div over the yellow paper part and the left div over the notebook paper part that's a bit faded.)

3) The footer cuts off and does not go to the full height I specified (325 px). [FIXED: Took another route and changed my css layering entirely.]

I am curious to know if IE8 as released is what I should be designing for? I have noticed that sites I have developed that look good in IE7 and FF look as they should, but open them up in IE8 and they do not look good at all. Tom

hello again,

I coded the basket page with rows and cells this time as per kk5st's suggestion. But yet here again with few problems.

see it yourself page:
http://www.refinethetaste.com/html/content/basket/basket.htm

1. I dont understand why the table is short now. it should strech up until the border.
2. I want remove button v-align at the bottom of the cell.
3. I want quantity input align right at the center.

I'd appreciate any help I could get. If you think my css is sloppy please advise, I am open to make any changes, its better late than wrong



Code:

<style>
/*basket*/
#basket	{ width:576px; float:left; margin-left:2px; }
#basket .basket	{ float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#basket h1	{ height:30px; font-size: 18px; color:#716759; line-height:30px;}
#basket .basket .thdesc { float: left; width:274px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .th	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .tddesc { float: left; width:274px;  height:80px; font-size: 14px; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
#basket .basket .color	{ float: left; width:60px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; vertical-align:text-top;  }
#basket .basket .noncolor	{ float: left; width:60px; text-align: center; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
#basket .basket .intprice	{ font-weight:bold; }

#basket .hline {	border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }

#signup form fieldset { margin: 10px 0; border: #ece7d1 1px solid; }
#signup form div label {  display: block;  float: left;  width: 120px;  padding: 5px; margin: 0 0 10px 0;  text-align: left;}
#signup form div.required label, label.required {  font-weight: bold; }
input.signupsubmit	{ float: right; border:0;}

#basket img#updatesbasket { float:left; width: 141px; height: 15px; border: 0px; }
#basket img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#basket img#contshopping { float:right;	width: 141px; height: 25px; padding-right:50px; border: 0px; }
#basket img#checkout { float:right;	width: 89px; height: 25px; border: 0px; }

#basket input.quantity { border:1px solid #716759; width:30px; text-align:right;	}

</style>
	<div id="basket">
      <h1>Create a New Account</h1>
	  To take full advantage of your Williams-Sonoma account, please provide all the information below.
	  <div class="hline"></div>
	  <img alt="" src="http://www.refinethetaste.com/html/THEMES/default/images/checkout_step1.gif" />
      <div class="basket">
        <table>
          <tr>
            <th class="thdesc">Product Description</th>
            <th class="th">Weight</th>
            <th class="th">Price</th>
            <th class="th">Qty</th>
            <th class="th">Total</th>
          </tr>
          
          <form action="?Section=basket&Process=updatecart" method="post">
            <tr>
              <td class="tddesc"><a href="default.asp?Section=product&PRODUCTID=13">Organic Fruit Harvest</a> <br />
               </td>
              <td class="color">2.5LBS</td>
              <td class="noncolor"><span class="intprice">$360</span></td>
              <td class="color"><input type='text' name='adet_13' onkeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='2' class="quantity" /></td>
              <td class="noncolor">
              <span class="intprice">$120</span>
              <a href="?Section=basket&Process=deletefromcart&PRODUCTID=13"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a>
              </td>
            </tr>
            <tr>
              <td colspan="5" height="1px" bgcolor="#ece7d1" ></td>
            </tr>

          <form action="?Section=basket&Process=updatecart" method="post">
            <tr>
              <td class="tddesc"><a href="default.asp?Section=product&PRODUCTID=15">Cornucopia</a> <br />
               </td>
              <td class="color">2.15LBS</td>
              <td class="noncolor"><span class="intprice">$360</span></td>
              <td class="color"><input type='text' name='adet_15' onkeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity" /></td>
              <td class="noncolor">
              <span class="intprice">$60</span>
              <a href="?Section=basket&Process=deletefromcart&PRODUCTID=15"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a>
              </td>
            </tr>
            <tr>
              <td colspan="5" height="1px" bgcolor="#ece7d1" ></td>
            </tr>

          <form action="?Section=basket&Process=updatecart" method="post">
            <tr>
              <td class="tddesc"><a href="default.asp?Section=product&PRODUCTID=14">Organic Cider Celebration</a> <br />
               </td>
              <td class="color">1LBS</td>
              <td class="noncolor"><span class="intprice">$360</span></td>
              <td class="color"><input type='text' name='adet_14' onkeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity" /></td>
              <td class="noncolor">
              <span class="intprice">$60</span>
              <a href="?Section=basket&Process=deletefromcart&PRODUCTID=14"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a>
              </td>
            </tr>
            <tr>
              <td colspan="5" height="1px" bgcolor="#ece7d1" ></td>
            </tr>

            <tr>
            	<td colspan="2"><img alt="Update Shopping Basket" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_updatesbasket.gif" id="updatesbasket" /></td>
                <td></td>
                <td>Subtotal</td>
                <td class="color">$240</td>
            </tr>
            <tr>
                <td>Shipping Options & Charges</td>
                <td colspan="2"></td>
                <td>Total</td>
                <td class="color">$90</td>
            </tr>
          </form>
        </table>
      </div>

Ok so i made a site that validates in w3c check and shows ok on all browsers save for IE. Im really not sure where to begin on debugging it! http://new.mostardesigns.com/

Any help is much appreciated!

hello all,
I am stuck on few things here. I want to make the following changes and I tried fixing them several times but could not succeed.

1. quantity input align right at the center.
2. remove button v-align at the bottom of the total1 div tag, centered.
4. subtotal text positioned on same vertical line with Qty.
3. update button position 50px left side of subtotal text.


I'd appreciate any help I could get. If you think my css is sloppy please advise, I am open to make any changes, its better late than wrong.

http://www.refinethetaste.com/html/content/basket/basket.htm


Code:

<style>
/*basket*/
#basket	{ width:576px; float:left; margin-left:2px; }
#basket .basket	{ float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#basket h1	{ height:30px; font-size: 18px; color:#716759; line-height:30px;}
#basket .basket .desc { float: left; width:274px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .weight	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .price	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .qty	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .total	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .desc1 { float: left; width:274px; height:80px; margin:3px; padding:3px;  }
#basket .basket .weight1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .price1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; margin:3px; padding:3px;  }
#basket .basket .qty1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .total1	{ float: left; width:60px; height:80px; text-align: center; font-weight:bold; font-size:14px; color:#716759; margin:3px; padding:3px;  }
#basket .basket .remove	{ float: left; width:574px; height:15px; border-bottom: #ece7d1 1px dotted;   }
#basket .basket .subtotal { float: left; width:504px; text-align:right; font-weight:bold; font-size:14px; border-right: #ece7d1 1px dotted; margin:10px 0 10px 0;   }
#basket .basket .subtotalint { float: left; width:60px; text-align:center; font-weight:bold; font-size:14px; border-bottom: #ece7d1 1px dotted; margin:10px 0 10px 0;}


#basket .hline {	border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }

#signup form fieldset { margin: 10px 0; border: #ece7d1 1px solid; }
#signup form div label {  display: block;  float: left;  width: 120px;  padding: 5px; margin: 0 0 10px 0;  text-align: left;}
#signup form div.required label, label.required {  font-weight: bold; }
input.signupsubmit	{ float: right; border:0;}

#basket img#update { float:right; width: 48px; height: 15px; padding-right:150px; border: 0px; }
#basket img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#basket img#contshopping { float:right;	width: 141px; height: 25px; padding-right:50px; border: 0px; }
#basket img#checkout { float:right;	width: 89px; height: 25px; border: 0px; }

#basket input.quantity { border:1px solid #716759; width:30px; text-align:right;	}

</style>
	<div id="basket">
        <h1>Create a New Account</h1>
        To take full advantage of your Williams-Sonoma account, please provide all the information below.
        <div class="hline"></div>
        <img alt="" src="http://www.refinethetaste.com/html/THEMES/default/images/checkout_step1.gif" /> 
    	<div class="basket">
            <div class="desc">Product Description</div>
            <div class="weight">Weight</div>
            <div class="price">Price</div>
            <div class="qty">Qty</div>
            <div class="total">Total</div>
            
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=13">Organic Fruit Harvest</a>
                    <br />
                    
                </div>
                <div class="weight1">2.5</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_13' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=13"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=15">Cornucopia</a>
                    <br />
                    
                </div>
                <div class="weight1">2</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_15' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=15"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=14">Organic Cider Celebration</a>
                    <br />
                    
                </div>
                <div class="weight1">1</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_14' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=14"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
          
			<div class="subtotal"><img alt="Update" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_update.gif" id="update" /> SubTotal</div>
			<div class="subtotalint">180</div>
            
        </div>



    <br />
    <a href="?Section=checkout"><img alt="Checkout" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_checkout.gif" id="checkout" /></a>
    <a href="http://www.refinethetaste.com/html"><img alt="Checkout" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_contshopping.gif" id="contshopping" /></a>
    </div>