Forum Moderators: not2easy
I'm having a problem with IE6 and Firefox.
#rightbar {
padding: 5px;
float:right;
text-align:center;
border-left: 1px solid #DADADA;
height: 100%;
width: 150px;
voice-family: "\"}\"";
voice-family:inherit;
width:139px;
}
html>body #rightbar {
width:139px;
}
The width of my rightbar is 139 + 10(padding) + 1(left border) = 150 total width. Displaying perfectly in Firefox/Mozilla. But only displaying 139px total width with padding, borders inside in IE6. I checked the Doctype, its correct.
If I add the line
* html #rightbar {
width:150px;
}
it works correctly both in IE6 and Firefox. But I afraid it'll break in IE5.x.
I dont know what to do...
my doctype is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Is my IE6 still in quirks mode and rendering the box model like IE5.x?
Please anybody help......
Yes, you're right my Doctype is not in the first line. Now I checked it and all things solved.
But another problem, its a PHP page and php needs the line session_start(); in the beginning of the document. I moved the Doctype line above the session_start(); and php is throwing some ugly warning messages in every page.
Anyway U helped me find out the CSS problem thanks a lot. If you're familiar with PHP please help..
Can't you put the session_start(); and the DTD on the first line?
I used the doctype line in the same line with some trick and it's now working fine.
Thank you so much.
I was googling and testing with for past 2 days to fix this problem. Finally fixed today. :)
I'm making the rightbar height 100%. It worked correctly when IE6 is in quirks mode, but not now.
html, body {
padding : 0;
margin : 0;
height: 100%;
}
#container {
clear:both;
border-right: 1px solid #999999;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
float: left;
min-height: 100%;
margin:0px;
width: 768px;
}
* html #container {height: 100%;}
#rightbar {
padding: 5px;
float:right;
text-align:center;
border-left: 1px solid #DADADA;
height: 100%;
width: 150px;
voice-family: "\"}\"";
voice-family:inherit;
width:139px;
}
html>body #rightbar {
width:139px;
}
There is a header div with 200 px height above the container div. Inside the container div "content div(middle box)" get longer and stretches to the bottom but the rightbar stops at a certain point. I tested the page with just a single line text in the rightbar, the height of the rightbar stops around 300px before the container ends. I want the 3 columns to stretch till the end of the container.
Everything worked correctly when IE6 is in quirks mode (before putting the doctype in the first line)
What would be the solution for this...
Here's an exerpt from the W3C specs:
If [the element with a height value] only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.
If it has block-level children, the height is the distance between the top border-edge of the topmost block-level child box ... and the bottom border-edge of the bottommost block-level child box ...
The above quote from the specs (bold and ellipses are mine) is pretty easy to follow. A box is as tall as the combined height of it's children. What throws people off here is that the above quote refers specifically to elements with a height setting of auto, so you'd think that giving an element a setting of 100% wouldn't produce the above result.
But now consider what the specs say about percentage height settings...
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly ... and this element is not absolutely positioned, the value is interpreted like 'auto'.
And there it is. If the container doesn't have an explicit height, the child's percentage height is calculated as auto (because there's nothing for it to be a percentage OF).
Solution: Give the container an explicit height (min-height is a different property and doesn't satisfy this requirement) and the child box will render as 100% of that height.
The specs also say that ...
A percentage height on the root element is relative to the viewport.
If I give the container a height:100% no changes in IE6 but contents in the middle column is overflowing above the footer in Firefox and Opera.
I somewhere found that using min-height property and *html can solve this overflow problem. That is why I used the min-height:100% but this time it didn't overflowed but rightbar didn't stretched.
For the #container:
If I give min-hieght:100% then no overflow
If I give height:100% no changes(no use) in IE6 but container stops its height in a point and the remaining content overflowing above the footer in Firefox and Opera.
As for the text overlapping the footer...how is the footer positioned on the page?
---------------------------------------
I want the 3 divs(leftbar,content,rightbar) inside the container to be stretched when the the content div height becomes long.
Oh. I thought you said you wanted them to be 100% height. 100% height is in reference to something, and usually when people say it they mean in reference to the browser window.
Let me see if I understand...you have a three column layout that looks fine as long as the content remains shorter than the sidebars. But when the content exceeds the length of the sidebars (which are floated), the sidebars do not continue down with it. More precisely, the sidebar background does not continue down with it. Instead, the content background moves beneath the sidebar, looking funky.
Does that accurately describe the problem you're having? If so, is the center div fixed width or relative?
This is the style for the middle div
#content{
padding-top: 20px;
padding-right: 5px;
padding-left: 5px;
margin-left:160px;
background-color: #FFFFFF;
text-align: center;
margin-top: 0px;
margin-right: 150px;
margin-bottom: 0px;
width:440px;
}
width:440px;
Good news for you!
Here's your solution with some (possibly convoluted) explanatation:
One, there is no way, that I know of, to force a floated element to match the height of another element, unless you can explicitly set the height of both (like as in, height: 1000px;). Since you obviously can't do that (who knows how long that content could end up being), you need a way to make the float LOOK like it matches the height of the content...enter "Faux Columns."
The article describing this technique can be found at A List Apart. It's author is Dan Cedarholm and you should read it before trying this. Still, here's the basics...
You set up your wrapper div to have a background that matches the appearance of the float. So if you have a 200px wide, left floated <div> with a blue background, you make a 200px wide blue image (1px high is enough) and tile it with repeat-y on the left side of the container <div>. When the float ends and the container underneath becomes visible again, you've got an appearance that matches the float and it looks like the column continues the full length (Cedarholm explains it better...read his article.)
In your case, with two floats, you'll need an image that matches both sidebars. Since you have a fixed width center column, you're in luck. Just make an image that is the full width of the container <div>, with the left sidebar color matched on the left, a 440px white space in the middle, and a right sidebar match on the right. Add it as your background in the container with position center and repeat-y and it should work fine.
"there is no way, that I know of, to force a floated element to match the height of another element, unless you can explicitly set the height of both "
You should check out the following link:
[pmob.co.uk...]
The author describes in detail his implementation for a 3 column page. He uses a center column in which he uses a negative float from the center to create the left column. The result is that the "height" of the center and left columns will always match.
He uses height 100% in this implementation.
Regarding 100% height I offer the following link:
[csscreator.com...]
This thread describes in detail how the author implements 100% height and relates it to cross browser compatability.
I hope this information might be of interst and possibly helpful at some time.
In this site I used a fixed width for the center div. In future if I use a similar layout with liquid center div, how should I manage them?
Is my layout logically perfect and in standard? I afraid to use absolute positioning, that's why I always use float divs in my layout like this. Is that correct?
Thanks again :)
if I use a similar layout with liquid center div, how should I manage them
That's where things get sticky, because you cannot construct a visual background on both sides. you'd need to tweak the layout so that you could place the left BG in one container <div> and the right BG in another.
I rarely use 3col layouts, so I've never actually worked this out, but I imagine something like this would do it....
<div id="container1">
<div id="container2">
<div id="leftsidebar"></div>
<div id="rightsidebar"></div>
<div id="content"></div>
</div>
</div>
...where container1 has the left sidebar background, and container2 has the right sidebar backgroundwith background color set to transparent.
Can't say for sure it would work, but it might.
