gregw74
03-05-2009, 04:07 PM
First off, if this is a redundant fix or one that's easily resolved... I apologize before hand. If not, please provide any suggestions you might have.
The effect I want is for tables or images that are wider than the content div to extend off to the right. This works as expected in the majority of browsers (FF, Opera, and Safari), except IE of coarse.
In IE 6 and IE 7 the extra-wide table or image will align in the content div just below the bottom edge of the side div. This only happens in IE when the table or image is wider than the content div. View this page in IE and a non-IE browser and you'll see what i mean.
http://robertwalder.net/IE_Woes/Help.htm
Thank you in advance!
Greg
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
}
h1 {
font-size: 1.4em;
padding: 10px 10px 0;
}
p {
padding: 0 10px 10px 10px;
text-wrap:suppress;
}
img {
padding:0;
float:left;
}
html, body {
height: 100%;
}
#header {
height: 30px;
background-color: #Dee;
}
#sidebar {
width:200px;
background-color: #Daa;
float:left;
margin-right:10px;
}
#content {
background-color: #Dcc;
margin-left:210px;
padding-right:10px;
}
#container {
min-height: 100%;
background-color: #DDD;
border-left: 2px solid #666;
border-right: 2px solid #666;
margin: 0 auto;
}
* html #container {
height: 100%;
}
#footer {
background-color: #000;
color: #DDD;
text-align: center;
height: 40px;
padding-top: 10px;
margin: -50px auto 0 auto;
}
#clearfooter {
height: 50px;
}
table {
border-collapse: collapse;
border-style: solid;
border-width: 1px;
border-color:black;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div style="width:1000px; ">
<div id="sidebar">Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed,
asdfpulvinar at, odio. Duis sit amet augue.asdfasdf<br />
<br />
Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed,
asdfpulvinar at, odio. Duis sit amet augue.asdfasdf</div>
<div id="content" style="">
<h1>CSS Fixed Footer</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. </p>
<table style="width: 1000px">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<p>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed,
asdfpulvinar at, odio. Duis sit amet augue.asdfasdf<br/></p>
</div>
</div>
<div id="clearfooter"></div>
</div>
<div id="footer"><p>Footer</p></div>
</body>
</html>
The effect I want is for tables or images that are wider than the content div to extend off to the right. This works as expected in the majority of browsers (FF, Opera, and Safari), except IE of coarse.
In IE 6 and IE 7 the extra-wide table or image will align in the content div just below the bottom edge of the side div. This only happens in IE when the table or image is wider than the content div. View this page in IE and a non-IE browser and you'll see what i mean.
http://robertwalder.net/IE_Woes/Help.htm
Thank you in advance!
Greg
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
}
h1 {
font-size: 1.4em;
padding: 10px 10px 0;
}
p {
padding: 0 10px 10px 10px;
text-wrap:suppress;
}
img {
padding:0;
float:left;
}
html, body {
height: 100%;
}
#header {
height: 30px;
background-color: #Dee;
}
#sidebar {
width:200px;
background-color: #Daa;
float:left;
margin-right:10px;
}
#content {
background-color: #Dcc;
margin-left:210px;
padding-right:10px;
}
#container {
min-height: 100%;
background-color: #DDD;
border-left: 2px solid #666;
border-right: 2px solid #666;
margin: 0 auto;
}
* html #container {
height: 100%;
}
#footer {
background-color: #000;
color: #DDD;
text-align: center;
height: 40px;
padding-top: 10px;
margin: -50px auto 0 auto;
}
#clearfooter {
height: 50px;
}
table {
border-collapse: collapse;
border-style: solid;
border-width: 1px;
border-color:black;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div style="width:1000px; ">
<div id="sidebar">Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed,
asdfpulvinar at, odio. Duis sit amet augue.asdfasdf<br />
<br />
Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed,
asdfpulvinar at, odio. Duis sit amet augue.asdfasdf</div>
<div id="content" style="">
<h1>CSS Fixed Footer</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. </p>
<table style="width: 1000px">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<p>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed,
asdfpulvinar at, odio. Duis sit amet augue.asdfasdf<br/></p>
</div>
</div>
<div id="clearfooter"></div>
</div>
<div id="footer"><p>Footer</p></div>
</body>
</html>