SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
Thread: IE 6 layout problems
-
Sep 7, 2007, 07:11 #1
- Join Date
- Apr 2002
- Posts
- 395
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
IE 6 layout problems
This is my 1st layout in CSS, after a long history with tables. I am beginning to get a hang of it, just a few problems.
The layout is supposed to be centered. The "right-slide" box is supposed to have a height of 100% so it would reach the bottom of the page. It works in Firefox, but in IE 6 the page is aligned to the left and the "right-slide" is not 100%.
HTML Code:<html> <head> <title>Good Stuff</title> <style type="text/css" media="screen"> body { background:#666666; color: #FFFFCC; font-family: palatino linotype; height: 100%; } #outer{ min-height: 100%; width:980px; margin-left:auto; margin-right:auto; text-align:left; position:relative } #leftcontent, #right-slide, #centercontent { float:left; width:200px; } #leftcontent { border:0px solid #000; width:200px; height:500px; } #right-slide { z-index: 0; width:160px; height: 100%; background:#cccccc; } #centercontent { width:610px; background:#666666; border:0px solid #000; } #top-intro { margin-left: 200px; width:700px; background:#666666; border:2px solid #000; } </style> </head> <body> <div id="outer"> <div id="leftcontent"> left content <br> </div> <div id="top-intro"> header content </div> <p> <div id="centercontent"> center content </div> <div id="right-slide"> rightcontent </div> </div> </body> </html>
-
Sep 7, 2007, 07:43 #2
- Join Date
- Apr 2007
- Location
- New London, CT
- Posts
- 172
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Fixed- try using all percentage widths and heights. At least that is what I did and here is my code below.
HTML Code:<html> <head> <title>Good Stuff</title> <style type="text/css" media="screen"> body { background:#666666; color: #FFFFCC; font-family: palatino linotype; height: 100%; overflow: auto; } #outer{ width:980px; margin: auto; text-align:left; position:relative; border: 1px solid red; height: 100%; } #leftcontent, #right-slide, #centercontent { float:left; position: relative; } #leftcontent { border:1px solid green; width:20%; height:100%; } #right-slide { width:19%; height: 100%; background:#cccccc; } #centercontent { width:60%; background:#666666; border:1px solid blue; } #top-intro { margin-left: 20%; width:70%; background:#666666; border:2px solid #000; } </style> </head> <body> <div id="outer"> <div id="top-intro"> header content </div> <div id="leftcontent"> left content <br> </div> <div id="centercontent"> center content </div> <div id="right-slide"> rightcontent </div> </div> </body> </html>
Last edited by funktifyknow; Sep 7, 2007 at 07:45. Reason: clarification
-
Sep 7, 2007, 21:51 #3
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If it doesn't centre in IE6 - do you have a valid and full doctype at the start of the html ?
-
Sep 8, 2007, 08:31 #4
- Join Date
- Jan 2006
- Location
- Poland
- Posts
- 147
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Gee.. i would recomend as a start to add doctype:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Now about the 100% thing:
1. you have to add
Code:html{height: 100%;}
Code:min-height: 100%; height: 100%; width:980px; margin-left:auto; margin-right:auto; text-align:left; position:relative
Code:#right-slide { width:160px; min-height: 100%; _height: 100%; background:#cccccc; }
-
Sep 8, 2007, 10:42 #5
- Join Date
- Apr 2002
- Posts
- 395
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thank you, I got the page centered. I am still having problems with making the right column be 100%. I cannot seem to pin-point the problem. Here's my code:
HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Good Stuff</title> <style type="text/css" media="screen"> body { background:#666666; color: #FFFFCC; font-family: palatino linotype; height: 100%; overflow: auto; margin-bottom: 0; } html{height: 100%;} #outer{ min-height: 100%; height: 100%; width:980px; margin-left:auto; margin-right:auto; text-align:left; position:relative } #leftcontent, #right-slide, #centercontent { float:left; position: relative; } #leftcontent { border:0px solid #000; width:200px; } #right-slide { z-index: 0; width:160px; min-height: 100%; _height: 100%; text-align:center; background:#333333; border-left:2px solid #ccc; border-right:2px solid #ccc; } #top-intro { margin-left: 210px; width:760px; background:#333333; font-size: 14px; border:2px solid #ccc; } #centercontent { height: 100px; width:610px; background:#666666; border:0px solid #000; } </style> </head> <body> <div id="outer"> <div id="leftcontent"> LEFT </div> <div id="top-intro"> INTRO </div> <div id="centercontent"> CENTER </div> <div id="right-slide"> RIGHT </div> </div> </body> </html>
-
Sep 8, 2007, 10:50 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Originally Posted by funktifyknow
I'm afraid that you are using methods that just won't work. You cannot use 100% heights in that way. If you specify 100% height for the element then that's all you will get (assuming the browser has something to base 100% on anyway). If the content surpasses the 100% height it will be ignored.
The only way to specify a height that will allow a column to grow greater than the height is to use min-height. Of course IE6 doesn't understand min-height so you need to supply ie6 with a hack that supplies it with height instead as ie6 and under treat height as a minimum anyway.
Unfortunately using min-height means that children will have nothing to base their height on and the height collapses to auto. This effectively means that you only get one shot at using 100% height and that is usually used for the main wrapper. You can't nest any more elements and make then stretch to this parents height (unless you are using absolute positioning but this doesn't work in IE either).
You can't also specify 100% height for an element that starts some way down the page because it will the extend 100% down from its position thus forcing a vertical scrollbar as in your example.
Please read the faq on 100% height as this is explained in detail.
In reality you can't specify columns in css that keep track with each other and you have to resort to other methods to achieve this. The 3 col sticky thread shows a number of methods to achieve this but is a complicated subject.
Perhaps the easiest way to provide full length columns is to use a background image on the main 100% wrapper (min-height:100%) to provide the illusion of full length columns as in this example shown below.
http://www.pmob.co.uk/temp/3col-centred-template7.htm
If you add content to any of the columns then all columns will appear to grow in unison because the background is revealed on each through the image on the main wrapper.
You must use a valid doctype or IE6 will be in quirks mode and all bets are off because it will use the broken box model among other unwanted legacy behavior.Last edited by Paul O'B; Sep 11, 2007 at 12:02.
-
Sep 8, 2007, 11:23 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by IamAdam
Code:<!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=iso-8859-1" /> <title>Good Stuff</title> <style type="text/css" media="screen"> html,body{ height:100%; margin:0; padding:0 } p{margin:0 0 1em 0} body { background:#666; color: #FFFFCC; font-family: palatino linotype; text-align:center; } #outer{ min-height: 100%; width:980px; margin:0 auto; text-align:left; position:relative; background:red; } * html #outer{height:100%;} #leftcontent, #right-slide, #centercontent { float:left; position: relative; } #leftcontent { width:200px; background:#999; border-left:2px solid #ccc; border-right:2px solid #ccc; min-height:40px;/* stop centre float from moving left if no content is present in left column*/ } * html #leftcontent {height:40px} #right-slide { z-index: 0; width:160px; text-align:center; background:#333; border-left:2px solid #ccc; border-right:2px solid #ccc; } #top-intro { width:772px; background:#333; font-size: 14px; border:2px solid #ccc; display:inline;/* ie double margin bug*/ float:left; } #centercontent { width:612px; background:#666; } </style> </head> <body> <div id="outer"> <div id="leftcontent"> <p>Left content goes here: Left content goes here: Left content goes here: Left content goes here: Left content goes here: Left content goes here: Left content goes here: Left content goes here: </p> </div> <div id="top-intro"> <h1>Heading</h1> </div> <div id="centercontent"> <p>Centre content goes here : Centre content goes here : Centre content goes here : Centre content goes here : Centre content goes here : Centre content goes here : Centre content goes here : Centre content goes here : </p> </div> <div id="right-slide"> <p>Right conntent goes here : Right conntent goes here : Right conntent goes here : Right conntent goes here : Right conntent goes here : </p> </div> </div> </body> </html>
And then simply make an image that vcan be repeated on the main outer to produce the illusion of columns.
This was the image I use in my example above:
http://www.pmob.co.uk/temp/images/3-...-blueshade.gif
Make a similar image that fits your layout.
When you have that image in place you won't of course need the borders and background colours on the existing elements as they will all be taken care of by that one image.
This is the easiest way to do what you want. There are methods to do it without images but they are very complicated.
Hope it helps anyway
-
Sep 11, 2007, 11:26 #8
- Join Date
- Apr 2007
- Location
- New London, CT
- Posts
- 172
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well don't I feel like a donkey now. No not really. I will give that article a read. BTW I really enjoy your blog. It has helped me out a couple difficult spots.
-
Sep 11, 2007, 12:04 #9
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Well don't I feel like a donkey now
Bookmarks