homepage Welcome to WebmasterWorld Guest from 54.196.24.103
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
CSS frameless layout and IE6 problem
Mr_Cat




msg:3807983
 5:38 pm on Dec 15, 2008 (gmt 0)

Hi folks,

I've found a nice CSS 'frameless layout' to use for my site, and coppied the code, but have just realised that in IE7 and Firefox it's all fine, but in IE6 there is no scroll bar on the right! It's a problem.

Here is the essential css behind the layout, using divs with absolute positioning for the header and footer, and making the main html and body non scrollable to keep them in place, and just scroll the content div.

html {
background-color: #FFFFFF;/*set the background colour */
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /*color background - only works in IE */
font-size:1em; /*set default font size */
font-family:Gill Sans MT, Verdana, Arial, Helvetica, sans-serif; /* set default font */
/* hide overflow:hidden from IE5/Mac */

overflow:hidden; /*get rid of scroll bars in IE */
background-color: #FFFFFF;/* */
}
body {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
overflow:hidden; /*get rid of scroll bars in IE */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
font-size: 95%;
line-height: 1.3;
}
#content {
display:block; /* set up as a block */
height:100%; /* set height to full page */
max-height:100%;
overflow:auto; /* pad left to avoid navigation div if required */
position:relative;
}
#header {
background:#FFFFFF none repeat scroll 0 0;
display:block;
height:100px;
margin:0;
position:absolute;
right:18px;
top:0;
width:100%;
z-index:5;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6394BD;
}
#footer {
background:#FFFFFF none repeat scroll 0 0;
bottom:-1px;
display:block;
height:51px;
margin:0;
position:absolute;
right:18px;
text-align:center;
width:100%;
z-index:4;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #6394BD;
}

I've tried tweaking the overflow for html and body seperately to see what would happen, and the only way I can get it to appear on IE6 means that in 7 and firefox there are two scrollbars side by side.

Any cunning ideas? I'm just looking into specifying a different style sheet for ie6 (how to) and just ditching the fixed header and footer in it, shame tho! Oh yea, when I can get ie6 to scroll, it just scrolls the header and footer too, the footer appearing as a really rubbish looking block over the main content, given that one has to set the html or body to scroll.

Cheers
Mr Cat

[edited by: Mr_Cat at 6:02 pm (utc) on Dec. 15, 2008]

 

tonynoriega




msg:3808751
 6:31 pm on Dec 16, 2008 (gmt 0)

i dont know if this is considered "not standards compliant" or a "hack"...

i had a similar issue i couldnt resolve, so i created another CSS sheet specifically for IE6 and called it in the <head> tag via:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/iespecific.css" >
<![endif]-->

Mr_Cat




msg:3809103
 12:02 am on Dec 17, 2008 (gmt 0)

Fab, thanks, that's what I'm heading for.

It'll work fine in the end, the css is so basic it can't really be tweaked to work that far cross browser I'm sure, I'm just discovering the philosophy at the last minute of designing your site for all the best browsers, then at the last minute downgrading and making seperate css files for...IE.

Cheers!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved