2 replies [Last post]
dmikester1
Offline
Regular
Last seen: 10 years 15 weeks ago
Timezone: GMT-6
Joined: 2007-05-24
Posts: 36
Points: 19

I am working on a website for our wedding here: http://umwplacement.com/mikeandreg.php

I can't get the center content pane to scroll in IE. Instead the entire page scrolls. I want the header, left navigation bar, and footer to always stay at the same place on the screen. In firefox, it works perfectly.

CSS:
body {
margin:0;
border:0;
padding:0;
height:100%;
max-height:100%;
background:#FFFFFF url('champ_bg.gif') repeat-y;
overflow:hidden;
font-family:arial, verdana, sans-serif;
}

#header {
height:70px;
background-color:#4b0001;
text-align:center;
position:absolute;
top:0;
left:0;
width:100%;
overflow:auto;
}

#navigation {
position:fixed;
float:left;
overflow:hidden;
top:70px;
left:0px;
bottom:40px;
width:178px;
padding:0px;
}
#navigation li {list-style-image:url(images/arrow.png); margin:5px 0px 0px 35px; font-size:20px;}

#center {
position:fixed;
top:70px;
bottom:40px;
left:180px;
right:0px;
padding:5px 0px 0px 5px;
width:auto;
overflow:auto;
color:#4b0001;
}

#center p {
text-indent: 20px;
/*margin-top: 5px;
margin-bottom: 5px; */
}

h2 {
text-align:center;
}

#footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:40px;
background-color:#4b0001;
color:#808080;
overflow:auto;
}

.big {
font-size:25pt;
}

.pictureL {
margin-left:10px;
float:left;
}

.pictureR {
margin-right:10px;
float:right;
}

.clear {
clear:both;
}

.pictureL, .pictureR {
width:400px;
height:320px;
}

img.center {
display: block;
margin-left: auto;
margin-right: auto;
}

#proposal #italic {
font-style:italic;
padding-left:160px;
padding-right:160px;
}

#proposal, #story {
padding-left:150px;
padding-right:150px;
text-align:justify;
}

#party {
font-size:14pt;
line-height:130%;
}

#party .italic {
font-style:italic;
font-size:12pt;
}

.center {
text-align:center;
}

.emphasized {
font-weight:900;
font-size:16pt;
text-decoration:underline;
}

#indent {
margin-left:15px;
font-size:14pt;
display:none;
}

#counter {
position:absolute;
bottom:50px;
left:20px;
color:#4b0001;
}

#leftSpan {
position:fixed;
_position:absolute;
bottom:0px;
left:0px;
height:40px;
width:200px;
padding-left:10px;
line-height: 80%;
}

#rightSpan {
position:fixed;
_position:absolute;
bottom:0px;
right:0px;
height:40px;
width:200px;
text-align:right;
padding-right:10px;
line-height: 80%;
}

#centerSpan {
position:fixed;
_position:absolute;
left:210px;
right:210px;
height:40px;
color:#FFFFFF;
font-size:20px;
line-height:40%;
text-align:center;
}

#right {
float:right;
}

#small {
font-size:10px;
}

.small {
font-size:12px;
}

#red {
color:#CD2626;
padding-left:2px;
}

a:link {text-decoration:none; color: #4b0001;} /* unvisited link */
a:visited {text-decoration:none; color: #4b0001;} /* visited link */
a:hover {text-decoration:underline; color: #330099;} /* mouse over link */
a:active {color: #483D8B;} /* selected link */

#footer a:visited{ color:#808080; }
#footer a:link{ color:#808080; }

/* picture page CSS */

.row {
position:relative;
margin-left:50px;
margin-right:50px;
}
.photogroupL {
float:left;
width:400px;
}

.photogroupR {
float:right;
width:400px;
}

.caption {
clear:left;
font-size:10pt;
text-align:justify;
width:400px;
}
.comment {
clear:left;
}

img {
border-style: none;
}

/* for internet explorer */
/*
* html body {
padding: 70px 0px 40px 0px;
}
*/

HTML:

Welcome to Michael and Regina's website!

Mike's story Mike's
Regina's story Regina's
  • The Proposal
  • RSVP ASAP
  • Directions
  • Wedding Party
  • Pictures
  • Guestbook
  • var sc_project=3394859;
    var sc_invisible=0;
    var sc_partition=37;
    var sc_security="3fa22cb7";
    var sc_text=2;

    website tracker
    hits

    Pictures


    Stuczynskis and me

    This is me taking the Stuczynskis out to eat to ask for Regina's hand in marriage. They said "yes", after laughing at me. :)

    Regina and me

    Regina and I posing outside Chris's nice house


    Regina and I in Spain

    I flew to Toulouse, France to surprise Regina while she was over there studying in Vallodolid, Spain. :)

    Regina and I saying goodbye in Spain

    This was the last time I saw Regina in Spain. We sat at the bus stop and ate a tortilla Espanol. It was one of the saddest times I can remember.

    Stuczynskis and me This is me taking the Stuczynskis out to eat to ask for Regina's hand in marriage. They said "yes", after laughing at me. :) Regina and me Regina and I posing outside Chris's nice house
    Regina and I in Spain I flew to Toulouse, France to surprise Regina while she was over there studying in Vallodolid, Spain. :) Regina and I in Spain I flew to Toulouse, France to surprise Regina while she was over there studying in Vallodolid, Spain. :)
    -->

    Thanks
    Mike

    Tyssen
    Tyssen's picture
    Offline
    Moderator
    Brisbane
    Last seen: 5 years 33 weeks ago
    Brisbane
    Timezone: GMT+10
    Joined: 2004-05-01
    Posts: 8201
    Points: 1386

    That's because IE6 has

    That's because IE6 has patchy support for position: fixed. This looks close to what you're after: http://www.cssplay.co.uk/layouts/body4.html

    How to get help
    Post a link. If you can't post a link, jsFiddle it.
    My blog | My older articles | CSS Reference

    dmikester1
    Offline
    Regular
    Last seen: 10 years 15 weeks ago
    Timezone: GMT-6
    Joined: 2007-05-24
    Posts: 36
    Points: 19

    Thank you for not just

    Thank you for not just giving me a quick and easy answer like I was originally hoping for. I was able to look at the site you gave me and compare mine and learn some things as I worked to fix mine. Had you given me the quick answer I wanted, I know I wouldn't have learned much. It's working now, but there a couple other problems. But I will start a new thread for those.
    Thank you!
    Mike