Jump to content

IE overflow is cut short.

TronB24

By TronB24
in CSS Help

 Share

Recommended Posts

TronB24 Newbie

TronB24

Posted
Posted

I'm having trouble with the content on the page that doesn't fit in the immediate window. The header and footer are fixed. IE seems to not display the entire contents at the bottom of the #contents div in my page.  FF and Safari are rendering this page exactly how I want it. Any suggestion would be greatly appreciated.

 

Here's what I got:

http://monin.com/new/

 

CSS

* html body {
padding:0;
height: 100%;
  } 
body {
margin:0;border:0;
padding:0;
height:100%; 
max-height:100%; 
background:#FFF; 
overflow: hidden; 
}
#header {
  position:fixed; 
  top:0; 
  left:0; 
  width:100%; 
  height:115px; 
  overflow:auto; 
  background:#FFFFFF url(../images/headimg_home.jpg) no-repeat right top;
  color:#fff;
}
#header img {
padding-top: 15px;
padding-left: 10px;
}
#intl {
background: #E8E6C1;
width: 100%;
}
#intl ul li.first {
margin-left: 0;
border-left: none;
list-style: none;
display: inline;
}
#intl ul {
color:#FFFFFF;
margin: 0;
padding:0;
text-align: right;
}
#intl ul li {
display:inline;
margin:0;
padding:0;
font-size: 65%;
list-style: url(none);
}
#intl ul li a{
text-decoration:none;
color: #E8E6C1;
padding: 0 15px;
margin: 0;
background-color: #B5B380;
}
#intl ul li a:hover, #intl ul li a:focus {
background-color: #E8E6C1;
color: #B5B380;
}

#headerNav {
background-color: #F78A22;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #F78A22;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #B5B380;
position: fixed;
left: 0px;
top: 115px;
width: 100%;
}

#headerNav ul
{
color: white;
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;
font-size: 85%;
}

#headerNav ul li
{
display: inline;
margin-left: -4px;
background-color: #F78A22;
}

#headerNav ul li a
{
padding: 5px 10px 5px 10px;
color: #FFFFFF;
text-decoration: none;
background: #FF9933;
}

#headerNav ul li a:hover
{
color: #000000;
background: #CC9900 url(../images/button_over_gradient.jpg) repeat-x;
}
#footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:30px;
overflow:auto;
text-align:center;
background:#F78A22;
color: #FFFFFF;
}
* html #footer {
height: 30px;
}
#footer ul li.first {
margin-left: 0;
border-left: none;
list-style: none;
display: inline;
}
#footer ul {
color:#B5B380;
margin: 0;
padding:10px 0;
text-align: left;
}
#footer ul li {
display:inline;
margin:0;
padding:0;
font-size: 75%;
}
#footer ul li a{
text-decoration:underline;
color: #B5B380;
padding: 5px;
}
#footer ul li a:hover, #footer ul li a:focus {
color:#FF3366;
text-decoration: underline;
}
#contents {
position:fixed;
top:146px;
left:0;
right:0;
bottom:30px;
overflow:auto;
background:#fff url(../images/content-gradient.jpg) repeat-x top;
margin:0;
padding:0;
}
* html #contents {
height:100%;
width:100%; 
}
#right img {
padding-left: 10px;
float: right;
}
#right {
width: 100%;
margin-left: 180px;
background: url(../images/page_fold.jpg) no-repeat left 40px;
padding-left: 50px;
padding-top: 40px;
min-width: 620px;
max-width: 800px;
}
#right ul {
font-size: 80%;
}
#right ul li {
line-height: 1.5em;
margin-right: 15px;
}
#left {
width: 160px;
top: 130px;
float: left;
margin-left: 5px;
margin-top: 40px;
}
#left img {
padding: 5px 7px;
}
#left ul
{
margin-left: 0;
padding-left: 10px;
list-style-type: none;
font-size: 75%;
}

#left ul li a
{
display: block;
padding: 3px;
width: 125px;
border-bottom: 1px solid #eee;
}

#left ul li a:link, #left ul li a:visited
{
color: #999999;
text-decoration: none;
}

#left ul li a:hover
{
background-color: #EBEBEC;
color: #B5B380;
}
#left h3 {
color: #F78A22;
background: #E8E6C1;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #B5B380;
border-bottom-color: #B5B380;
font-weight: normal;
margin-top: 5px;
margin-bottom: 5px;
}
#left dl, #left dt, #left dd {
margin: 0;
padding: 0;
list-style-type: none;
}
#left dl {
width: 10em;
}
#left dt {
cursor: pointer;
text-align: left;
margin: 5px 1px 5px 5px;
font-size: 85%;
color: #F78A22;
}
#left dt a:link, #left dt a:visited {
text-decoration: none;
color: #F78A22;
}
#left dd {
display: none;
}
/* Begin Drop Menu CSS */
#dropmenudiv{
position:absolute;
border-bottom-width: 1px;
line-height:18px;
z-index:100;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #B5B380;
border-right-color: #B5B380;
border-bottom-color: #B5B380;
border-left-color: #B5B380;
}

#dropmenudiv a{
width: 100.01%;
display: block;
text-indent: 3px;
padding: 1px 0;
color: #000000;
font-size: 80%;
text-decoration: none;
}
#dropmenudiv a:hover{ /*hover background color*/
background-color: #B5B380;
color: #FFFFFF;
}
/*End Drop Menu CSS */

 

HTML

<!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 Gourmet Flavorings</title>
<link href="css/fixed.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
<!--
@import url("css/real_screen.css");
-->
</style><script language="JavaScript" type="text/javascript" src="js/topmenu.js"></script><script language="JavaScript" type="text/javascript" src="js/sidemenu.js"></script>
<!--[if gte IE 5]>

<style type="text/css">

#right {
	width: expression(document.body.clientWidth < 620? "620px" : document.body.clientWidth > 800? "800px" : "auto");
; 

}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<div id="intl">
<ul>
      <li><a href="#">Americas</a></li>
      <li><a href="#">France</a></li>
      <li><a href="#">International</a></li>
    </ul></div>
<a href="index.php"><img src="images/monin-logo.gif" alt="monin logo" width="180" height="70" border="0" /></a> </div>

<div id="headerNav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu1, '150px')" onmouseout="delayhidemenu()">Company Information</a></li>
    <li><a href="#" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu2, '150px')" onmouseout="delayhidemenu()">What's New</a></li>
    <li><a href="#" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu3, '150px')" onmouseout="delayhidemenu()">Products</a></li>
    <li><a href="#" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu4, '150px')" onmouseout="delayhidemenu()">Recipes</a></li>
    <li><a href="#" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu5, '150px')" onmouseout="delayhidemenu()">Contact</a></li>
    <li><a href="#" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu6, '150px')" onmouseout="delayhidemenu()">Shop Monin</a></li>
    <li><a href="#">FAQs</a></li>
  </ul>
</div>
  <div id="contents">
  <div id="left">
    <h3>search MONIN</h3>
    <form id="form1" name="form1" method="post" action="">
      <input name="textfield" type="text" size="15" />
      <input type="image" src="images/icon_search.gif" name="Submit" value="submit" />
      <br />
      <input name="search" type="radio" value="recipes" checked="checked" />
      <span class="searchTxt">Recipes</span>
      <input name="search" type="radio" value="product" />
      <span class="searchTxt">Products</span>
    </form>
    <h3>links</h3>
    <dl>
      <dt onmouseover="javascript:show();"><a href="index.php" title="Return to home">Home</a></dt>
    </dl>
    <dl>
      <dt onclick="javascript:show('smenu1');">Company Information</dt>
      <dd id="smenu1">
        <ul>
          <li><a href="#">Message from Olivier</a></li>
          <li><a href="#">Message from Bill</a></li>
          <li><a href="#">History</a></li>
          <li><a href="#">Mission & Values</a></li>
          <li><a href="#">Awards</a></li>
          <li><a href="#">Press Release</a></li>
          <li><a href="#">Tradeshow Schedule</a></li>
          <li><a href="#">Affiliations</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onclick="javascript:show('smenu2');">What's New</dt>
      <dd id="smenu2">
        <ul>
          <li><a href="#">New Products</a></li>
          <li><a href="#">New Promotions</a></li>
          <li><a href="#">Sign up to Receive</a></li>
          <li><a href="#">Tradeshow Schedule</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onclick="javascript:show('smenu3');">Products</dt>
      <dd id="smenu3">
        <ul>
          <li><a href="#">New Products</a></li>
          <li><a href="#">Complete Product List</a></li>
          <li><a href="#">Classic  Flavors</a></li>
          <li><a href="#">Organic Flavors</a></li>
          <li><a href="#">Sweeteners</a></li>
          <li><a href="#">O'free</a></li>
          <li><a href="#">Tea Concentrates</a></li>
          <li><a href="#">Coffee Concentrates</a></li>
          <li><a href="#">Sauce</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onclick="javascript:show('smenu4');">Recipes</dt>
      <dd id="smenu4">
        <ul>
          <li><a href="#">Top Five Recipes</a></li>
          <li><a href="#">Advance Recipe Search</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onclick="javascript:show('smenu5');">Contact</dt>
      <dd id="smenu5">
        <ul>
          <li><a href="#">Contact Monin</a></li>
          <li><a href="#">Find your Sales Rep</a></li>
          <li><a href="#">Locate a Distributor</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onclick="javascript:show('smenu6');">Shop Monin</dt>
      <dd id="smenu6">
        <ul>
          <li><a href="#">Monin Retail Store</a></li>
          <li><a href="#">Monin Case Store for  Foodservice Professionals</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onmouseover="javascript:show();"><a href="#" title="Frequently Asked Questions">FAQs</a></dt>
    </dl
    >
  </div>
  <div id="right">
    <h1>True Brewed™ Espresso Concentrate</h1>
    <img src="images/btl_TrueBrewed.jpg" alt="True Brewed Bottle" width="95" height="440" />
    <p>True Gourmet Espresso, No Expensive Equipment<br />
    <em>Iced Coffee Has Never Been Easier</em></p>
    <p>Iced coffee and espresso are increasingly popular, year-round. Monin True Brewed Espresso Concentrate gives foodservice operators the ability to get in on the trend and offer delicious espresso based beverages, without investing in expensive equipment. Ideal for iced coffees, frozen lattes, mochas, and cocktails!</p>
    <p><em>Monin True Brewed™ Espresso Concentrate Contains NO Sugar.</em></p>
    <h2>Benefits</h2>
    <ul>
      <li>No machine investment</li>
      <li>Quick and consistent </li>
      <li>No mess, no cleanup</li>
      <li>No need to brew coffee or espresso and chill it down</li>
    </ul>
    <h2>Product Information</h2>
    <ul>
      <li>Extracted from premium espresso coffee beans</li>
      <li>All the flavor of authentic gourmet espresso </li>
      <li>No sugar added</li>
      <li>Highly concentrated at an 8 to 1 ratio</li>
    </ul>
    <h3>featured recipes </h3>
    <p class="emphasis"><strong>Iced True Brewed™ Espresso Drinks</strong></p>
    <blockquote>
      <p><a href="#">Iced Coffees</a><br />
      <a href="#">Mochas & Lattes</a></p>
    </blockquote>
    <p class="emphasis"><strong>True Brewed™ Espresso Cocktails</strong></p>
    <blockquote>
      <p><a href="#">Cocktails</a><br />
      <a href="#">Martinis</a></p>
      <h1>True Brewed™ Espresso Concentrate</h1>
      <img src="images/btl_TrueBrewed.jpg" alt="True Brewed Bottle" width="95" height="440" />
      <p>True Gourmet Espresso, No Expensive Equipment<br />
          <em>Iced Coffee Has Never Been Easier</em></p>
      <p>Iced coffee and espresso are increasingly popular, year-round. Monin True Brewed Espresso Concentrate gives foodservice operators the ability to get in on the trend and offer delicious espresso based beverages, without investing in expensive equipment. Ideal for iced coffees, frozen lattes, mochas, and cocktails!</p>
      <p><em>Monin True Brewed™ Espresso Concentrate Contains NO Sugar.</em></p>
      <h2>Benefits</h2>
      <ul>
        <li>No machine investment</li>
        <li>Quick and consistent </li>
        <li>No mess, no cleanup</li>
        <li>No need to brew coffee or espresso and chill it down</li>
      </ul>
      <h2>Product Information</h2>
      <ul>
        <li>Extracted from premium espresso coffee beans</li>
        <li>All the flavor of authentic gourmet espresso </li>
        <li>No sugar added</li>
        <li>Highly concentrated at an 8 to 1 ratio</li>
      </ul>
      <h3>featured recipes </h3>
      <p class="emphasis"><strong>Iced True Brewed™ Espresso Drinks</strong></p>
      <blockquote>
        <p><a href="#">Iced Coffees</a><br />
          <a href="#">Mochas & Lattes</a></p>
      </blockquote>
      <p class="emphasis"><strong>True Brewed™ Espresso Cocktails</strong></p>
      <blockquote>
        <p><a href="#">Cocktails</a><br />
          <a href="#">Martini</a></p>
      </blockquote>
      <p>Iced coffee and espresso are increasingly popular, year-round. Monin True Brewed Espresso Concentrate gives foodservice operators the ability to get in on the trend and offer delicious espresso based beverages, without investing in expensive equipment. Ideal for iced coffees, frozen lattes, mochas, and cocktails!</p>
      <p><em>Monin True Brewed™ Espresso Concentrate Contains NO Sugar.</em></p>
    </blockquote>
  </div>
</div>
<div id="footer">
  <p>Toll Free<strong> 1-800-966-5225 </strong>| email monin-usa@monin.com | <span class="copyright"> ©
    <?php 
$startyear = 2007;
$thisyear = date('Y');
	if ($startyear == $thisyear) {
		echo "$startyear";
	} else {
		echo "$startyear - $thisyear";
	} 
?>
  Monin Gourmet Flavorings</span></p>
</div>
</body>
</html>

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.