CSS - Display Issues Ie/ff
Hi
Hoping someone can give me a pointer to a small problem I'm having: Trying to achieve rounded corner buttons for a tags on a website using CSS and a nested <span tag. Relevant example page is at: http://www.mytophost.co.uk/test/test.html Styles are in the test.html page and the images used are at: http://www.mytophost.co.uk/test/button.gif http://www.mytophost.co.uk/test/buttonh.gif http://www.mytophost.co.uk/test/end.gif http://www.mytophost.co.uk/test/endh.gif All looks fine for me in IE, but bg images align differently in FF. I realise it's probably something in my CSS that's not compliant and so that's why IE works and FF not ... Any help greatly appreciated. Similar TutorialsHello, I am trying to make a website www.jazzsurlaplage.ch/2007/home.php (sorry for the french script over there) Here is the issue : One Firefox or IE 7, the partners box appears to the right side of the page, whereas on IE 6, it appears way at the bottom. you can check out the html source on the page itself (I've written it, not generated, so it must be pretty easy to get) and the css is over here : www.jazzsurlaplage.ch/2007/style.css Here is the part in the file where I define the side box : Code: /*===========SIDE NAVIGATION==================*/ #sideinfo{ left:600px; width:200px; position: relative; margin-top:3px; margin-bottom:0px; } .sidebox{ margin:0px 0px 0px 0px; padding:15px 0px 0px 0px; width:200px; height:30px; position:relative; background:transparent url(images/sidehead.jpg) left top no-repeat; } .sidebox .sidebody{ position:relative; padding:0px 10px 0px 10px; background:url(images/sidebody.jpg) left top repeat-y; margin-bottom:0px; text-align:center; } .sidebox .sidefooter{ position:relative; height:30px; width:200px; margin-top:0px; background:url(images/sidefoot.jpg) left top no-repeat; } /*============================END SIDE BLOCK===========================*/ / Here is the part in the html file where I insert the box : Code: <? //sidebar echo '<div id="sideinfo">'; echo '<div class="sidebox">'; echo '<div class="sidebody">'; echo '<img src="images/partenaires.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/arg.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/chatnoir.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/coheran.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/heineken.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/semeuse.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/jardinnerie.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/raiffeisen.jpg" width="130"/>'; echo '<br />'; echo '<img src="images/partenaires/aurelys.jpg" width="130"/>'; echo '<br />'; echo '<img src="images/partenaires/mb.jpg" width="130"/>'; echo '</div>'; echo '<div class="sidefooter"></div>'; echo '</div>'; echo '</div>'; ?> What do I do, and where can I get more info on these kind of issues ? Thanks, Manojo This is yet again another mysterious issue I am having with CSS and the notorious Internet Explorer. I have two divs fashioned into boxes. One is floated to the left the other is floated to the right. The height looks fine in FF but when you look at the bottom border of said 'boxes' the one on the right draws up sooner than the one on the left (when viewed in IE). The CSS definitions for both divs have the same height specified. Any help at all is very appreciated. http://www.ioforge.com/contact intrigue.net -- please copy and paste (link not allowed here since I'm a new member) HTML & CSS both validate with no errors. The page displays correctly in Opera and Firefox, but in IE... 7+ does not color the menu (white), making it invisible <7 displays only half of the page I would love any assistance at all in getting this resolved (aside from bombing MS) Thanks in advance. -=-TS Does anyone know why IE7 is displaying this page incorrectly (when compared to Safari, Chrome, FF, IE8)? http://www.harrisdesigns.ca/dev/bestratefinders I noticed the font size at the top increases missing up my "Savings Calculated" - I'm assuming an if IE7 statement on the fonts will fix that. However, more troubling is the way to shoves the left column down. Any tips advice or ideas are greatly appreciated. Thanks in advance, CH... SOLVED Essentially it was a couple of over looked css errors. Left column shoving down was a float error as I forgot set a width, the font size errors were fixed by setting the margins and paddings to on the H elements and using ".px" for font sizes over "em" Ok I've been working on this for hours. WordPress is generating some HTML that isn't displaying correctly. At this point I'm just working with the following CSS and HTML: CSS: Code: div#navcontainer { border: 1px solid blue; padding-left: 20px; margin: 0; width: 177px; position: relative; left: 0px; } div#navcontainer div#pagenav li.pagenav { /* the outermost list item; seems to apply to the title of the section */ font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif; font-size: 14px; padding-left: 0em; padding-right: 16px; margin-left: 0; width: 175px; font-weight: normal; list-style: none; list-style-type: none; color: #4f2b0d; } div#navcontainer div#pagenav li.pagenav ul li.page_item current_page_item a: link { display: inline; padding-bottom: 12px; color: #4f2b0d; position: relative; left: -20px; } /* these are the links */ div#navcontainer div#pagenav li.pagenav ul li.page_item a:link { /* any Page item */ display: inline; width: 175px; font-weight: normal; color: #4f2b0d; line-height: 18px; margin: 0; padding-bottom: 0.25em; text-decoration: none; list-style: none; list-style-type: none; } div#navcontainer div#pagenav li.pagenav ul li.page_item a:hover { /* any Page item */ display: inline; width: 175px; font-weight: normal; color: #4f2b0d; line-height: 18px; margin: 0; padding-bottom: 0.25em; text-decoration: underline; list-style: none; list-style-type: none; } div#navcontainer div#pagenav li.pagenav ul li.page_item current_page_item a:link { font-family: Georgia; font-size: 36px; color: #4f2b0d; } HTML: Code: <div id="inside_left_column"> <div id="sidebar"> <ul id="navcontainer"> <ul class="pagenav"> <li class="pagenav">About JCDS <ul> <li class="page_item page-item-58"><a href="...?page_id=58" title="Our Mission">Our Mission</a></li> <li class="page_item page-item-56 current_page_item"><a href="...?page_id=56" title="Welcome from the Head of School">Welcome from the Head of School</a></li> <li class="page_item page-item-60"><a href="...?page_id=60" title="School Leadership">School Leadership</a></li> </ul> </li> </ul> </ul> </div> </div> I'm attaching screenshots of what it looks like now (purple underlined links, section title not bold, too much indentation, bullets displaying for all pages), and what I want it to look like (brown text, bold text for section name, no underlines (only on hover), left-aligned, bullet only on current page). I would love to get some help with this! -- TIA Laura S. Hello, I am having trouble with the display: inline tag. ******************************************** Here is the style: H1.nolinebreak { font-size : 12pt; display: inline; } Here is an HTML snippet: <p> Here is my content text. Blah blah <H1 class="nolinebreak"> inline header 1 </H1> blah blah blah <H1 class="nolinebreak"> inline header 2 </H1> </p> ******************************** The second and additional instances of the <h1 class="nolinebreak"> works great. But the first one always puts in a line break. I need them all to display inline. What am I doing wrong? Thanks in advance. here is the site http://142.177.157.241:8080/bikers/ Well, I have some work to do about opera and IE since they are slow in the browsers making or the standards compliance. Even Opera8 doesn't suport my site and I think that was just released not too long ago. I think I'm going to be changing my browser of choice from Firefox to Netscape 8. I have the beta right now and it looks awesome and has all the functionality of Firefox I want plus it makes it easy to change between IE and netscape without actualy going to IE to see how my site looks. Two birds with one stone. My special font displays correctly in all browsers except the new firefox. It even worked in the older firefox before the new update. I am not sure why this is happening or how to fix it. Here is the code in the html page: Code: <head> <style type="text/css"> @font-face { font-family: English; font-weight: normal; src: url(fonts/English_.ttf); } </style> </head> <div class="content"> <h1> Beckin Designs</h1> Here is the CSS rules in my external CSS sheet: Code: .content h1 { font-family: "English", sans-serif; font-size: 52px; font-style: normal; /* [disabled]text-transform: uppercase; */ color: #F7F7F7; text-decoration: none; width: 930px; text-align: center; margin: -10px 0 5px 0; padding: 0; } Thanks! Hey everyone, I seem to be having problems on IE7 for a clients website (http://beitelligent.com/clients/sportsdome/ ).. If you view it on IE8 or Firefox 2.X+ it seems to display correctly, all on the same line.. on IE7 it still displays it as a list.. Does anyone know why this is? Thanks, Peter Barbosa Sorry for the "general" title but I don't know what is causing my problems, so it is hard to be specific... I am working on a web application for my summer research project, but I am not very knowledgeable in CSS. For the most part I am able to solve my problems except for the following: Issue 1: Profile Display Issue 1 CSS file The copyright at the bottom. Firefox displays correctly. Explorer displays too much white space above the copyright text. Issue 2 *IMPORTANT*: Profile Display (with missing fields) Issue 2 CSS file The text in the SME Profile does not display correctly when some of the fields are left blank (Issue 1 link shows a full profile). I'm trying to avoid using tables as it would cause some major setbacks in my work. FYI, the pages are dynamically generated so links will not work. Any suggestions? I can forsee having display issues on smaller screens and idk how to prepare for this. For example if i use the margin or padding property to say..center an image or align text. Keeping in mind that for example my wrapper div is coded in percent(other things too). So smaller screens=shrinkage, but the code thats not percent values will stay the same. The code is kind of a mess the most used components are at the top. Code: body {background:#white; } #wrap {margin-left:20%; margin-right:20%; } #header {border: 2px solid grey; background:white; } #titlearea { height:100px; padding:4px; font-family:Verdana; } #belowimg {background:#6a7c63; margin:0px; height:40px; border-top:2px solid grey; } .link {float:left; margin-top:8px; margin-left:5px; background:#6a7c63; border-right:1px solid #681300; height:20px; width:100px; text-align:center; text-decoration:none; font-family:Lucida Grande; padding-right:3px; margin-bottom:8px } .linklast {float:left; margin-top:8px; margin-left:0px; background:#6a7c63; height:20px; width:100px; text-align:center; text-decoration:none; font-family:Lucida Grande; padding-right:3px; margin-bottom:8px } #main {border:1px solid grey; background:tan; padding:10px; padding-right:0px; margin-top:0px; font-size:.80em; font-family:Verdana; color:#000000; height:100%; } #rightcontent {float:right; border-left:1px dashed grey; padding-left:0px; padding-right:0px; height:90%; width:230px; font-size:small; margin-left:8px; background:white; } .button { font-size:small; font-family:Verdana; border-top:1px solid grey; padding:8px; margin:0px; padding-bottom:0px; background:white; } .button.center { padding-left:23px; text-align:center; } .button.right {float:right; border:1px solid red; padding:2px; background:blue; } #imagescroller{width:530px; float:left; margin-right:10px; margin-left:10px; height:300px; padding:4px; border-top:2px solid #f1e1b8; border-left:2px solid #f1e1b8; border-right:2px solid #f1e1b8; border-bottom:2px solid #f1e1b8; background:blue; } #bottom {background:blue; border-bottom:2px solid red; border-right:2px solid #f1e1b8; border-left:2px solid #f1e1b8; height:30px; padding:0px; color:grey; margin-top:0px; width:600px; height:30px; } .box { padding-top:0px; margin:1px; font-size:.80em; font-style:strong; float:left; color:grey; background:white; font-family:Lucida Grande; line-height:1px; margin-top:196px; } .left {float:left; padding-right:20px; padding-bottom:0px; margin-bottom:0px; } .right {float:right; border-left:1px solid grey; border-bottom:1px solid grey; background:white; } .inside {border-top:1px solid white; padding-left:3px; padding-right:3px; background:#ffa812; font-family:Verdana; font-size:.70em; height:20px; background:#EEC900; color: #000000; } .bottom {height:10px; background:#DEECFF; border-top:1px solid grey; } .imagebottom {background:white; border-bottom:2px double #f1e1b8; padding:3px; color:grey; } #blockquote {margin-left:18%; font-size:.60em; padding-left:40px; color:brown; font-family:Verdana; font-style:italic; background:white; border-left:4px dotted orange; } #topping {border-bottom:1px solid grey; margin-left:1px; margin-top:4px; } #bottomborder {border-bottom:1px solid grey; margin-left:1px; } #footer {border:1px solid grey; height:30px; margin-top:5px; } #test {height:20px;} .test1 {margin-top:3px; border-top:1px solid #fcfcfc; height:0px; } .test2 {height:0px; border-top:1px solid #f5f5f5; } .test3 {height:0px; border-top:1px solid #ededed; } .test4 {height:0px; border-top:1px solid #e5e5e5; } .test5 {height:0px; border-top:1px solid #dedede; } .test6 {height:0px; border-top:1px solid #d9d9d9; } .test7{height:0px; border-top:1px solid #d3d3d3; } .test8 {height:0px; border-top:1px solid #cfcfcf; } .test9 {height:0px; border-top:1px solid #c9c9c9; } .test10{height:0px; border-top:1px solid #c2c2c2; } #testy{height:20px; color:000000; } h2 {font-size: 1.571em} /* 22px */ h3 {font-size: 1.429em} /* 20px */ h4 {font-size: 1.286em} /* 18px */ h5 {font-size: 1.143em;} /* 16px */ h6 {font-size: 1em; font-family:Verdana;color:brown;} /* 14px */ h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.1; margin-bottom: .8em; } /* Anchors */ a {outline: 0;} a img {border: 0px; text-decoration: none;} a:link, a:visited { color: #c7a01e; padding: 0 1px; text-decoration: none; } a:hover, a:active { /*background-color: #C74350;*/ color: #f09419; text-decoration: underline; text-shadow: 1px 1px 1px #333; } strong, b {font-weight: bold;} 060 em, i {font-style: Thanks Hi guys, I am building a page with CSS and I'm running into some problems with the CSS buttons I'm trying to use. Right now I have a large box along the top of the page and want two rows of buttons inside of it. These text on these buttons will likely be changing on a semi-regular basis. So instead of using gif buttons made in a graphics program, I'm using CSS to create the buttons. Since each row will have multiple buttons, I first used the display:inline; item and it worked fine in IE. In FF however, the buttons lost their height and width. If I also used the float:left; it worked right, but the buttons were not centered. In looking for a solution, I discovered that inline items cannot use the height and width properties. Any ideas on how to get what I'm looking for? I can't post a link, because this is an intranet page, but here is my relevant code... CSS Code: Original - CSS Code /*the main box which will contain the buttons*/ div#Main-buttons { width:96%; margin:2%; margin-top:10px; height:100px; padding-top:10px; background-color:#84C394; border:ridge medium #004500; } /*adjustments for FireFox*/ html>body div#Main-buttons { width:90%; margin:5%; margin-top:10px; height:100px; padding-top:0px; background-color:#84C394; border:ridge medium #004500; } /*class for individual buttons*/ div#buttons { width:100px; height:30px; margin:3px; float:left; background-color:#F7F3B5; border-style:solid; border-width:2px; border-color:#ffffff; line-height:1.6; display:inline; } a.buttonLinks:link {color:#000000; text-decoration:none;} a.buttonLinks:active {color:#000000; text-decoration:none;} a.buttonLinks:visited {color:#000000; text-decoration:none;}
HTML Code: Original - HTML Code <div id="Main-buttons"> <a href="#" class="buttonLinks"><div id="buttons">Testing</div></a><a href="#" class="buttonLinks"><div id="buttons">Testing</div></a></div> <div id="Main-buttons"> <a href="#" class="buttonLinks"><div id="buttons">Testing</div></a><a href="#" class="buttonLinks"><div id="buttons">Testing</div></a></div> Thanks in advance guys! http://www.turboconceptsllc.com/testmain ok in IE 6 AND 7 this happens. basically the pictures are pngs with background colors the same as the boldy {} color which is 4D4D4D. BUT its showing a contrast. opera and mozilla this of course isnt a problem any ideas how to get around this? transparent PNGs are not an option as IE6 doesnt render them. also gifs are not an option as the quality is horrible Thanks for your time. Still learning design, so thanks for your help if they are easy solutions. Border Issue: In IE and FF I have a complete border on a few header div's. The bottom and top border is different color than the left and right borders. You can see that the dark brown bottom and top borders appear to lay overtop of the white left and right borders. Website is he http://onlinecasinoboss.true2formde...e.php?page=home Styling CSS is he http://onlinecasinoboss.true2formde...aster-style.css Layout CSS is he http://onlinecasinoboss.true2formde...ster-layout.css IE Layout Issue: In FF the three center content columns display how I want it to look. When you view the same home.html page in IE you can see that they don't space out how I'd like. It is most visible by compairing the boxes on the right of the center content. Thanks a ton for your time and help, I appreciate it. 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> 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; } I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm Hi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks 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> |