Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    getting page to have padding/margin/border/something!! under it in ie.

    Well here's my problem. The page I'm working on is supposed to have a fixed header and footer with scrollable content. Everything works great in Firefox but in IE my scrollable content ignores the 60px border it's supposed to have on the bottom. It only works if I put it into quirks mode using <!-- put ie into quirks mode --> The 90px border on the top works either way for some reason though. Unfortunetly if tell IE to go to quirks mode then my drop-down menu doesn't work. What I'm wondering is if there is anyways to get the scrollable content to somehow stop 60px from the bottom without putting it into quirks mode in IE. The pages can be viewed here.
    http://matthewiscool.sitesled.com/index
    http://matthewiscool.sitesled.com/index2
    The first one is with the quirks forced on for IE and the second on is without it foreced on.

    Here's the css.

    Code:
    html {
    	height:100%; 
    	max-height:100%; 
    	padding:0; 
    	margin:0; 
    	border:0; 
    	background:#D1CDC1;
    	font-size:76%; 
    	font-family:georgia, palatino linotype, times new roman, serif;
    	/* hide overflow:hidden from IE5/Mac */ 
    	/* \*/ 
    	overflow: hidden; 
    	/* */ 
    	}
    
    body {
    	height:100%; 
    	max-height:100%; 
    	overflow:hidden; 
    	padding:0; 
    	margin:0; 
    	border:0;
    	background:#D1CDC1;
    	color:#FFFFFF;
    	}
    
    #content {
    	display:block;  
    	overflow:auto;
    	position:absolute; 
    	z-index:3; 
    	top:70px; 
    	bottom:62px; 
    	width:760px; 
    	margin-left:-381px; 
    	left:50%; 
    	border-left:1px solid #FFFFFF;
    	border-right:1px solid #FFFFFF;
    	background:#000000;
    	}
    
    * html #content {
    	top:0; 
    	bottom:0; 
    	height:100%;
    	width:760px;
    	border-left:0px solid #D1CDC1;
    	border-right:0px solid #D1CDC1;
    	border-top:73px solid #D1CDC1; 
    	border-bottom:60px solid #D1CDC1;
    	margin-bottom60px;
    	}
    	
    	#info {
    	display:block;  
    	position:absolute; 
    	z-index:3;   
    	width:728px; 
    	padding-left:15px;
    	}
    
    * html #info {
    	top:0; 
    	height:100%;
    	width:728px;
    	border-left:2px solid #000;
    	border-right:1px solid #000;
    	}
    
    #head {
    	position:absolute; 
    	margin-top:10px;
    	margin-left:-380px; 
    	left:50%; 
    	top:0; 
    	width:760px; 
    	min-width:760px; 
    	height:60px; 
    	background:#fff; 
    	font-size:1em; 
    	z-index:5; 
    	border-top: 0px solid #FFFFFF;
    	border-bottom: 1px solid #FFFFFF;
    	background:#000000;
    	}
    
    * html #head {
    	top:2px; width:760px; height:61px;
    	}
    
    #foot {
    	text-align:center;
    	position:absolute; 
    	margin-left:-381px; 
    	left:50%; 
    	bottom:10px; 
    	width:760px; 
    	min-width:760px; 
    	height:60px; 
    	background:url(heading.jpg); background-position:0 100px;
    	font-size:1em; 
    	z-index:5; 
    	border:1px solid #000;
    	font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
    	font-weight:bold;
    	color:#000;
    	background:#000000;
    	border-top: 1px solid #FFFFFF;
    	border-left: 0px;
    	border-right:0px;
    	}
    
    * html #foot {
    	bottom:10px; width:760px; height:61px;
    	}
     
    /*Start of Curved Code*/
    .curvy {position:relative; width:760px; height:60px; background:#000000; color:#000; margin:5em auto;}
    .curvybottom {position:relative; width:760px; height:40px; background:#D1CDC1; color:#000;}
    #ctl, #ctr, #cbl, #cbr {position:absolute; width:20px; height:20px; color:#000000; background:#D1CDC1;overflow:hidden;}
    #ctl {top:0px; left:0px;}
    #ctr {top:0px; left:740px;}
    #cbl {top:47px; left:0px;}
    #cbr {top:47px; left:740px;}
    #quadtl, #quadtr, #quadbl, #quadbr {position:absolute; font-size:150px; font-family:arial; color:#000000;line-height:40px;}
    #quadtl {left:-8px;}
    #quadtr {left:-25px;}
    #quadbl {left:-7px; top:-28px;}
    *html #quadbl {left:-7px; top:-27px;}
    #quadbr {left:-25px; top:-28px;}
    *html #quadbr {left:-25px; top:-27px;}
    
    /*End of Curved Code */
    
    
    
    /*Start of Menu Code */
    
    .menu {
    position:relative;
    top:36px;
    width:650px;
    height:2em;
    border-top:0px solid #b7c6ac;
    padding-bottom:1px;
    margin-bottom:0em;
    z-index:6;
    }
    
    * html .menu {padding-bottom:0;}
    
    .menu ul{
    list-style-type:none;
    padding-top:0px;
    margin:0 0 0 90px;
    width:620px;
    height:100%;
    }
    
    .menu li{
    float:left;
    }
    
    .menu table{
    position:absolute;
    border-collapse:collapse;
    left:0;
    top:0;
    }
    
    .menu a, .menu :visited {
    color:#fff; /*font color for top links */
    text-decoration:none;
    }
    .menu a em.lft, .menu :visited em.lft {
    display:block;
    float:left;
    width:5px;
    height:2em;
    background: transparent url(drop/lefta.gif);
    border-bottom:1px solid #777;
    }
    .menu a b, .menu :visited b {
    display:block;
    font-weight:normal;
    float:left;
    padding:0 10px;
    height:2em;line-height:1.9em;
    background: transparent url(drop/mida.gif);
    cursor:pointer;
    border-bottom:1px solid #777;
    }
    .menu a em.rgt, .menu :visited em.rgt {
    display:block;
    float:left;
    width:5px;
    height:2em;
    background: transparent url(drop/righta.gif);
    border-bottom:1px solid #777;
    }
    
    .menu ul ul {
    visibility:hidden;
    position:absolute;
    height:2em;
    top:2em;
    left:-70px;
    width:600px;
    border-bottom:1px solid #777;
    border-right:1px solid #777;
    background:#ccc;
    }
    
    
    .menu :hover {
    white-space:normal;
    }
    
    .menu a:hover b {
    color:#000;
    background: transparent url(drop/midb.gif);
    border-bottom-color:#ccc;
    }
    .menu a:hover em.lft {
    background: transparent url(drop/leftb.gif);
    border-bottom-color:#ccc;
    }
    .menu a:hover em.rgt {
    background: transparent url(drop/rightb.gif);
    border-bottom-color:#ccc;
    }
    
    .menu :hover > a b
    {
    color:#000;
    background: transparent url(drop/midb.gif);
    border-bottom-color:#ccc;
    }
    .menu :hover > a em.lft {
    background: transparent url(drop/leftb.gif);
    border-bottom-color:#ccc;
    }
    .menu :hover > a em.rgt {
    background: transparent url(drop/rightb.gif);
    border-bottom-color:#ccc;
    }
    
    .menu ul :hover ul{
    display:block;
    visibility:visible;
    top:2em;
    margin-top:1px;
    }
    
    .menu ul :hover ul li {
    display:block; 
    border-left:1px solid #777; 
    background:#ccc; 
    height:2em;
    }
    .menu ul :hover ul li a {
    display:block; 
    visibility:visible;
    font-size:0.8em; 
    height:2em; 
    line-height:2.5em; 
    width:auto; 
    float:left; 
    color:#444; 
    padding:0 10px;}
    .menu ul :hover ul li a:hover {
    color:#c00;
    }
    /*End of menu code*/


    Thank you very much in advance.
    Matthew
    Last edited by canada4ever; 10-23-2006 at 04:18 PM.


 

Posting Permissions

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