Go Back   SitePoint Forums > Forum Index > Design Your Site > Web Page Design > CSS
Reload this Page overflow problem with IE
Newsletter FAQ Members List Calendar Mark Forums Read

New to SitePoint Forums? Register here for free!

SitePoint Sponsor
 
Reply
 
Thread Tools Display Modes
Old May 6, 2005, 09:58   #1
FutureyeDesigns
SitePoint Member
 
Join Date: May 2005
Posts: 1
overflow problem with IE
Hello,

I'm working on the layout for my website and it works very nice in FF but it doesn't work right in IE.

The problems:

1. The main content box it's sopose to have a scroll bar if the content overflows. Look at it in FF, see how it's meant to look and then see the problem with IE.

2. The left column (that holds the links) has a background color but it's not showing it with the right color.

If you help me, you save me!!

HERE IS THE CODE:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> Layout </title>
<style type="text/css">

<!--
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:rgb(209,205,193);
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:rgb(209,205,193);
}

#bodyblock {
display:block;
position:absolute;
/*z-index:10;*/
top:150px;
bottom:51px;
width:640px;
margin-left:-321px;
left:50%;
border-left:1px solid #000;
border-right:1px solid #000;
background:#fff;
}

* html #bodyblock {
top:148;
height:100%;
bottom:51px;
width:642px;
/*border-top:154px solid #fff;
border-bottom:50px solid #fff;*/
}

#content {
display:block;
overflow:auto;
position:absolute;
/* z-index:3; */
top:0px;
bottom:0px;
width:520px;
margin-left:120px;
/*left:50%;*/
border-left:1px solid #000;
background-color:yellow;
}

l-col{
float:right;
/*display:block;
position:relative;
z-index:10;*/
/*top:150px;
bottom:52px; */
width:180px;
/*margin-left:-161px;
left:50%; */
border-left:1px solid #000;
background-color:#99CCFF;
display:block;
}

#head {
position:absolute;
margin-left:-321px;
left:50%;
top:0;
width:640px;
min-width:640px;
height:150px;
background-color:blue;
font-size:1em;
z-index:5;
border:1px solid #000;
border-top-width:0px;
}

* html #head {
top:0px; width:642px; height:148px;
}

#foot {
text-align:center;
position:absolute;
margin-left:-321px;
left:50%;
bottom:0;
width:640px;
min-width:640px;
height:50px;
background-color: transparent;
font-size:1em;
z-index:5;
border:1px solid #000;
border-bottom:0px;
font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
font-weight:bold;
color:#000;
}

* html #foot {
bottom:0px; width:642px; height:48px;
}
-->
</style>
</head>


<body>
<div id="head">

</div>

<div id="foot">&copy; 2005 Futureye Designs ~ All rights reserved.</div>


<div id="bodyblock">
<div id="l-col">
link<br />
link<br />
link<br />
link<br />
link<br />
link<br />
link<br />
</div> <!--end l-col-->
<div id="content">

<p>A layout with a fixed width, a fixed header and a fixed footer that stays on the bottom. The content area fits between the header and footer and scrolls if necessary. Plus the bonus of a CSS navigation menu that works in all browsers.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
little boxes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

little boxes Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

© 2005 Futureye Designs</p>
<p>NN7 displays correctly but an absolutely positioned div in the content area stays 'fixed' as the content scrolls.</p>
<img class="left" src="box.jpg" title="little boxes" alt="little boxes" />
<p>&nbsp;
</p>
</div>
</div>


</body>
</html>
FutureyeDesigns is offline   Reply With Quote
Reply

Bookmarks

« Previous Thread | Next Thread »

Thread Tools
Display Modes
Linear Mode Linear Mode

 
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Sponsored Links
 
Forum Jump


All times are GMT -7. The time now is 19:55.


Powered by vBulletin® Version 3.7.1
Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.
Copyright 1998-2009, SitePoint Pty Ltd. All Rights Reserved