29 replies [Last post]
faz9
Offline
Regular
Last seen: 12 years 41 weeks ago
Joined: 2007-03-07
Posts: 14
Points: 0

Ok, so this is my first site I've made since leaving the comfortable world of tables that I was living in.

What I want is a 116px tall 100% width header

Under that I want a background that has a fade background on it. This image will be placed just under the header and will fade into a colour then the background colour of this section will match the bottom of the faded image, you see? This will make up the rest of the page (the part left over from the header).

Then in the middle of this faded background there will be a section that's about 60% wide. This should also fill the rest of the height of the page.

However the problem I'm having is the fact the parts that are meant to fill the rest of the page end up being a lot bigger (116 pixels I guess? as its set too 100% height and it sees 100% as the page height and adds that onto the 116 pixels that I've already used on the page, as opposed to the left over space).

So, yeah, here's my code.

html {
	height: 100%;
	}
body {
	margin:0;
	padding:0;
	height: 100%;	
	width:100%;
	background-color: #99CC66;
}
A:link {text-decoration: underline; color:#FFFFFF;}
A:visited {text-decoration: none}
A:active {text-decoration: none; color:#E8E3C6}
A:hover {text-decoration: none;}	

#wrap {
	height:100%;
	width: 100%;
	position: inherit;
}
#header {
	width: 100%;
	background-color: #706a60;
	height: 108px;
	text-align: left;
	border-bottom-width: 8px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
}
#inner-wrap {
	height: 100%;
	width: 100%;
	background-color: #a09788;
	position:inherit;
}


#content {
	height: 100%;
	width: 65%;
	border-right-width: 2px;
	border-left-width: 2px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FFFFFF;
	border-left-color: #FFFFFF;
	background-color: #9933FF;
	margin-right: auto;
	margin-left: auto;
}

Untitled Document

Content for id "content" Goes Here

There might be a lot of stupid mistakes in this css as I really have tried everything, taking apart other sites code etc

Thanks for any help.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 35 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

I think you used the wrong

I think you used the wrong code tags as we're not seeing any html,
but a couple of comments:

width: 100% is rarely needed and will often cause problems if used without full understanding of the box model. A div, or any block level element for that matter, will take up all available width by default.

learn to use shorthand css. It's easier to code, and easier to read. For instance

border-bottom-width: 8px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;

could be:
    border-bottom: 8px solid #FFF;

ClevaTreva has just written an article on 100% height and posted here.

You may not need all that 100% stuff to accomplish what you want. Can you post a pic?

faz9
Offline
Regular
Last seen: 12 years 41 weeks ago
Joined: 2007-03-07
Posts: 14
Points: 0

wolfcry911 wrote:I think you

wolfcry911 wrote:
I think you used the wrong code tags as we're not seeing any html,
but a couple of comments:

Yeah, I have no idea what happened there. I went in to edit to check it and I cant see anything wrong with it

wolfcry911 wrote:

learn to use shorthand css. It's easier to code, and easier to read. For instance
border-bottom-width: 8px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;

could be:
    border-bottom: 8px solid #FFF;

Ok, cool. I was reading about this earlier. The reason it was like that was because thats what dreamweaver put out. I would be coding in notepad like I usually do, but seeing as divs were new to me I thought I would go back to wysiwyg for a bit.

wolfcry911 wrote:

ClevaTreva has just written an article on 100% height and posted here.

You may not need all that 100% stuff to accomplish what you want.

That's awesome. I have been looking for something like that for a while, kinda lucky it just got posted tonight. Goes into a lot of detail.

Also, that article has pretty much solved my problem. I had resorted to using clear divs to push other divs around to get them from behind the header earlier but thought this was cheating and presumed there would be a better way to do it so I took it out. Guess I was wrong Smile

Thanks, anyway

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 32 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Use the <code></code> tags

Use the <code></code> tags instead, the BB code tags have problems with HTML.

Verschwindende wrote:
  • CSS doesn't make pies

faz9
Offline
Regular
Last seen: 12 years 41 weeks ago
Joined: 2007-03-07
Posts: 14
Points: 0

thepineapplehead wrote:Use

thepineapplehead wrote:
Use the <code></code> tags instead, the BB code tags have problems with HTML.

Yeah that's what I thought I did...Guess not.

The same way I did the css.

faz9
Offline
Regular
Last seen: 12 years 41 weeks ago
Joined: 2007-03-07
Posts: 14
Points: 0

ok, I'm back. I've really

ok, I'm back.

I've really tried using that 100% guide but I've had a lot of trouble adapting it to what I need (I didnt think I would)

Here is the mock layout I drew up before I started.

It consists of a header with a menu in it. Below that is 1 column, about 60% width of the page. To left and write of this column is a background image which fades from top to bottom.

The problem I'm having is having it fill the page, instead of filling way to much of the page and forcing me to scroll up and down. Can anyone help? :\

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 10 hours ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi In order for the design

Hi

In order for the design in the article I wrote to fill the page width, some changes are needed.

This is the basic idea (no column side graphics):

html:

Your Page Title Here
@import url("style-no-border.css");

@import url("ie7style-no-border.css");

This is the
Main Content

This is the Left Sidebar

css:

/*** Style for 3 Column Full Width Full Height Template ***/ html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0; padding:0; border:0; border-collapse:separate; border-spacing:0; } html,body{height:100%} body{ font-family: verdana, arial, helvetica, sans-serif; font-size:100.1%; /*** Don't change this setting. Make all other font-sizes in % (preferred) or ems ***/ color:#000000; background:#F2F6F9; /*** Background colour of page ***/ min-width:770px; /*** Minimum Content Width ***/ } input,select{ margin:0; padding:0; } strong,b{ font-weight:bold; } p{ font-size:90%; line-height:1.1em; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */ #fullheightcontainer{ position:relative; width:100%; /*** Content Width ***/ display:table; height:100%; margin-bottom:-50px; /*** NEGATIVE TOTAL Height of Footer Rows ***/ background:#FFCCCC; /*** Background colour of left AND right columns ***/ } #wrapper{ display:table-cell; position:relative; } #outer{ position:relative; margin-left:150px; /*** Left Column Width ***/ margin-right:150px; background:#ADD8E6; /*** Background colour of center column. ***/ height:100%; } #float-wrap{ width:100%; float:left; display:inline; } #left{ float:left; display:inline; width:150px; /*** Left Column Width ***/ margin-left:-150px; /*** NEGATIVE Left Column Width ***/ position:relative; } #right{ float:left; display:inline; width:150px; /*** Right Column Width ***/ margin-right:-150px; /*** NEGATIVE Right Column Width ***/ position:relative; } #center{ position:relative; /* fix for IE */ width:100%; float:right; height:100%; display:table; } #clearheadercenter{ height:90px; /*** TOTAL Height of Header Rows ***/ overflow:hidden; } #clearheaderleft{ height:90px; /*** TOTAL Height of Header Rows ***/ overflow:hidden; } #clearheaderright{ height:90px; /*** TOTAL Height of Header Rows ***/ overflow:hidden; } #clearfootercenter{ height:50px; /*** TOTAL Height of Footer Rows ***/ overflow:hidden; } #clearfooterleft{ height:50px; /*** TOTAL Height of Footer Rows ***/ overflow:hidden; } #clearfooterright{ height:50px; /*** TOTAL Height of Footer Rows ***/ overflow:hidden; } #footer{ z-index:1; position:relative; width:100%; height:0px; } #subfooter1{ margin:0px; background:#FFFFCC; text-align:center; height:50px; overflow:hidden; } #header{ z-index:1; position:absolute; top:0px; left:0px; width:100%; height:0px; } #header-inner{ min-width:770px; /*** Minimum Content Width ***/ height:0px; } #subheader1{ margin:0px; background:#FFFFCC; text-align:center; height:65px; overflow:hidden; } #subheader2{ margin:0px; background:#FFE7AA; text-align:center; height:25px; overflow:hidden; } #container-left{} #container-right{} #container-center{} #centerfill,#leftfill,#rightfill{display:none}

ie7 css fix:

/*** Extra Style for IE7 3 Column Full Width 100% Height Template ***/ #fullheightcontainer{height:auto;min-height:100%} #centerfill,#leftfill,#rightfill{ display:block; position:absolute; top:0px; width:100%; min-height:100%; background:#ADD8E6; } #leftfill{ width:150px; background:#FFCCCC; } #rightfill{ left:100%; margin-left:-150px; width:150px; background:#FFCCCC; }

Hope this helps

faz9
Offline
Regular
Last seen: 12 years 41 weeks ago
Joined: 2007-03-07
Posts: 14
Points: 0

ClevaTreva wrote: Hope this

ClevaTreva wrote:

Hope this helps

Indeed it did. Infact, its really awesome. Thanks.

It took some reworking but I, currently, have it set up the way I wanted. Thanks, ClevaTreva, for making my transition to div's less sucky than it could of been.

I'm sure I'll be back...and I mean that in a good way towards the site, not a bad way towards my skills.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 10 hours ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Post a link to let us know

Post a link to let us know how it's going Wink

faz9
Offline
Regular
Last seen: 12 years 41 weeks ago
Joined: 2007-03-07
Posts: 14
Points: 0

Ok, so I've finally started

Ok, so I've finally started work on this site again and everything was going fine until I fired up ie7.

My centre colom doesn't fill the whole page in ie7, like it does in other software. If I remove the special ie7 code you gave me then it works fine, how ever if I have a page where the content forces the page to scroll then I just have more issues.

I'm assuming I need to add "container-center" to the ie7 special code but I just don't know what attributes I have to give it. It works fine in ie 6 and firefox.

Link to page (ignore the other pages)

(I've left the ie7 special code in the source code for now just as I found it easier to edit, I plan on moving it to its own css file after)

HTML

ifportfolio :: home

/*** Extra Style for IE7 3 Column Full Width 100% Height Template ***/
#fullheightcontainer{height:auto;min-height:100%}
#centerfill,#leftfill,#rightfill,{
display:block;
position:absolute;
top:0px;
width:100%;
min-height:100%;
}
#leftfill{
width:17.5%;
}
#rightfill{
left:100%;
margin-left:-17.5%;
width:17.5%;
}
#container-center{
min-height:100%;
}


/*\*//*/
#tabs2 ul li a {
display: inline-block;
white-space: nowrap;
width: 1px;
}

#tab2 ul {
padding-bottom: 0;
margin-bottom: -1px;
}
/**/

html #tabs2 ul li a {
padding: 0;
}











 
News

 


 



Well hello and welcome


 


28 August 2007


 


Welcome to my portfolio. I hope to have this as a place to bring together all my "work" as well as works in progress. Stick around and feel free to come back when ever you like.






















Css

/*** Style for 3 Column Full Width Full Height Template ***/ html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0; padding:0; border:0; border-collapse:separate; border-spacing:0; } html,body{height:100%} body{ font-family: verdana, arial, helvetica, sans-serif; font-size:100.1%; /*** Don't change this setting. Make all other font-sizes in % (preferred) or ems ***/ color:#000000; /*** Background colour of page ***/ min-width:770px; /*** Minimum Content Width ***/ background-color: #a09787; } input,select{ margin:0; padding:0; } strong,b{ font-weight:bold; } A:link {text-decoration: underline; color:#FFFFFF;} A:visited {text-decoration: underline; color:#FFFFFF;} A:active {text-decoration: none; color:#E8E3C6} A:hover {text-decoration: none; color:#FFFFFF;} p{ font-size:75%; line-height:1.1em; color: #FFFFFF; font-family: Tahoma, sans-serif, Arial; } h1 { font: 130% Tahoma, sans-serif, Arial; color: #ffffff; line-height:1.1em; color: #FFFFFF; } h2 { font: 100% Tahoma, sans-serif, Arial; color: #99ff99; line-height:1.1em; color: #99ff99; } h3 { font: 65% Tahoma, sans-serif, Arial; color: #ffffff; line-height:1.1em; color: #FFFFFF; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */ #fullheightcontainer{ position:relative; width:100%; /*** Content Width ***/ display:table; height:100%; margin-bottom:-15px; /*** NEGATIVE TOTAL Height of Footer Rows ***/ background-image: url(images/fadebg.gif); background-repeat: repeat-x; } #wrapper{ display:table-cell; position:relative; } #outer{ position:relative; margin-left:17.5%; /*** Left Column Width ***/ margin-right:17.5%; background:#827969; /*** Background colour of center column. ***/ height:100%; border-left: 2px solid #FFF; border-right: 2px solid #FFF; } #float-wrap{ width:100%; float:left; display:inline;

}
#left{
float:left;
display:inline;
width:17.5%; /*** Left Column Width ***/
margin-left:-17.5%; /*** NEGATIVE Left Column Width ***/
position:relative;
}
#right{
float:left;
display:inline;
width:17.5%; /*** Right Column Width ***/
margin-right:-17.5%; /*** NEGATIVE Right Column Width ***/
position:relative;
}
#center{
position:relative; /* fix for IE */
width:100%;
float:right;
height:100%;
display:table;
}
#clearheadercenter{
height:116px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearheaderleft{
height:116px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearheaderright{
height:116px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearfootercenter{
height:15px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#clearfooterleft{
height:15px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#clearfooterright{
height:15px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#footer{
z-index:1;
position:relative;
width:100%;
height:0px;
}
#subfooter1{
margin:0px;
text-align:center;
height:15px;
overflow:hidden;
}
#header{
z-index:1;
position:absolute;
top:0px;
left:0px;
width:100%;
height:0px;
}
#header-inner{
min-width:770px; /*** Minimum Content Width ***/
height:116px;
}
#subheader1{
margin:0px;
padding-left:5em;
background:#706a60;
height:76px;
overflow:hidden;
}
#subheader2{
margin:0px;
background:#706a60;
text-align:center;
height:32px;
overflow:hidden;
border-bottom: 8px solid #fff;
}
#contentbox {
background-image: url(images/diaglinebg.png);
background-repeat: repeat;
padding: 5px;
}
#container-left{}
#container-right{}
#container-center{
padding-left: 34px;
padding-right: 34px;
}
#centerfill,#leftfill,#rightfill{
display:none;
}
#form {
width: 80%;
padding: 4px;
position: relative;
right:auto;
float:left;
margin-bottom: 5px;
}
#formcell {
background: #706a60;
padding: 1px ;
border: 1px;
border-style:solid;
border-color:#FFFFFF;
color: #fff;
margin-bottom: 2px;
margin-top: 0px;
}
/*- Menu Tabs 2--------------------------- */

#tabs2 {
margin: 0.7em 0 0;
padding: 0.0em 0 0;
font-weight: bold;
font-size: 70%;
}
#tabs2 ul, #tabs2 ul li {
list-style: none;
margin: 0;
padding: 0;
}
#tabs2 ul {
padding: 6px 0 5px;
text-align: center;
}
#tabs2 ul li {
display: inline;
margin-right: -2px;
}
#tabs2 ul li a {
background:url("images/menu/tableft2.gif") no-repeat left top;
padding: 5px 0;
text-decoration:none;
}
#tabs2 ul li span {
background:url("images/menu/tabright2.gif") no-repeat right top;
padding:5px 10px 5px 5px;
margin: 4px 0 4px 4px;
color:#84776B;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs2 a span {float:none;}
/* End IE5-Mac hack */
#tabs2 a:hover span {
color:#74675B;
}
#tabs2 a:hover {
background-position:0% -42px;
}
#tabs2 a:hover span {
background-position:100% -42px;
}

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 10 hours ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi I've been away for a few

Hi

I've been away for a few months, and don't have much free time right now. For those of you in England, if I say I teach at a Secondary School and tell you an Ofsted visit is imminent, you will understand the panic my life is right now.

In your html, you have this in the in page css:

#container-center{ min-height:100%; }

If removed it is all OK.

Haven't got my brain in gear right now as to why this is so.

Hope this helps.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 32 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

ClevaTreva wrote:Hi

ClevaTreva wrote:
Hi

I've been away for a few months, and don't have much free time right now. For those of you in England, if I say I teach at a Secondary School and tell you an Ofsted visit is imminent, you will understand the panic my life is right now.

Ouch. No idea about Ofsted with us (although we've only been open 3ish years) but we've got an Open Evening on 9th of November, and 60 brand new Dell pcs to get up and running . . . . and I'm on holiday next week Tongue

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 10 hours ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi TPH I've got upwards of

Hi TPH

I've got upwards of 100 machines to manually install PhotoShop CS3 on (it won't install using an msi, coz I can't find a network msi for it).

I've got Year 7 parents evening tomorrow. And I got a 2 foot high stack of Year 11 coursework to mark, oh and my daughter is moving in over half term to stay with me permanently, so i have been sorting out the house and her new school. Nightmare.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 32 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Teacher as well as

Teacher as well as technician? Ouch.

We've got an MSI for Photoshoop-da-whoop Elephants, although my predecessor was the one that made it.

What network do you run? Vanilla XP, RM CC3, Novell?

/off topic

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 10 hours ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Not a techie, just they

Not a techie, just they don't have the time, and I need the software.

We run XP PRO and Windows 200X server (can't remember which) over an RM network (we don't often buy machines from them though!).

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 32 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

We went with Dell for Phase

We went with Dell for Phase 2. The kids get brand new Core 2 Duo Optiplex 745s and 20.1" widescreen TFTs.

Life's not fair Tongue

Verschwindende wrote:
  • CSS doesn't make pies

faz9
Offline
Regular
Last seen: 12 years 41 weeks ago
Joined: 2007-03-07
Posts: 14
Points: 0

Hey, I forgot about this

Hey, I forgot about this thread and I deeply appreciate the help you've been giving me however...it's still not working.

In IE7, if the content doesn't fill the page, then the div doesn't fill the page. I've attached a screen shot to show what I mean

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 10 hours ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi

Hi

Can you post a link to the current problem page and I'll look at it.

TPH ...

We just had the ofsted visit and got nearly (all but one aspect) maximum grades for all areas. PHEW! We are winding down for the holidays and I am whacked.

It was 3 years and one month since they last visited BTW.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 32 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

ClevaTreva wrote:Hi Can you

ClevaTreva wrote:
Hi

Can you post a link to the current problem page and I'll look at it.

TPH ...

We just had the ofsted visit and got nearly (all but one aspect) maximum grades for all areas. PHEW! We are winding down for the holidays and I am whacked.

It was 3 years and one month since they last visited BTW.

winding down? I've got a massive list of stuff that needs doing over Christmas Tongue congrats on the ofsted grades Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 10 hours ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Well There is always a lot

Well

There is always a lot to do, whether you do it or not is another matter Wink

faz9
Offline
Regular
Last seen: 12 years 41 weeks ago
Joined: 2007-03-07
Posts: 14
Points: 0

Sorry, my ftp was playing

Sorry, my ftp was playing up. Only just got it working now.

http://www.aqqi54.dsl.pipex.com/ifportfolio/

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 10 hours ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

OK Got the page. I am so

OK

Got the page. I am so tired right now I could ........... zzzzzzzzzzzz.

Look at it tomorrow Smile

faz9
Offline
Regular
Last seen: 12 years 41 weeks ago
Joined: 2007-03-07
Posts: 14
Points: 0

It's quite the doozy huh

It's quite the doozy huh

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 10 hours ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Well, the problem is

Hi

Well, the problem is your use of percentages for the column widths. You have used 17.5%, 65% and 17.5%, but then used borders to make the column.

The design I posted has a variable width center column and fixed width external columns. You must therefore fix those left and right columns and put the border on them.

Let me know what you want to do.

Trev

faz9
Offline
Regular
Last seen: 12 years 41 weeks ago
Joined: 2007-03-07
Posts: 14
Points: 0

Ok. I thought I knew what

Ok.

I thought I knew what you meant and attempted to fix it, however, it didn't.

Are you saying that the 2px border is causing the problem? Or are you saying that I cant use percentages for the outer column parts? My attempt at fixing either of these didn't seem to work :\

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 45 weeks 20 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Since your column widths add

Since your column widths add up to exactly 100%, any border makes them bigger than that, thus the scrollbars. Padding, margins, and borders all add more width to an element. If that element or combination of elements are already filling up 100% of the available width then adding a border of any size greater than 0 will make the total width more than 100% wide.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

faz9
Offline
Regular
Last seen: 12 years 41 weeks ago
Joined: 2007-03-07
Posts: 14
Points: 0

Well that's what I thought,

Well that's what I thought, but removing the border didn't fix the problem.

(also you seem to have confused the problem. There is no scrollbar issue here. Its an issue of the page not filling the screen in ie7)

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 10 hours ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

It's all because IE7 can't

It's all because IE7 can't inherit the min-heights because it didn't implement the table property. IE 6 used height as min-height to get round this, but MS 'fixed' this 'bug'.

So I used three filler columns (at the start of the body html). Because I implemented these rather simply (not thinking someone would do as you have), your design broke. I will re-work the css so those columns are more sophisticated to fix it (I had a brainwave this morning on how to do it). I'll do it this weekend). I also found a way to avoid using the clear headers (etc) filler divs.

Trev

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 10 hours ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Sorry for the delay - continuing work pressures :(

In your html, make sure the link to the general stylesheet is before the ie7 style.

This is the new ie7 style:

#fullheightcontainer{height:auto;min-height:100%} #wrapperfill{ position:absolute; top:0; display:block; height:100%; }

In your html, replace this:

with this:

In your main css ...

Replace this:

#centerfill, #leftfill, #rightfill { display: none; }

with this:

#wrapperfill { display: none; }

Then you need to add div id's to the start of the css of these divs:

#wrapper,#wrapperfill { css here } #outer,#outerfill { css here } #float-wrap,#float-wrapfill { css here } #left,#leftfill { css here } #right,#rightfill { css here } #center,#centerfill { css here }

I THINK that will do it. Let me know.

Trevor

faz9
Offline
Regular
Last seen: 12 years 41 weeks ago
Joined: 2007-03-07
Posts: 14
Points: 0

You're some sort of coding

You're some sort of coding genius. Thanks for the help. So far, it seems to work well. That was a nice into into css for me, huh Smile

Again, thanks so much for the help Trevor.