Welcome to WebmasterWorld Guest from 54.234.8.146

Forum Moderators: not2easy

Message Too Old, No Replies

CSS frameless layout and IE6 problem

     

Mr_Cat

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

5+ Year Member



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

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

WebmasterWorld Senior Member 5+ Year Member



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

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

5+ Year Member



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!

 

Featured Threads

Hot Threads This Week

Hot Threads This Month