explorer window resize problem

Discussion in 'CSS' started by k4lsh, Aug 31, 2005.

0
  1. #1
    been trying to fix this for 2 days ... I'm trying to leave behind tables.
    my code has 2 problems:

    - window resizing in explorer - style disappears or so it seems
    - thin white bar below the bottom div - can't get it away

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>blah</title>
<style>
html,body {
	height: 100%;/*height for all browsers*/
}
body {
    margin:0px; padding:0px;
    background-color: #ccc;
    text-align: center;/*IE 5 centering workaround*/
    color: #000000;
    font-family: verdana, tahome, arial;
    background: #ccc url(images/mainback.jpg) repeat-y 50% 0;/*#ccc is for Firefox*/
}
.container {
	margin: 0px auto;
    padding: 0;
    width: 770px;
    height: 100%;
    text-align: left;/*skipping IE 5 centering workaround side effect*/
    margin-left: auto;
    margin-right: auto;
    border:3px solid #ffcc00;
}
#top {
    padding: 0px;
    height: 180px;
    background-color: #47454D;
    color: #FFF;
}
#left {
    float: left;
    width: 600px;
    background-color: #fff;
}
#right {
    float: right;
    width: 170px;
    background-color: #47454D;
}
/*#bottom => something causes resize problems in Explorer*/
#bottom {
	position: absolute;
	padding: 0px;
	float: left;
	bottom: 0px;
	clear: both;
	width: 770px;
    background-color: #47454D;
}


</style>
</head>
<body>
<div class="container">
     <div id="top">
     TITLE
     <br />
     </div>
     <div id="left">
     Main Content
     <br /><br /><br /><br /><br /><br /><br /><br /><br />
     </div>
     <div id="right">
     Navigation
     <br /><br /><br />
     </div>
     <div id="bottom">
     bottom<br />
     </div>
</div>
</body>
</html>
    HTML:
    thx in advance
     
    k4lsh, Aug 31, 2005 IP
  2. mikmik

    mikmik Guest

    Messages:
    356
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Have you tried taking out the 'height:100%'?

    There is what's called a 'redraw' difficulty in IE that has to do with rendering percentage sizes, as I recall.

    I will play with this a little. I hate these types that drive you nuts! Wasting two days on one thing like that won't work, man :O)))
     
    mikmik, Sep 10, 2005 IP
    Colleen and Shoemoney like this.
  3. mahmood

    mahmood Guest

    Messages:
    1,228
    Likes Received:
    43
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Adding to what mikmik suggested, delete "position: absolute;" in bottom as well. it worked for me.

    If you already know the height and width of all divs, specify them. this makes life much easier.
     
    mahmood, Sep 10, 2005 IP