SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    What does one have to do to use the entire space in IE?

    Look at the link below in Firefox:

    http://www.osretail.com/workzone/wg_mockup.html

    That is how I want it to look..

    In IE, there is a big gap between the middle and the third column. If the page markup the DIVs are listed in the order of middle, left and right for the main content portion of the page. What has to happen to get the page to look the same in IE as it does in Firefox? Basically IE needs to gain ~60 pixels from the right of the middle column.
    Wayne Luke
    ------------


  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Without going through and changing everything you could simply give ie a different margin.

    Code:
     #mainColumn {
    	position:absolute;
      left: 210px;
      right: 190px;
      padding: 10px 4px 0 4px;
      border: 1px solid;
       }
     * html #mainColumn {right:130px}
    I expect its something to do with your nesting and absolutel placed elements that is causing the discrepancy. I usually keep the absolutely placed elements at the emd of the html out of the way as ie doen't alweays seem to ignore them when laying out the page.

    You have also added float:right to your absolutely placed element - It can't be both. Make your mind up or the browser may guess for you. Either its floated or its not. (Position relative without co-ordinates is ok to use on floats as it cures some ie bugs).

    If you want me to look further into your positioning then just shout and I'll take a longer look.

    I'm assuming you absolutely placed the centre content for a reason rather than let it flow. If you resize the window smaller then the text in the centre will overflow all your footer content!

    I would float the left and right columns and keep the centre content statically positioned so that it pushes the footer down etc.

    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Heres an example of what I mentioned above:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Witches Grove Mockup</title>
    <style>
    /**** LINK-tag style sheet stylesheet_oldworld.css ****/
    /* Standard HTML Elements */
    body {
    color: #000;
    font-family: Verdana,Geneva, Arial, Helvetica, sans-serif;
    font-size: 80%;
    background-color: #F4ECC4;
    background-image: url(http://www.osretail.com/workzone/inc...parchment4.gif);
    }
    #pageContainer {
    width:96%;
    margin: 0 auto;
    background-color: #F4ECC4;
    color: #000;
    }
    #header {
    margin: 0;
    border-bottom: 3px double #640032;
    }
    .headBackground1 {
    background-image: url(http://www.osretail.com/workzone/inc...es/head_04.jpg);
    }
     
    .headBackground2 {
    background-image: url(http://www.osretail.com/workzone/inc...es/head_08.jpg);
    }
     
    .headBackground3 {
    background-image: url(http://www.osretail.com/workzone/inc...es/menu_bg.jpg);
    }
     
    #navRow {
    padding: 0px 10px 0px 10px; 
    margin: 0px auto;
    }
    #navRow #breadcrumb {
    float: left;
    text-align: left;
    font-weight: bold;
    	background-color:transparent;
    color: #316400;
    width: 49%;
    }
    #navRow #searchbar {
    float: right;
    text-align: right;
    font-weight: bold;
    	background-color:transparent;
    color: #316400;
    width: 49%;
    }
     
    #mainPage {
    padding: 6px;
    }
    #mainColumn {
     
    margin-left: 180px;
    margin-right: 160px;
    padding: 10px 4px 0 4px;
    border: 1px solid;
    }
    * html #mainColumn {height:1%}/*defeat 3 pixel jog*/
    #leftColumn {
    position: relative;
    float:left;
    width: 175px; 
    vertical-align: top; 
    }
     
    #rightColumn {
    float: right; 
    padding-top: 10px;
    position: relative;
    width: 152px;
    vertical-align: top; 
    }
     
    #footer {
    width: 96%;
    margin: 0 auto 0 auto;
    text-align: left;
    background-color: #F4ECC4; 
    color: #000;
    }
    #legal {
    	background-color:transparent;
    color: #000000;
    	font-size: 8pt;
    line-height: 1.2;
    }
    .spacer {
    clear: both;
    font-size: 1px;
    }
    .greenboxed {
    background: url(http://www.osretail.com/workzone/inc...es/greenbg.gif) repeat-y;
    width: 174px; /* set to the width of the graphic above */
    }
    .greenboxed .i {
    	background: url(http://www.osretail.com/workzone/inc...reenbottom.gif) no-repeat bottom;
    }
     
    .greenboxed .j {
    	background: url(http://www.osretail.com/workzone/inc...s/greentop.gif) no-repeat;
    	min-height: 143px;
    }
    .greenboxed .k {
    	padding: 0 15px 30px 15px; /* should push the content away from the sides of the box, and make room for the bottom graphic */
    }
     
    .greenboxed h2 {
    	font-family: Verdana, Arial, sans-serif;
    	font-size: small;
    	line-height: 1;
    	font-weight: bold;
    	background-color:transparent; 
    	color: white;
    	text-align: center;
    	margin: 0;
    	padding: 20px 0 5px 0;
    }
     
    .greenboxed p {
    	margin-top: 0;
    }
    a.title {
    text-decoration: none;
    background: url(http://www.osretail.com/workzone/inc.../underline.gif) repeat-x 100% 100%;
    white-space: nowrap;
    padding-bottom: 5px;
    line-height: 1.5;
    font-weight: bold;
    color: #006400;
    }
     
    a.title:hover {
    background-color:transparent;
    color: #640032;
    }
    h2 {
    font-size: 2em;
    }
    p {
    font-size: 1em;
    }
    /* spot elements for character */
    .divider {
    background: url(http://www.osretail.com/workzone/inc...es/divider.gif) no-repeat center;
    height: 31px;
    font-size: 0px;
    }
    form.inline {
    display: inline;
    font-size: 80%;
    }
    form.inline .button {
    background-color: #006400;
    color: #fff;
    font-size: 85%;
     
    }
     
    /**** LINK-tag style sheet stylesheet.css ****/
    .main {
    font-size: 11px;
    line-height: 1.5;
    }
    A {
    color: #428dff;
    text-decoration: none;
    }
    A:hover {
    color: #ffb062;
    text-decoration: none;
    }
    .headerError {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    background: #ff0000;
    color: #ffffff;
    font-weight : bold;
    text-align : center;
    }
    .headerInfo {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    background: #00ff00;
    color: Black;
    font-weight: bold;
    text-align: center;
    }
    .rightbox, .centerbox {
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    background: #F4ECC4;
    border: 1px solid #9a9a9a;
    margin-bottom: 15px;
    }
    .rightboxheading, .centerboxheading {
    background-color: #abbbd3;
    font-size: 10px;
    font-weight: bold;
    color: #ffffff;
    padding: 3px;
    height: 20px;
    padding-left: 5px;
    }
    .rightboxheading a, .centerboxheading a {
    color: #ffffff;
    }
    .rightboxcontent, .centerboxcontent {
    line-height: 125%;
    padding: 4px;
    }
    .rightboxfooter, .centerboxfooter {
    background-color: #abbbd3;
    margin-bottom: 15px;
    }
    .plainBox {
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    background: #ffffff;
    border:1px solid #9a9a9a;
    padding: 5px;
    }
    .plainBoxHeading, TD.tableHeading {
    font-size: 12px;
    font-weight: bold;
    padding: 11px 5px 5px;
    }
    .productListing-heading {
    background-color: #abbbd3;
    font-size: 10px;
    font-weight: bold;
    color: #ffffff;
    padding: 3px;
    height: 20px;
    }
    .productlisting {
    border:1px solid #9a9a9a;
    }
    .productListing-data {
    font-size: 10px;
    padding: 5px;
    }
    /*center main section
    -----------------------------------*/
    .pageHeading, h1 {
    font-size: 16px;
    font-weight: bold;
    color: #006364;
    }
     
    /*miscellaneous areas
    -------------------------------------*/
    .cartBox {
    background: #eff4f8;
    font-size: 10px;
    padding: 3px;
    border: 1px dotted #ffb062;
    }
    .productListing-odd, .upcomingProducts-odd {
    background: #ffffff;
    }
    .productListing-even, .upcomingProducts-even, .productsNotifications {
    background: #eff4f8;
    }
    .pageresults a {
    color: #428dff;
    }
    .pageresults a:hover {
    background: #FFFF33;
    }
    .newItemInCart {
    color: #ff0000;
    font-weight: bold;
    }
    .smallText, .pageresults{
    font-size: 10px;
    }
    .fieldKey {
    font-size: 12px;
    font-weight: bold;
    }
    .fieldValue {
    font-size: 12px;
    }
    .markProductOutOfStock {
    color: #c76170;
    font: bold 12px Verdana, Arial, sans-serif;
    }
    .normalprice {
    text-decoration: line-through;
    }
    .productSpecialPrice, .productSalePrice, .stockWarning, .coming {
    color: #ff0000;
    }
    .productSpecialPriceSale {
    color: #ff0000;
    text-decoration: line-through;
    }
    .productPriceDiscount, .inputRequirement {
    font-size: 10px;
    color: #FF0000;
    }
    .moduleRow { }
    .moduleRowOver { background-color: #D7E9F7; cursor: pointer; }
    .moduleRowSelected { background-color: #E9F4FC; }
    /* message box */
    .messageBox {}
    .messageStackError, .messageStackWarning, errorBox {
    background-color: #ff0000;
    color: #ffffff;
    font-size: 10px;
    padding: 4px;
    border: 1px solid #9a9a9a;
    }
    .messageStackSuccess { background-color: #b3ffa8; padding: 2px; border: 1px solid #9a9a9a; }
    .messageStackCaution { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffff00; }
    /* checkout totals */
    .CheckoutConfirmationText {
    font-weight:bold;
    }
    /* product_info attribute comments */
    .ProductInfoComments {
    color: #ff0000;
    font-size: 10px;
    text-align : left;
    font-weight: bold;
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: 1px solid #9a9a9a;
    }
    /* General alert span class */
    TD.alert, SPAN.alert {
    color: #FF0000;
    font-weight: bold;
    }
    /* General alert span class */
    TD.alertBlack, SPAN.alertBlack {
    color: #000000;
    font-weight: bold;
    }
    /* popup tables */
    TABLE.popupattributeqty, TABLE.popupcouponhelp, TABLE.popupcvvhelp, TABLE.popupimage, TABLE.popupimageadditional, TABLE.popupsearchhelp, TABLE.popupshippingestimator, TABLE.popupinfoshoppingcart {
    background-color: #ffffff;
    margin: 6px;
    padding: 6px;
    font: 11px Verdana, Arial, sans-serif;
    }
    /* categories_description */
    TABLE.categoriesdescription {
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    background: #D0D0D0;
    border:1px solid #9a9a9a;
    }
    TD.categoriesdescription {
    font-size: 11px;
    line-height: 1.0;
    }
    </style>
    </head>
    <body>
    <div id="pageContainer"> 
    <div id="header"> 
    	<!-- header //-->
    	<table width="100%" border="0" cellpadding="0" cellspacing="0" class="headBackground1">
    	 <tr> 
    		<td rowspan="3" width="159"><img src="http://www.osretail.com/workzone/inc...es/head_01.jpg" width="159" height="180" alt="" /></td>
    		<td rowspan="3" width="224"><img src="http://www.osretail.com/workzone/inc...es/head_02.jpg" width="224" height="180" alt="" /></td>
    		<td width="218"><img src="http://www.osretail.com/workzone/inc...es/head_03.jpg" width="218" height="56" alt="" /></td>
    		<td rowspan="3" width="100%" class="headBackground1" align="right" valign="bottom">&nbsp;</td>
    	 </tr>
    	 <tr> 
    		<td height="90" colspan="2">&nbsp;</td>
    	 </tr>
    	 <tr> 
    		<td width="218"><img src="http://www.osretail.com/workzone/inc...es/head_06.jpg" width="218" height="34" alt="" /></td>
    	 </tr>
    	</table>
    	<table width="100%" border="0" cellpadding="0" cellspacing="0">
    	 <tr> 
    		<td width="8"><img src="http://www.osretail.com/workzone/inc...es/head_07.jpg" width="8" height="30" alt="" /></td>
    		<td width="375" align="right" class="headBackground2">&nbsp;</td>
    		<td width="74"><img src="http://www.osretail.com/workzone/inc...es/head_09.jpg" width="74" height="30" alt="" /></td>
    		<td align="right" class="headBackground3"> <table width="315" cellpadding="0" cellspacing="0" border="0" align="right">
    			<tr> 
    			 <td width="315" align="right"><a href="index.php?main_page=account">View 
    				Account</a> | <a href="index.php?main_page=shopping_cart">Shopping 
    				Tote</a> | <a href="index.php?main_page=checkout_shipping">Checkout</a></td>
    			 <td width="8">&nbsp;</td>
    			</tr>
    		 </table></td>
    	 </tr>
    	</table>
    	<!-- header_eof //-->
    </div>
    <div id="navRow"> <span id="breadcrumb">Welcome <span class="greetUser">Guest!</span> 
    	Would you like to <a href="http://www.osretail.com/zen-beta/index.php?main_page=login">log 
    	yourself in</a>?</span> <span id="searchbar">Search this site: 
    	<form class="inline" name="quick_find" action="http://www.osretail.com/zen-beta/ind..._search_result" method="get">
    	 <input type="hidden" name="main_page" value="advanced_search_result" />
    	 <input type="hidden" name="search_in_description" value="1" />
    	 <input type="text" name="keyword" size="15" maxlength="30" style="width: 100px" />
    	 &nbsp; 
    	 <input type="submit" class="button" value="Search" />
    	</form>
    	</span> 
    	<div class="spacer">&nbsp;</div>
    </div>
    <div id="mainPage"> 
    	<div id="leftColumn"> 
    	 <div class="greenboxed"> 
    		<div class="i"> 
    		 <div class="j"> 
    			<div class="k"> 
    			 <h2>Shop Online</h2>
    			 <p><a href="index.php?main_page=index&cPath=1" class="title">Herbs 
    				&amp; Spices</a><br />
    				The finest quality herbs and spices at realistic prices.</p>
    			 <p><a href="index.php?main_page=index&cPath=2" class="title">Natural 
    				Teas</a><br />
    				We search the world for the finest teas and infusions to offer 
    				you.</p>
    			 <!-- <p><span class="title">Herbal Remedies</span><br />Coming Soon!</p> -->
    			 <p><a href="index.php?main_page=index&cPath=3" class="title">Handmade 
    				Incense</a><br />
    				Incenses blended from our own ingredients within ritual space</p>
    			 <p><a href="index.php?main_page=index&cPath=4" class="title">Woods 
    				&amp; Resins</a><br />
    				Resins from the easily attainable to the rare and exotic.</p>
    			 <p><a href="index.php?main_page=index&cPath=5" class="title">Aromatherapy 
    				Oils</a><br />
    				Essential and Fragrance oils of the highest quality from around 
    				the world.</p>
    			 <p><a href="index.php?main_page=index&cPath=26" class="title">Candle 
    				Shoppe</a><br />
    				Candles and holders for aromatherapy, relaxing and ritual.</p>
    			 <p><a href="index.php?main_page=index&cPath=6" class="title">Bath 
    				&amp; Beauty</a><br />
    				All Natural, Herbal solutions to Bath and Beauty</p>
    			 <p><a href="index.php?main_page=index&cPath=7" class="title">Tarot</a><br />
    				Tarot Decks and Boxes from the common to the ornate</p>
    			 <p><a href="index.php?main_page=index&cPath=8" class="title">Ritual 
    				Tools</a><br />
    				Ritual Tools from around the world, many handmade.</p>
    			 <p><a href="allcategories.php" class="title">All Categories</a></p>
    			</div>
    		 </div>
    		</div>
    	 </div>
    	 <!-- /greenboxed -->
    	 <br />
    	 <div class="greenboxed"> 
    		<div class="i"> 
    		 <div class="j"> 
    			<div class="k"> 
    			 <h2>Articles</h2>
    			 <p> <a href="articles.php/tPath/1" class="title">Herbalism</a><br />
    				<a href="articles.php/tPath/2" class="title">Aromatherapy</a><br />
    				<a href="articles.php/tPath/3" class="title">Recipes</a><br />
    				<a href="articles.php/tPath/4" class="title">Safety Information</a> 
    			 </p>
    			 <div style="text-align:right"><a href="articles.php">more articles...</a></div>
    			</div>
    		 </div>
    		</div>
    	 </div>
    	 <!-- /greenboxed -->
    	 <br />
    	</div>
    	<div id="rightColumn"> 
    	 <!--// bof: search //-->
    	 <div class="rightbox"> 
    		<div class="rightboxheading" >Search</div>
    		<div class="rightboxcontent"> 
    		 <form name="quick_find" action="http://www.osretail.com/zen-beta/ind..._search_result" method="get">
    			<input type="hidden" name="main_page" value="advanced_search_result" />
    			<input type="hidden" name="search_in_description" value="1" />
    			<div align="center"> 
    			 <input type="text" name="keyword" size="18" maxlength="100" style="width: -30px" />
    			 <br />
    			 <input type="submit" value="Search" style="width: 50px" />
    			 <br />
    			 <a href="http://www.osretail.com/zen-beta/index.php?main_page=advanced_search">Advanced 
    			 Search</a></div>
    		 </form>
    		</div>
    		<div class="rightboxfooter">&nbsp;</div>
    	 </div>
    	 <!--// eof: search //-->
    	 <!--// bof: languages //-->
    	 <div class="rightbox"> 
    		<div class="rightboxheading" >Languages</div>
    		<div class="rightboxcontent"> 
    		 <div align="center"><a href="http://www.osretail.com/zen-beta/index.php?main_page=index&amp;language=en"><img src="http://www.osretail.com/workzone/inc...mages/icon.gif" border="0" alt="English" title=" English " width="24" height="15" /></a>&nbsp;&nbsp;</div>
    		</div>
    		<div class="rightboxfooter">&nbsp;</div>
    	 </div>
    	 <!--// eof: languages //-->
    	 <!--// bof: currencies //-->
    	 <div class="rightbox"> 
    		<div class="rightboxheading" >Currencies</div>
    		<div class="rightboxcontent"> 
    		 <form name="currencies" action="http://www.osretail.com/zen-beta/ind...ain_page=index" method="get">
    			<select name="currency" onchange="this.form.submit();" style="width: 100%">
    			 <option value="USD" selected="selected">US Dollar</option>
    			 <option value="EUR">Euro</option>
    			</select>
    			<input type="hidden" name="main_page" value="index" />
    		 </form>
    		</div>
    		<div class="rightboxfooter">&nbsp;</div>
    	 </div>
    	 <!--// eof: currencies //-->
    	 <!--// bof: whosonline //-->
    	 <div class="rightbox"> 
    		<div class="rightboxheading" >Who's Online</div>
    		<div class="rightboxcontent">There currently is&nbsp;1&nbsp;guest&nbsp;online.</div>
    		<div class="rightboxfooter">&nbsp;</div>
    	 </div>
    	 <!--// eof: whosonline //-->
    	</div>
    	<div id="mainColumn"> 
    	 <h1 class="pageHeading">The Witches Grove, An Apothecary &amp; Aromatherapy 
    		Shoppe</h1>
    	 <blockquote>Climb the mountains and get their good tidings. Nature's peace 
    		will flow into you as sunshine flows into trees. The winds will blow their 
    		own freshness into you, and the storms their energy, while cares will 
    		drop off like autumn leaves. - John Muir</blockquote>
    	 <p>The Witches Grove is a purveyor of high quality, low cost products designed 
    		to enhance your life experience through Mind, Body and Soul. Where possible 
    		our products are handmade by artisans from around the world. We currently 
    		offer lines in Incense, Oils, Candles, Herbs, Magickal tools and more. 
    		You will find we have carry many products to assist you with Wiccan, Pagan 
    		and Occult Rituals and Spellcasting. We cater for the requirements of 
    		the spiritually aware and those searching for unusual or inspired gifts, 
    		and we aim to do this through reliable customer service and competitive 
    		prices.</p>
    	 <p>Our range of goods includes several of our own handcrafted items, and 
    		we will be constantly adding to the products offered here. So, if you 
    		do not find what you are looking for, please check back again, or contact 
    		us with your requirements.</p>
    	</div>
    	<div class="spacer">&nbsp;</div>
    </div>
    </div>
    <div class="footer"> 
    <div id="legal"> 
    	<p><span style="color:#f00;font-weight:bold;">DISCLAIMER:</span>&nbsp;The 
    	 above statements have not been evaluated by the Food &amp; Drug Administration. 
    	 These pages contain information on a range of herbs and/or essential oils. 
    	 They are intended as a source of information, not as a medical reference. 
    	 We do not provide physical or mental health advice. Our site and our products 
    	 are not intended to treat or diagnose any problem or conditions. The customer 
    	 is advised to consult a health professional before using any homeopathic 
    	 cure or remedy.</p>
    	<p>&copy; Copyright 2002-2004, The Witches Grove, All Rights Reserved. This 
    	 site and all its content is protected under U.S. Copyright Law.<br />
    	 A <a href="http://www.sacredgrove.biz" target="_new">Sacred Grove</a> site. 
    	 Powered by <a href="http://www.zen-cart.com">Zen-Cart</a>. Hosted by <a href="http://www.osretail.com">OS-Retail</a></p>
    </div>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •