...

View Full Version : getting page to have padding/margin/border/something!! under it in ie.



canada4ever
10-23-2006, 04:41 AM
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/index3)
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.


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum