Jump to content

2 Column Layout Problem in IE 6

TronB24

By TronB24
in CSS Help

 Share

Recommended Posts

TronB24 Newbie

TronB24

Posted
Posted

I am having trouble trying to figure out why IE 6 pushes the content of my left column over so that it forces the things in the right column to bump down below. The page looks fine in Netscape, Firefox, Safari and even IE 7. I've been trying to figure this out for days, so help now would be greatly appreciated.

 

 

Site url: http://monin.com/store

 

Site code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Monin Store: Your Secure eCommerce</title>
<meta name="Keywords" content="syrup, syrups, concentrates, flavors, buy, vanilla, raspberry, mojito, sangria, coffee, recipes, applications, products, merchandise, bottles, sugar, teas, specialty, purchase, online, secure, ecommerce, commerce, protection, sales, food, beverage, cocktails, quality, mocktails, natural, organic, alcohol, free, hot, cold" />
<meta name="Description" content="Buy your favorite Monin gourmet flavored syrups, sugar free products, tea concentrates, merchandise, Mojito, Sangria Mix, and other specialty items online" />
<link href="css/store_screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/store_print.css" rel="stylesheet" type="text/css" media="print" />
<script language="JavaScript" type="text/javascript" src="js/dropmenu.js"></script>
</head>

<body>
<div id="wrapper">
  <div id="header">

    <a href="index.php"><img src="/store/images/monin_logo.gif" alt="Monin Gourmet Flavorings" width="226" height="71" border="0" /></a>
    <ul>
      <li class="first"><a href="/store/index.php">Home</a></li>
      <li><a href="products.php" onmousedown="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu1, '150px')" onmouseout="delayhidemenu()">Product Categories</a></li>
      <li><a href="http://160113.brightwebsite.com/store/shopcart/">Shopping Cart</a></li>
      <li><a href="/store/faqs.php">F.A.Q.</a></li>
      <li><a href="/store/contact.php">Contact</a></li>

</ul>
  </div>  <div id="leftcol">
<img src="images/nav_Search.jpg" class="navImg" alt="Search Products" width="175" height="35" />
<form name="search" action="results.php" method="post">
  <table width="100%" border="0" cellpadding="0">
    <tr align="center">
      <td><input name="keyword" type="text" value="keyword" size="14" />        <input type="submit" name="WADbSearch1" value="Go" /></td>
    </tr>
  </table>

</form>
<img src="images/nav_header.jpg" class="navImg" alt="Products" width="175" height="35" />
      <ul>
              <li><a href="category.php?flav_cat_id=7">Accessories</a></li>
                      <li><a href="category.php?flav_cat_id=1">Classic Flavorings</a></li>
                      <li><a href="category.php?flav_cat_id=4">Monin Gourmet Sauces</a></li>
                      <li><a href="category.php?flav_cat_id=3">Monin O'free</a></li>

                      <li><a href="category.php?flav_cat_id=6">Special Offers</a></li>
                      <li><a href="category.php?flav_cat_id=5">Specialty Flavors</a></li>
                      <li><a href="category.php?flav_cat_id=2">Tea Concentrates</a></li>
          </ul>
	  </div>  <div id="main">
    <a href="products.php"><img src="images/greeting.jpg" alt="Monin Store" width="605" height="250" border="0" /></a>
    <h1><img src="images/txt_FeaturedProducts.gif" alt="Featured Products" width="193" height="25" /></h1>

          <table width="602" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="109" valign="middle"><a href="product_details.php?flavor_ID=43"><img src="images/large/Pomegranate1L.jpg" alt="Pomegranate" width="109" height="120" border="0" /></a></td>
          <td width="15" valign="top" background="images/prod_devider.gif"><img src="images/spacer.gif" alt="divider" width="1" height="1" /></td>
          <td width="483" valign="top"><p class="ProdName">Pomegranate</p>
            <p><strong>Monin Pomegranate</strong> adds passion, mystery and a dash of playfulness to almost any beverage. Perfect in cocktails from martinis to daiquiris, <strong>Monin Pomegranate</strong> also enhances iced tea and lemonade.</p>            <p>For recipes or to place an order, <a href="product_details.php?flavor_ID=43">click here</a>.</p></td>

        </tr>
        
        <tr>
          <td colspan="3"><img src="images/prod_devider03.gif" alt="divider" width="607" height="15" /></td>
        </tr>
      </table>
            <table width="602" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="109" valign="middle"><a href="product_details.php?flavor_ID=36"><img src="images/large/Mojito1L_1.jpg" alt="Mojito Mix" width="109" height="120" border="0" /></a></td>
          <td width="15" valign="top" background="images/prod_devider.gif"><img src="images/spacer.gif" alt="divider" width="1" height="1" /></td>

          <td width="483" valign="top"><p class="ProdName">Mojito Mix</p>
            <p>The classic Mojito has evolved into an easier, better tasting cocktail with Monin Mojito Mix. We captured the essence of the Latin cocktail born in the sultry bars of Havana in a shelf stable, easy to use format. The traditionally labor-intensive Mojito cocktail is now quick and simple – just add rum and club soda! </p>            <p>For recipes or to place an order, <a href="product_details.php?flavor_ID=36">click here</a>.</p></td>
        </tr>
        
        <tr>
          <td colspan="3"><img src="images/prod_devider03.gif" alt="divider" width="607" height="15" /></td>

        </tr>
      </table>
            <table width="602" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="109" valign="middle"><a href="product_details.php?flavor_ID=20"><img src="images/large/RubyRedGrapefruit1L.jpg" alt="Grapefruit, Ruby Red" width="109" height="120" border="0" /></a></td>
          <td width="15" valign="top" background="images/prod_devider.gif"><img src="images/spacer.gif" alt="divider" width="1" height="1" /></td>
          <td width="483" valign="top"><p class="ProdName">Grapefruit, Ruby Red</p>
            <p><strong>Ruby Red Grapefruit</strong> is an exciting new addition to the portfolio of Monin flavors. The unique and naturally sweet-tart flavor of the Ruby Red grapefruit is now available year round!</p> 

<p>The fresh citrus profile of <strong>Monin Ruby Red Grapefruit</strong> answers the flavor preference of today's consumer, and adds great color and flavor to martini and margaritas, sodas, lemonades, smoothies and slushies.</p>            <p>For recipes or to place an order, <a href="product_details.php?flavor_ID=20">click here</a>.</p></td>
        </tr>
        
        <tr>
          <td colspan="3"><img src="images/prod_devider03.gif" alt="divider" width="607" height="15" /></td>
        </tr>

      </table>
            <table width="602" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="109" valign="middle"><a href="product_details.php?flavor_ID=34"><img src="images/large/MapleSpice1L.jpg" alt="Maple Spice" width="109" height="120" border="0" /></a></td>
          <td width="15" valign="top" background="images/prod_devider.gif"><img src="images/spacer.gif" alt="divider" width="1" height="1" /></td>
          <td width="483" valign="top"><p class="ProdName">Maple Spice</p>
            <p>Monin introduces <b>Maple Spice</b> - a distinctive new flavoring which exudes the rich traditional taste of maple syrup but is designed to blend with hot and cold beverages.  A subtle hint of spice provides a delightful flavor twist.</p>            <p>For recipes or to place an order, <a href="product_details.php?flavor_ID=34">click here</a>.</p></td>

        </tr>
        
        <tr>
          <td colspan="3"><img src="images/prod_devider03.gif" alt="divider" width="607" height="15" /></td>
        </tr>
      </table>
      <p>On-premise operators: Please contact your <a href="../us/en/zipsearch.php">Monin representative</a> for distributor information.</p>
    <p>International Customers should refer to their local Importer/Distributor in <a href="../us/en/dist.php">Monin's International Listing</a>.</p>

  </div>
  <div id="footer">
    <ul>
      <li class="first"><a href="index.php">Home</a></li>
      <li><a href="products.php">Product Categories</a></li>
      <li><a href="http://160113.brightwebsite.com/store/shopcart/">Shopping Cart</a></li>
      <li><a href="faqs.php">F.A.Q.</a></li>

      <li><a href="contact.php">Contact</a></li>
    </ul>
  <p>© 2007 Monin Gourmet Flavorings. All rights reserved.</p></div></div>
</body>
</html>

 

Here's my CSS:

html, body {
font: 95% Arial, Helvetica, sans-serif;
color: #666666;
margin: 0px;
padding: 0px;
height: 100%;
background-color: #CCCCCC;
background-image: url(../images/pattern.jpg);
background-repeat: repeat-x;
}
h1, h2, h3, h4 {
color: #FF9933;
}
h1 {
font-size: 125%;
}
h2 {
font-size: 110%;
}
h3 {
font-size:100%;
}
a:link {
color: #333;
text-decoration: underline;
}
a:visited {
color:#666666;
text-decoration: underline;
}
a:hover, a:focus {
color:#FF9933;
text-decoration:none;
}
#wrapper {
margin: 0px auto;
padding: 0px;
width: 800px;
background-color: #FFFFFF;
background-image: url(../images/main_gradient.jpg);
background-repeat: repeat-y;
}
#header {
margin: 0;
padding: 0;
background: #CCCCCC url(../images/header_back.jpg);
height: 100px;
width: 800px;
}
#header ul li.first {
margin-left: 0;
border-left: none;
list-style: none;
display: inline;
}
#header ul {
color:#FFFFFF;
margin: 0;
padding:0;
text-align: right;
}
#header ul li {
display:inline;
margin:0;
padding:0 5px;
font-weight: bold;
font-size: 95%;
list-style: url(none);
border-left: 1px solid #FF9933;
}
#header ul li a{
text-decoration:none;
color: #666666;
padding: 0 10px;
margin: 0;
}
#header ul li a:hover, #nav ul li a:focus {
color:#FF9933;
background-color: #EBEBEC;
}
#header img {
padding: 0;
margin: 5px  0 0 10px;
}
.imgRight {
float: right;
margin: 0;
clear: right;
padding: 0 0 5px 5px;
}
.imgLeft {
float: left;
clear: right;
margin: 0;
padding: 0 5px 5px 0;
}
#leftcol {
float: left;
margin-left: 4px;
padding: 0;
width: 175px;
background: #EBEBEB url(../images/gradient.jpg) repeat-y;
}
#leftcol ul {
background-color: #FFFFFF;
list-style-type: none;
margin: 0; 
padding: 0;
font-size: 80%;
} 
#leftcolul li {
padding: 0;
margin: 0; 
}

#leftcol ul li a{
background-color: #FFFFFF;
color: #666666;
display: block;
padding: 4px 0 6px 4px;
text-decoration: none;
background-image: url(../images/gradient.jpg);
background-repeat: repeat-y;
height: 1%;
}
#leftcol a:hover, #leftcol a:focus {
color: #FF9933;
background: url(../images/gradient_over.jpg) repeat-y;
}
#main {
margin: 0px 0px 0px 179px;
padding: 5px;
background-color: #FFFFFF;
width: 611px;
clear: right;
}
#footer {
background-color:#FF9933;
margin:0;
padding:25px 5px 0 5px;
background-image: url(../images/footer_gradient.jpg);
background-repeat: repeat-x;
height: 100%;
clear: both;
}
#footer ul li.first {
margin-left: 0;
border-left: none;
list-style: none;
display: inline;
}
#footer ul {
color:#FFFFFF;
margin: 0;
padding:0;
text-align: center;
}
#footer ul li {
display:inline;
margin:0;
padding:0;
font-weight: bold;
font-size: 85%;
border-left: 1px solid #7B6037;
}
#footer ul li a{
text-decoration:none;
color: #FFFFFF;
padding: 0 10px;
}
#footer ul li a:hover, #nav ul li a:focus {
color:#FF9933;
}
#footer p {
font-size: 85%;
color:#FFF;
text-align: center;
}
#ProdSuggestions {
background-color: #EBEBEC;
margin: 0;
padding: 5px;
border: 1px dotted #999999;
}
#CatHeader01 {
background-color:#EBEBEC;
border-bottom: 1px solid #999999;
padding-top: 3px;
padding-bottom: 3px;
}
.bannerImg {
float: left;
clear:both;
}
/* Begin Drop Menu CSS */
#dropmenudiv{
position:absolute;
line-height:18px;
z-index:100;
border-top: 1px solid #DE7F08;
border-right: 1px solid #DE7F08;
border-bottom: 0 solid #DE7F08;
border-left: 1px solid #DE7F08;
}

#dropmenudiv a{
width: 100.01%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #DE7F08;
padding: 1px 0;
font-weight: bold;
color: #FFFFFF;
font-size: 90%;
text-decoration: none;
}
#dropmenudiv a:hover{ /*hover background color*/
background-color: #EBEBEC;
color: #FF9933;
}
/*End Drop Menu CSS */
.ProdDetails {
font-size: 85%;
color: #666666;
}
.ProdStockNumb {
font-size: 80%;
color: #999999;
}
.ProdName {
font-size: 125%;
font-weight: bold;
color: #FF9933;
}
.Price {
color:#FF0000;
font-size: 90%;
}
a.customLink1:link, a.customLink1:visited {
color: #FF9933;
text-decoration: underline;
font-weight: bold;
}
a.customLink1:hover, a.customLink1:focus {
color:#999999;
text-decoration:none;
font-weight: bold;
}
.redText {
color: #FF0000;
}
.navImg {
margin: 0;
padding: 0;
}

Link to comment
Share on other sites
TronB24 Newbie

TronB24

Posted
  • Author
Posted

The weird thing about my issue is that IE 6 was making the left column bigger than the other browsers. But only if it contained any content. If I understood the Box Model Hack correctly, it says that IE 5 in particular makes things a smaller than you would expect. If could be wrong since I'm having a hard time understanding the hack.

 

 

What I ended up doing was increasing the left margin of the right column and it seems to be ok now. I have no idea why this works, but it does. Hopefully I haven't cause new problems down the road for myself.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.