Cipater2 Posted May 31, 2009 Share Posted May 31, 2009 I've been working on this project for my work for a week or so, creating a new listing template for our eBay auctions, and this morning while doing some final clean up and validating, I changed <i>something</i> that has caused the page to go wonky!I've been staring at this code for too long and I think I must be looking right past something obvious... Can anyone take a look and see if they can spot why my page content has shifted to the right and outside of the containing DIV and/or Table?The code might be challenging to sift through, as it's a nearly-complete page, but all class and id hooks for the CSS are given descriptive names, so hopefully that helps.Here's the HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><meta http-equiv="Content-Language" content="en-us"><title>VOAOR eBay Listing Template</title></head><body><!-- APPLICABLE LISTING CODE BEGINS HERE (COPY AND PASTE INTO EBAY OR TURBOLISTER FROM HERE)--><!-- --><link rel="stylesheet" type="text/css" href="voa_ebay_listings_style_a.css"><!-- --><!-- <link rel="stylesheet" type="text/css" href="http://mail.voaor.org/ebay/voa_ebay_listings_style_a.css" /> --><!-- All Class and ID definitions use the prefix "voa_" to avoid possible conflicts with any of eBay's pre-existing Class and ID definitions --><div id="voa_listing_page"> <div id="voa_listing_inner_page"> <div id="voa_listing_header"> <div id="voa_logo_thumb"> <img id="voaor_logo_thumb" src="http://mail.voaor.org/ebay/logo.gif" alt="Volunteers of America Oregon Logo"> </div> <div id="voa_links"> <ul> <li>Browse our <a href="http://stores.shop.ebay.com/voaor">eBay Store</a> <a href="http://stores.shop.ebay.com/voaor"><img id="store_icon" src="http://pics.ebaystatic.com/aw/pics/icon/iconSIFNW_16x16.gif" alt="eBay Store Icon"></a></li> <li>Add us to <a href="http://my.ebay.com/ws/eBayISAPI.dll?AcceptSavedSeller&mode=0&preference=0&sellerid=voaor">Favorite Sellers</a> <a href="http://my.ebay.com/ws/eBayISAPI.dll?AcceptSavedSeller&mode=0&preference=0&lsellerid=voaor"><img id="favorites_icon" src="http://pics.ebaystatic.com/aw/pics/icon/iconChance_16x16.gif" alt="Favorite Seller Icon"></a></li> <li>Subscribe to our <a href="http://my.ebay.com/ws/eBayISAPI.dll?AcceptSavedSeller&sellerid=voaor">Store Newsletter</a> <a href="http://my.ebay.com/ws/eBayISAPI.dll?AcceptSavedSeller&sellerid=voaor"><img id="newsletter_icon" src="http://pics.ebaystatic.com/aw/pics/icons/iconPageOptions_14x15.gif" alt="Store Newsletter Icon"></a></li> </ul> </div> </div> <div id="voa_listing_body"> <table id="voa_listing_body_layout_table"> <tr> <td id="voa_listing_body_layout_table_header" colspan="2"> <div id="voa_listing_title"> <hr> <h1> GORGEOUS BLACK & RED LEATHER "VAMPIRE" BIKER RIDING BOOTS</h1> <h2> Like New ~ Size 9.5 Mens ~ Goth / Punk / Fetish</h2> <hr> </div> </td> </tr> <tr> <td id="voa_listing_body_layout_table_left_pane"> <div id="voa_photos"> <img src="http://mail.voaor.org/ebay/sony_cybershot_set.jpg" alt="Item Photo"> <img src="http://mail.voaor.org/ebay/sony_cybershot_a.jpg" alt="Item Photo"> <img src="http://mail.voaor.org/ebay/sony_cybershot_b.jpg" alt="Item Photo"> <img src="http://mail.voaor.org/ebay/sony_cybershot_c.jpg" alt="Item Photo"> <img src="http://mail.voaor.org/ebay/sony_cybershot_d.jpg" alt="Item Photo"> <img src="http://mail.voaor.org/ebay/sony_cybershot_screen.jpg" alt="Item Photo"> </div> </td> <td id="voa_listing_body_layout_table_right_pane"> <div id="voa_body_text"> <hr class="gone"> <h2 class="gone">ITEM INFO</h2> <hr class="gone"> <div id="voa_item_description" class="voa_item_info"> <div class="voa_item_info_header"> <h3>DESCRIPTION</h3> </div> <div class="voa_item_info_body"> <div id="voa_item_description_background"> <p>Wow! This thing is amazing! Why don't you have one yet? Your life is incomplete without it!</p> <p>Have you been wondering why women won't sleep with you? It's because you don't have one of these!</p> <p>Go rob your grandmother or kill a homeless person and sell his organs if you have to - whatever it takes to make enough money to afford this item!</p> </div> </div> </div> <div id="voa_item_details" class="voa_item_info"> <div class="voa_item_info_header"> <h3>DETAILS</h3> </div> <div class="voa_item_info_body"> <table id="voa_details_table" class="voa_item_info"> <tr> <td class="voa_detail_name">BRAND</td> <td class="voa_detail_value">Vampire</td> </tr> <tr> <td class="voa_detail_name">TAG SIZE</td> <td class="voa_detail_value">Mens 9.5 (US)</td> </tr> </table> </div> </div> <div id="voa_item_measurements" class="voa_item_info"> <div class="voa_item_info_header"> <h3>MEASUREMENTS</h3> </div> <div class="voa_item_info_body"> <table id="voa_measurements_table" class="voa_item_info"> <tr> <td class="voa_detail_name">LENGTH<br><span class="unformat">(Heel to Toe)</span></td> <td class="voa_detail_value">9 inches</td> </tr> <tr> <td class="voa_detail_name">WIDTH<br><span class="unformat">(At Widest)</span></td> <td class="voa_detail_value">3 inches</td> </tr> </table> </div> </div> <!-- Almost ALL of the data below this point is STATIC (with the possible exception of the "Shipping" paragraphs), therefore unless the TERMS OF SALE for our eBay auctions change, this data should remain unchanged --> <hr> <h2>TERMS OF SALE</h2> <hr> <div id="voa_payment" class="voa_terms"> <div class="voa_terms_header"> <h3>PAYMENT</h3> </div> <div class="voa_terms_body"> <p><span class="miniheader">PROCESS: </span> An invoice will be sent to the winning bidder within 1 business day of auction end, and unless prior arrangements are agreed upon, payment must be received within 14 days of auction close.</p> <p>If no payment is received within 14 days, the item will be relisted, an Unpaid Item Dispute will be filed, and appropriate feedback will be left.</p> <p><span class="miniheader">METHODS: </span> At this time, PayPal is the only method of payment we accept.</p> </div> </div> <div id="voa_shipping" class="voa_terms"> <div class="voa_terms_header"> <h3>SHIPPING</h3> </div> <div class="voa_terms_body"> <p><span class="miniheader">TIME FRAME:</span> Orders are shipped within 3 business days of receiving <span class="u">cleared</span> payment.</p> <p><span class="miniheader">AMOUNT:</span> Buyer agrees to pay the shipping amount specified by the USPS Shipping Calculator. We do not add extra "handling" fees to our shipping costs, and use the USPS Shipping Calculator to charge as close to actual shipping costs as possible.</p> <p><span class="miniheader">PACKAGING:</span> Our shipments are packaged in a secure, professional manner, ensuring that the items you purchase from us will make it to you safely</p> <p><span class="miniheader">WITHIN THE USA:</span> Unless specified otherwise, we only ship via the US Postal Service (USPS Priority Mail or USPS Media Mail), and we will only ship to a valid, PayPal-Confirmed address.</p> <p><span class="miniheader">INTERNATIONAL:</span> We are happy to serve the global community and we will ship anywhere the law allows. Please be aware of your local postage restrictions and customs laws & fees; we will not falsify customs documents and any additional customs fees/taxes are the buyer's responsibility.</p> <p><span class="miniheader">LOCAL PICK-UP:</span> We always welcome Local Pick-Up of items from our Resale Outlet Store here in beautiful SE Portland, OR! Email us for details!</p> </div> </div> <div id="voa_returns" class="voa_terms"> <div class="voa_terms_header"> <h3>RETURNS</h3> </div> <div class="voa_terms_body"> <p>Although we do our absolute best to describe our items as thoroughly and honestly as possible, it is not always possible to describe every single mark, scratch, or other detriments when dealing with used goods. Although we will occasionally make an exception, the general rule for our auctions is that <span class="bold_text">all sales are final</span>.</p> </div> </div> <div id="voa_feedback" class="voa_terms"> <div class="voa_terms_header"> <h3>FEEDBACK</h3> </div> <div class="voa_terms_body"> <p>Appropriate feedback will be left as the final step of the transaction, when we are sure that the Buyer has both received their item and is happy with their purchase. Feedback will not be left until this time.</p> <p>Positive feedback is essential to the success of any eBay Seller; we work hard to make sure our customers are happy with their purchases, and Positive Feedback & DSR Ratings are much appreciated.</p> </div> </div> <hr> <h2>ABOUT VOAOR</h2> <hr> <div id="voa_about_us"> <h3 class="gone">ABOUT VOAOR</h3> <div class="voa_about_us_image"> <img id="voaor_logo" src="http://mail.voaor.org/ebay/logo.gif" alt="Volunteers of America Oregon Logo"> </div> <p><span class="b">Volunteers of America of Oregon (VOAOR)</span> is a social service non-profit organization. All proceeds help vulnerable people in our community. We nurture, support, and empower the people we serve. To learn more about Volunteers of America Oregon, click the link to our official website on our <span class="b"><a href="http://members.ebay.com/ws/eBayISAPI.dll?ViewUserPage&userid=voaor">About Me Page</a></span>.</p> <p>On eBay, voaor strives to bring you quality collectibles while providing excellent service. We believe strongly in treating others as we would like to be treated, and you will find these values to be reflected in our business transactions.</p> <p>Our eBay Store was started in 2007 as an extension of our Resale Outlet Store here in Portland, OR, and through our commitment to excellence we have maintained a <span class="b"><a href="http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback2&userid=voaor&ftab=FeedbackAsSeller">100% Feedback Rating</a></span>!</p> <p>Our inventory is constantly changing, full of a wide spectrum of wonderful items - from collectible antiques to high-tech gadgets, designer clothing to used automobiles! Check back often to see what's new!</p> <p><span class="b">Thanks for Looking!</span></p> </div> </div> </td> </tr> </table> </div> </div></div><!-- APPLICABLE LISTING CODE ENDS HERE (COPY AND PASTE INTO EBAY OR TURBOLISTER TO HERE)--></body></html> Here's the CSS: div#voa_listing_page { width: 100%; min-width: 840px; padding: 10px; background: #FFF6D9; text-align: center; font-family: Tahoma, Verdana, Sans-Serif}div#voa_listing_inner_page { width: 800px; margin: 10px auto; padding: 10px; background-color: white; border: 7px #327F7F solid; outline: 4px #066095 solid; text-align: center}div#voa_listing_header { height: 60px; width: 800px; text-align: right}div#voa_logo_thumb { text-align: left; display: inline-block; float: left}img#voaor_logo_thumb { width: 157px; height: 60px; margin: 0px}div#voa_links { text-align: right; /* display: inline-block */} div#voa_links ul{ font-family: Tahoma, Verdana, Sans-Serif; font-size: 11px; font-weight: bold; list-style-type: none; margin: 0px; /* display: inline-block */}div#voa_links img{ position: relative; top: 3px}img#store_icon { margin: 0px 2px}img#favorites_icon { margin: 0px 2px}img#newsletter_icon { margin: 0px 3px}div#voa_listing_title { text-align: center;}div#voa_photos { width: 350px; /* margin-right: 8px; */ text-align: center /* background-color: orange; */ /* this line used for debugging purposes only */}div#voa_photos img { width: 350px; margin: 4px 0px}/* NOTE ABOUT PHOTO SIZING: *//* Ideal size for photos in this template are 350px or 700px wide .JPGs */div#voa_body_text { width: 386px; text-align: center; /* background-color: green; */ /* this line used for debugging purposes only */ /* display: inline-block */}div#voa_item_description p { background-color: #E3F3FD; font-size: 12px; margin: 8px 4px}div#voa_item_description_background { background-color: #E3F3FD; margin-top: 2px; padding: 1px}div.voa_item_info { text-align: left; padding: 4px; margin: 4px}div.voa_item_info_header { background-color: blue; margin: 0px 4px; padding: 2px 4px;} div.voa_item_info h3 { position: relative; margin: 0px; font-size: 10pt; font-weight: bold; color: white; z-index: 1 }div.voa_item_info_body { border: 1px blue solid; padding-top: 10px; text-align: left; background-color: none; position: relative; top: -10px}table.voa_item_info { width: 355px}table#voa_listing_body_layout_table { border-collapse: collapse; border: 0px; margin: 0px}td#voa_listing_body_layout_table_header { text-align: center; vertical-align: top}td#voa_listing_body_layout_table_left_pane { text-align: left; width: 350px; vertical-align: top; padding: 0px}td#voa_listing_body_layout_table_right_pane { text-align: right; vertical-align: top}td.voa_detail_name { padding: 4px; border: 1px #E3F3FD solid; background-color: #E3F3FD; font-size: 12px; font-weight: bold; width: 100px;}td.voa_detail_value { padding: 4px; border: 1px #E3F3FD solid; font-size: 12px;}div.voa_terms { text-align: left; padding: 4px; margin: 4px;}div.voa_terms_header { background-color: red; margin: 0px 4px; padding: 2px 4px;}div.voa_terms h3 { position: relative; margin: 0px; font-size: 10pt; font-weight: bold; color: white; z-index: 1}div.voa_terms_body { border: 1px red solid; padding-top: 10px; text-align: left; background-color: none; position: relative; top: -10px}div.voa_terms p { margin: 4px; font-size: 11px}div#voa_about_us { text-align: left; padding: 4px; margin: 4px}div#voa_about_us p { margin: 8px 4px; font-size: 12px; /* max-width: 380px */}div.voa_about_us h3 { margin: 0px; font-size: 10pt; font-weight: bold; color: red }div.voa_about_us_image { text-align: center; padding: 0px}div.voa_about_us_image img { margin: 8px auto; width: 300px}div#voa_listing_page img { border: 0px}div#voa_listing_page hr { height: 3px; background-color: #066095}div#voa_listing_page h1 { margin: 0px; font-size: 16pt; color: black}div#voa_listing_page h2 { margin: 0px; font-size: 12pt; font-weight: bold; color: black}div#voa_listing_page .miniheader { font-weight: bold; font-size: 11px; margin-right: 5px}div#voa_listing_page span.unformat {font-weight: normal; font-style: normal}div#voa_listing_page span.b {font-weight: bold}div#voa_listing_page span.i {font-style: italic}div#voa_listing_page span.u {text-decoration: underline}div#voa_listing_page .invisible {visibility: hidden}div#voa_listing_page .gone {display: none} Link to comment Share on other sites More sharing options...
Cipater2 Posted May 31, 2009 Author Share Posted May 31, 2009 Noticed a little giveaway as to part of the problem - the content was shifted right by exactly the same amount as the width of the logo in the top left. I realized the float:left property of that logo was the source of the problem, and by adding the following to the CSS file: div#voa_listing_body { clear: left; margin: 0px auto} I was able to fix the content shift. Then a gutter appeared on the right side of the content, even though this content should have expanded automatically to fit the remaining page width.It showed off a bad line of CSS left over from an early version of the page: div#voa_body_text { width: 386px; text-align: center; /* background-color: green; */ /* this line used for debugging purposes only */ /* display: inline-block */} By removing that fixed width declaration, the page now seems to be functioning as intended (generally speaking) - at least in FireFox... :)Hooray for solving your own problem LOL. I'm sure there will be more questions about this project later on, though - especially when it comes time to start writing the add-on; a JavaScript page that displays a form for users to fill out which will automatically generate their filled auction details (measurements, title, description, brand, etc). Should be fun as my first project utilizing relatively complicated JavaScript... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.